From b23be0686d5399f29b2bf807856ba5bfd08d8b92 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 15 Mar 2021 11:03:05 +0100 Subject: [PATCH 1/2] Normalize the block toolbar for more blocks: button, buttons, list, heading, paragraph, quote --- packages/block-editor/README.md | 8 + .../README.md | 12 +- .../src/components/alignment-control/index.js | 12 ++ .../test/__snapshots__/index.js.snap | 139 ++++++++++++++++++ .../test/index.js | 9 +- .../index.js => alignment-control/ui.js} | 31 ++-- packages/block-editor/src/components/index.js | 7 +- .../src/components/index.native.js | 7 +- .../README.md | 20 +-- .../justify-content-control/index.js | 12 ++ .../style.scss | 0 .../ui.js} | 15 +- packages/block-editor/src/style.scss | 2 +- packages/block-library/src/button/edit.js | 43 +++--- packages/block-library/src/buttons/edit.js | 6 +- .../block-library/src/buttons/edit.native.js | 6 +- packages/block-library/src/heading/edit.js | 21 ++- packages/block-library/src/list/edit.js | 114 +++++++------- packages/block-library/src/paragraph/edit.js | 15 +- .../src/paragraph/edit.native.js | 6 +- packages/block-library/src/quote/edit.js | 6 +- 21 files changed, 326 insertions(+), 165 deletions(-) rename packages/block-editor/src/components/{alignment-toolbar => alignment-control}/README.md (83%) create mode 100644 packages/block-editor/src/components/alignment-control/index.js rename packages/block-editor/src/components/{alignment-toolbar => alignment-control}/test/__snapshots__/index.js.snap (50%) rename packages/block-editor/src/components/{alignment-toolbar => alignment-control}/test/index.js (93%) rename packages/block-editor/src/components/{alignment-toolbar/index.js => alignment-control/ui.js} (72%) rename packages/block-editor/src/components/{justify-toolbar => justify-content-control}/README.md (82%) create mode 100644 packages/block-editor/src/components/justify-content-control/index.js rename packages/block-editor/src/components/{justify-toolbar => justify-content-control}/style.scss (100%) rename packages/block-editor/src/components/{justify-toolbar/index.js => justify-content-control/ui.js} (83%) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 55653a083dd7c6..8eda847a46603d 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -76,6 +76,10 @@ registerCoreBlocks(); +# **AlignmentControl** + +Undocumented declaration. + # **AlignmentToolbar** Undocumented declaration. @@ -406,6 +410,10 @@ _Related_ - +# **JustifyContentControl** + +Undocumented declaration. + # **JustifyToolbar** Undocumented declaration. diff --git a/packages/block-editor/src/components/alignment-toolbar/README.md b/packages/block-editor/src/components/alignment-control/README.md similarity index 83% rename from packages/block-editor/src/components/alignment-toolbar/README.md rename to packages/block-editor/src/components/alignment-control/README.md index e400bb1547dd07..f78cd0299095c1 100644 --- a/packages/block-editor/src/components/alignment-toolbar/README.md +++ b/packages/block-editor/src/components/alignment-control/README.md @@ -1,6 +1,6 @@ -## Alignment Toolbar +## Alignment Control -The `AlignmentToolbar` component renders a toolbar that displays alignment options for the selected block. +The `AlignmentControl` component renders a dropdown mmmenu that displays alignment options for the selected block. This component is mostly used for blocks that display text, such as Heading, Paragraph, Post Author, Post Comments, Verse, Quote, Post Title, etc... And the available alignment options are `left`, `center` or `right` alignment. @@ -18,11 +18,11 @@ This component is mostly used for blocks that display text, such as Heading, Par Renders an alignment toolbar with alignments options. ```jsx -import { AlignmentToolbar } from '@wordpress/block-editor'; +import { AlignmentControl } from '@wordpress/block-editor'; const MyAlignmentToolbar = () => ( - - + { setAttributes( { textAlign: nextAlign } ); @@ -31,7 +31,7 @@ const MyAlignmentToolbar = () => ( ); ``` -_Note:_ In this example that we render `AlignmentToolbar` as a child of the `BlockControls` component. +_Note:_ In this example that we render `AlignmentControl` as a child of the `BlockControls` component. ### Props diff --git a/packages/block-editor/src/components/alignment-control/index.js b/packages/block-editor/src/components/alignment-control/index.js new file mode 100644 index 00000000000000..d8c4470a03bd0c --- /dev/null +++ b/packages/block-editor/src/components/alignment-control/index.js @@ -0,0 +1,12 @@ +/** + * Internal dependencies + */ +import AlignmentUI from './ui'; + +export function AlignmentControl( props ) { + return ; +} + +export function AlignmentToolbar( props ) { + return ; +} diff --git a/packages/block-editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/alignment-control/test/__snapshots__/index.js.snap similarity index 50% rename from packages/block-editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap rename to packages/block-editor/src/components/alignment-control/test/__snapshots__/index.js.snap index c6699db92e4961..d7b0f551ea16f1 100644 --- a/packages/block-editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap +++ b/packages/block-editor/src/components/alignment-control/test/__snapshots__/index.js.snap @@ -138,3 +138,142 @@ exports[`AlignmentToolbar should match snapshot 1`] = ` } /> `; + +exports[`AlignmentUI should allow custom alignment controls to be specified 1`] = ` + + + , + "isActive": false, + "onClick": [Function], + "role": "menuitemradio", + "title": "My custom left", + }, + Object { + "align": "custom-right", + "icon": + + , + "isActive": true, + "onClick": [Function], + "role": "menuitemradio", + "title": "My custom right", + }, + ] + } + icon={ + + + + } + isCollapsed={true} + label="Align" + popoverProps={ + Object { + "isAlternate": true, + "position": "bottom right", + } + } + toggleProps={ + Object { + "describedBy": "Change text alignment", + } + } +/> +`; + +exports[`AlignmentUI should match snapshot 1`] = ` + + + , + "isActive": true, + "onClick": [Function], + "role": "menuitemradio", + "title": "Align text left", + }, + Object { + "align": "center", + "icon": + + , + "isActive": false, + "onClick": [Function], + "role": "menuitemradio", + "title": "Align text center", + }, + Object { + "align": "right", + "icon": + + , + "isActive": false, + "onClick": [Function], + "role": "menuitemradio", + "title": "Align text right", + }, + ] + } + icon={ + + + + } + isCollapsed={true} + label="Align" + popoverProps={ + Object { + "isAlternate": true, + "position": "bottom right", + } + } + toggleProps={ + Object { + "describedBy": "Change text alignment", + } + } +/> +`; diff --git a/packages/block-editor/src/components/alignment-toolbar/test/index.js b/packages/block-editor/src/components/alignment-control/test/index.js similarity index 93% rename from packages/block-editor/src/components/alignment-toolbar/test/index.js rename to packages/block-editor/src/components/alignment-control/test/index.js index 05ac7e67dcda7a..c4962288053252 100644 --- a/packages/block-editor/src/components/alignment-toolbar/test/index.js +++ b/packages/block-editor/src/components/alignment-control/test/index.js @@ -11,14 +11,14 @@ import { alignLeft, alignCenter } from '@wordpress/icons'; /** * Internal dependencies */ -import { AlignmentToolbar } from '../'; +import AlignmentUI from '../ui'; -describe( 'AlignmentToolbar', () => { +describe( 'AlignmentUI', () => { const alignment = 'left'; const onChangeSpy = jest.fn(); const wrapper = shallow( - + ); const controls = wrapper.props().controls; @@ -53,7 +53,8 @@ describe( 'AlignmentToolbar', () => { test( 'should allow custom alignment controls to be specified', () => { const wrapperCustomControls = shallow( - onChange( value === align ? undefined : align ); } @@ -57,9 +57,11 @@ export function AlignmentToolbar( props ) { return isRTL() ? alignRight : alignLeft; } + const UIComponent = isToolbar ? ToolbarGroup : DropdownMenu; + const extraProps = isToolbar ? { isCollapsed } : { isToolbarButton }; + return ( - ); } -export default AlignmentToolbar; +export default AlignmentUI; diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index f1756721532f96..53518a8d728a29 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -5,7 +5,7 @@ export * from './colors'; export * from './gradients'; export * from './font-sizes'; -export { default as AlignmentToolbar } from './alignment-toolbar'; +export { AlignmentControl, AlignmentToolbar } from './alignment-control'; export { default as Autocomplete } from './autocomplete'; export { BlockAlignmentControl, @@ -47,7 +47,10 @@ export { } from './inner-blocks'; export { default as InspectorAdvancedControls } from './inspector-advanced-controls'; export { default as InspectorControls } from './inspector-controls'; -export { default as JustifyToolbar } from './justify-toolbar'; +export { + JustifyToolbar, + JustifyContentControl, +} from './justify-content-control'; export { default as __experimentalLinkControl } from './link-control'; export { default as __experimentalLinkControlSearchInput } from './link-control/search-input'; export { default as __experimentalLinkControlSearchResults } from './link-control/search-results'; diff --git a/packages/block-editor/src/components/index.native.js b/packages/block-editor/src/components/index.native.js index 676fa68d970b96..b8cbe67a6be445 100644 --- a/packages/block-editor/src/components/index.native.js +++ b/packages/block-editor/src/components/index.native.js @@ -14,11 +14,14 @@ export { default as BlockVerticalAlignmentToolbar } from './block-vertical-align export * from './colors'; export * from './gradients'; export * from './font-sizes'; -export { default as AlignmentToolbar } from './alignment-toolbar'; +export { AlignmentControl, AlignmentToolbar } from './alignment-control'; export { default as InnerBlocks } from './inner-blocks'; export { default as InspectorAdvancedControls } from './inspector-advanced-controls'; export { default as InspectorControls } from './inspector-controls'; -export { default as JustifyToolbar } from './justify-toolbar'; +export { + JustifyToolbar, + JustifyContentControl, +} from './justify-content-control'; export { default as LineHeightControl } from './line-height-control'; export { default as PlainText } from './plain-text'; export { diff --git a/packages/block-editor/src/components/justify-toolbar/README.md b/packages/block-editor/src/components/justify-content-control/README.md similarity index 82% rename from packages/block-editor/src/components/justify-toolbar/README.md rename to packages/block-editor/src/components/justify-content-control/README.md index 74ad57163c5dec..b98ba0d38693cb 100644 --- a/packages/block-editor/src/components/justify-toolbar/README.md +++ b/packages/block-editor/src/components/justify-content-control/README.md @@ -1,6 +1,6 @@ ## Justify Toolbar -The `JustifyToolbar` component renders a toolbar that displays justify options for the selected block. +The `JustifyContentControl` component renders a toolbar that displays justify options for the selected block. This component is used to set the flex justification for the elements in the block, allowing to justify `left`, `center`, `right`, and `space-between`. In comparison, the alignment options are for the block itself. @@ -10,14 +10,14 @@ See the Navigation block for an example usage. ### Usage -Renders an justification toolbar with options. +Renders an justification control with options. ```jsx -import { JustifyToolbar } from '@wordpress/block-editor'; +import { JustifyContentControl } from '@wordpress/block-editor'; const MyJustifyToolbar = ( { attributes, setAttributes } ) => ( - - + { setAttributes( { justfication: next } ); @@ -35,7 +35,7 @@ const MyJustifyToolbar = ( { attributes, setAttributes } ) => ( items-justified-space-between -_Note:_ In this example that we render `JustifyToolbar` as a child of the `BlockControls` component. +_Note:_ In this example that we render `JustifyContentControl` as a child of the `BlockControls` component. ### Props @@ -46,14 +46,6 @@ _Note:_ In this example that we render `JustifyToolbar` as a child of the `Block An array of strings for what controls to show, by default it shows all. - -#### `isCollapsed` -* **Type:** `boolean` -* **Default:** `true` - -Whether to display toolbar options in the dropdown menu. - - #### `onChange` * **Type:** `Function` * **Required:** Yes diff --git a/packages/block-editor/src/components/justify-content-control/index.js b/packages/block-editor/src/components/justify-content-control/index.js new file mode 100644 index 00000000000000..59ade832cca6dd --- /dev/null +++ b/packages/block-editor/src/components/justify-content-control/index.js @@ -0,0 +1,12 @@ +/** + * Internal dependencies + */ +import JustifyContentUI from './ui'; + +export function JustifyContentControl( props ) { + return ; +} + +export function JustifyToolbar( props ) { + return ; +} diff --git a/packages/block-editor/src/components/justify-toolbar/style.scss b/packages/block-editor/src/components/justify-content-control/style.scss similarity index 100% rename from packages/block-editor/src/components/justify-toolbar/style.scss rename to packages/block-editor/src/components/justify-content-control/style.scss diff --git a/packages/block-editor/src/components/justify-toolbar/index.js b/packages/block-editor/src/components/justify-content-control/ui.js similarity index 83% rename from packages/block-editor/src/components/justify-toolbar/index.js rename to packages/block-editor/src/components/justify-content-control/ui.js index 6243bac81b9b81..5cc173bab0c1db 100644 --- a/packages/block-editor/src/components/justify-toolbar/index.js +++ b/packages/block-editor/src/components/justify-content-control/ui.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { ToolbarGroup } from '@wordpress/components'; +import { DropdownMenu, ToolbarGroup } from '@wordpress/components'; import { justifyLeft, justifyCenter, @@ -17,12 +17,14 @@ const icons = { 'space-between': justifySpaceBetween, }; -export function JustifyToolbar( { +function JustifyContentUI( { allowedControls = [ 'left', 'center', 'right', 'space-between' ], isCollapsed = true, onChange, value, popoverProps, + isToolbar, + isToolbarButton = true, } ) { // If the control is already selected we want a click // again on the control to deselect the item, so we @@ -67,17 +69,20 @@ export function JustifyToolbar( { }, ]; + const UIComponent = isToolbar ? ToolbarGroup : DropdownMenu; + const extraProps = isToolbar ? { isCollapsed } : { isToolbarButton }; + return ( - allowedControls.includes( elem.name ) ) } + { ...extraProps } /> ); } -export default JustifyToolbar; +export default JustifyContentUI; diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss index c6fc91571da8ff..72bdb7ff0d69d0 100644 --- a/packages/block-editor/src/style.scss +++ b/packages/block-editor/src/style.scss @@ -32,7 +32,7 @@ @import "./components/contrast-checker/style.scss"; @import "./components/default-block-appender/style.scss"; @import "./components/font-appearance-control/style.scss"; -@import "./components/justify-toolbar/style.scss"; +@import "./components/justify-content-control/style.scss"; @import "./components/link-control/style.scss"; @import "./components/line-height-control/style.scss"; @import "./components/image-size-control/style.scss"; diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js index 5925a07b089208..b0fcc297d6b9ed 100644 --- a/packages/block-library/src/button/edit.js +++ b/packages/block-library/src/button/edit.js @@ -16,7 +16,6 @@ import { RangeControl, TextControl, ToolbarButton, - ToolbarGroup, Popover, } from '@wordpress/components'; import { @@ -147,28 +146,26 @@ function URLPicker( { ); return ( <> - - - { ! urlIsSet && ( - - ) } - { urlIsSetandSelected && ( - - ) } - + + { ! urlIsSet && ( + + ) } + { urlIsSetandSelected && ( + + ) } { isSelected && ( - - + diff --git a/packages/block-library/src/buttons/edit.native.js b/packages/block-library/src/buttons/edit.native.js index 484ea35ae150da..8b9c1745ce1b3f 100644 --- a/packages/block-library/src/buttons/edit.native.js +++ b/packages/block-library/src/buttons/edit.native.js @@ -10,7 +10,7 @@ import { View } from 'react-native'; import { BlockControls, InnerBlocks, - JustifyToolbar, + JustifyContentControl, store as blockEditorStore, } from '@wordpress/block-editor'; import { createBlock } from '@wordpress/blocks'; @@ -121,8 +121,8 @@ export default function ButtonsEdit( { return ( <> { isSelected && ( - - + diff --git a/packages/block-library/src/heading/edit.js b/packages/block-library/src/heading/edit.js index dca740e6962265..e10ff49aa787cd 100644 --- a/packages/block-library/src/heading/edit.js +++ b/packages/block-library/src/heading/edit.js @@ -9,12 +9,11 @@ import classnames from 'classnames'; import { __ } from '@wordpress/i18n'; import { createBlock } from '@wordpress/blocks'; import { - AlignmentToolbar, + AlignmentControl, BlockControls, RichText, useBlockProps, } from '@wordpress/block-editor'; -import { ToolbarGroup } from '@wordpress/components'; /** * Internal dependencies @@ -40,16 +39,14 @@ function HeadingEdit( { return ( <> - - - - setAttributes( { level: newLevel } ) - } - /> - - + + setAttributes( { level: newLevel } ) + } + /> + { setAttributes( { textAlign: nextAlign } ); diff --git a/packages/block-library/src/list/edit.js b/packages/block-library/src/list/edit.js index afb5d562e33eba..3e84918f5ec957 100644 --- a/packages/block-library/src/list/edit.js +++ b/packages/block-library/src/list/edit.js @@ -9,7 +9,7 @@ import { RichTextShortcut, useBlockProps, } from '@wordpress/block-editor'; -import { ToolbarGroup } from '@wordpress/components'; +import { ToolbarButton } from '@wordpress/components'; import { __unstableCanIndentListItems as canIndentListItems, __unstableCanOutdentListItems as canOutdentListItems, @@ -84,70 +84,58 @@ export default function ListEdit( { /> ) } - - + { + onChange( changeListType( value, { type: 'ul' } ) ); + onFocus(); - if ( isListRootSelected( value ) ) { - setAttributes( { ordered: false } ); - } - }, - }, - { - icon: isRTL() - ? formatListNumberedRTL - : formatListNumbered, - title: __( 'Ordered' ), - describedBy: __( 'Convert to ordered list' ), - isActive: isActiveListType( value, 'ol', tagName ), - onClick() { - onChange( - changeListType( value, { type: 'ol' } ) - ); - onFocus(); + if ( isListRootSelected( value ) ) { + setAttributes( { ordered: false } ); + } + } } + /> + { + onChange( changeListType( value, { type: 'ol' } ) ); + onFocus(); - if ( isListRootSelected( value ) ) { - setAttributes( { ordered: true } ); - } - }, - }, - { - icon: isRTL() ? formatOutdentRTL : formatOutdent, - title: __( 'Outdent' ), - describedBy: __( 'Outdent list item' ), - shortcut: _x( 'Backspace', 'keyboard key' ), - isDisabled: ! canOutdentListItems( value ), - onClick() { - onChange( outdentListItems( value ) ); - onFocus(); - }, - }, - { - icon: isRTL() ? formatIndentRTL : formatIndent, - title: __( 'Indent' ), - describedBy: __( 'Indent list item' ), - shortcut: _x( 'Space', 'keyboard key' ), - isDisabled: ! canIndentListItems( value ), - onClick() { - onChange( - indentListItems( value, { type: tagName } ) - ); - onFocus(); - }, - }, - ] } + if ( isListRootSelected( value ) ) { + setAttributes( { ordered: true } ); + } + } } + /> + { + onChange( outdentListItems( value ) ); + onFocus(); + } } + /> + { + onChange( indentListItems( value, { type: tagName } ) ); + onFocus(); + } } /> diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js index 64167c359e2d5c..86c3af60c36721 100644 --- a/packages/block-library/src/paragraph/edit.js +++ b/packages/block-library/src/paragraph/edit.js @@ -7,9 +7,9 @@ import classnames from 'classnames'; * WordPress dependencies */ import { __, _x, isRTL } from '@wordpress/i18n'; -import { PanelBody, ToggleControl, ToolbarGroup } from '@wordpress/components'; +import { DropdownMenu, PanelBody, ToggleControl } from '@wordpress/components'; import { - AlignmentToolbar, + AlignmentControl, BlockControls, InspectorControls, RichText, @@ -21,10 +21,11 @@ import { formatLtr } from '@wordpress/icons'; const name = 'core/paragraph'; -function ParagraphRTLToolbar( { direction, setDirection } ) { +function ParagraphRTLControl( { direction, setDirection } ) { return ( isRTL() && ( - - - + setAttributes( { align: newAlign } ) } /> - setAttributes( { direction: newDirection } ) diff --git a/packages/block-library/src/paragraph/edit.native.js b/packages/block-library/src/paragraph/edit.native.js index 2c2a3f7552a8ec..a51a708a222767 100644 --- a/packages/block-library/src/paragraph/edit.native.js +++ b/packages/block-library/src/paragraph/edit.native.js @@ -4,7 +4,7 @@ import { __ } from '@wordpress/i18n'; import { createBlock } from '@wordpress/blocks'; import { - AlignmentToolbar, + AlignmentControl, BlockControls, RichText, store as blockEditorStore, @@ -39,8 +39,8 @@ function ParagraphBlock( { }, [] ); return ( <> - - + - - + { setAttributes( { align: nextAlign } ); From ed3fd34859882864b380c5c1a2060d2f1f3f20fa Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 16 Mar 2021 10:46:31 +0100 Subject: [PATCH 2/2] Fix unit tests --- .../test/__snapshots__/index.js.snap | 139 ------------------ 1 file changed, 139 deletions(-) diff --git a/packages/block-editor/src/components/alignment-control/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/alignment-control/test/__snapshots__/index.js.snap index d7b0f551ea16f1..4f549af0b2dc11 100644 --- a/packages/block-editor/src/components/alignment-control/test/__snapshots__/index.js.snap +++ b/packages/block-editor/src/components/alignment-control/test/__snapshots__/index.js.snap @@ -1,144 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`AlignmentToolbar should allow custom alignment controls to be specified 1`] = ` - - - , - "isActive": false, - "onClick": [Function], - "role": "menuitemradio", - "title": "My custom left", - }, - Object { - "align": "custom-right", - "icon": - - , - "isActive": true, - "onClick": [Function], - "role": "menuitemradio", - "title": "My custom right", - }, - ] - } - icon={ - - - - } - isCollapsed={true} - label="Align" - popoverProps={ - Object { - "isAlternate": true, - "position": "bottom right", - } - } - toggleProps={ - Object { - "describedBy": "Change text alignment", - } - } -/> -`; - -exports[`AlignmentToolbar should match snapshot 1`] = ` - - - , - "isActive": true, - "onClick": [Function], - "role": "menuitemradio", - "title": "Align text left", - }, - Object { - "align": "center", - "icon": - - , - "isActive": false, - "onClick": [Function], - "role": "menuitemradio", - "title": "Align text center", - }, - Object { - "align": "right", - "icon": - - , - "isActive": false, - "onClick": [Function], - "role": "menuitemradio", - "title": "Align text right", - }, - ] - } - icon={ - - - - } - isCollapsed={true} - label="Align" - popoverProps={ - Object { - "isAlternate": true, - "position": "bottom right", - } - } - toggleProps={ - Object { - "describedBy": "Change text alignment", - } - } -/> -`; - exports[`AlignmentUI should allow custom alignment controls to be specified 1`] = `