diff --git a/packages/block-editor/src/components/block-alignment-matrix-control/README.md b/packages/block-editor/src/components/block-alignment-matrix-control/README.md new file mode 100644 index 00000000000000..377f9f368dae4d --- /dev/null +++ b/packages/block-editor/src/components/block-alignment-matrix-control/README.md @@ -0,0 +1,63 @@ +# Alignment Matrix Control + +The alignment matrix control allows users to quickly adjust inner block alignment; this is in contrast to the alignment toolbar that aligns the frame block. + +![Button components](https://i.imgur.com/PxYkgL5.png) + +## Table of contents + +- [Alignment Matrix Control](#alignment-matrix-control) + - [Table of contents](#table-of-contents) + - [Design guidelines](#design-guidelines) + - [Usage](#usage) + - [Development guidelines](#development-guidelines) + - [Usage](#usage-1) + - [Props](#props) + +## Design guidelines + +### Usage + +The alignment matrix is a specialized tool, and it's used in the cover block. + +![Cover](https://i.imgur.com/nJjqen8.png) + +As an example, here's the matrix alignment tool in action. + +![center](https://i.imgur.com/0Ce1fZm.png) + +![rop_right](https://i.imgur.com/yGGf6IP.png) + +## Development guidelines + +### Usage + +```jsx +// This is a paraphrased example from the cover block +import { + BlockControls, + __experimentalBlockAlignmentMatrixControl as BlockAlignmentMatrixControl +} from "@wordpress/block-editor"; + +const controls = ( + <> + + + setAttributes( { contentPosition: nextPosition } ) + } + /> + + +} +``` + +### Props + +| Name | Type | Default | Description | +| ---------- | ---------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | +| `label` | `string` | `Change matrix alignment` | concise description of tool's functionality. | +| `onChange` | `function` | `noop` | the function to execute upon a user's change of the matrix state | +| `value` | `string` | `center` | describes the content alignment location and can be `top`, `right`, `bottom`, `left`, `topRight`, `bottomRight`, `bottomLeft`, `topLeft` | diff --git a/packages/block-editor/src/components/block-alignment-matrix-toolbar/index.js b/packages/block-editor/src/components/block-alignment-matrix-control/index.js similarity index 70% rename from packages/block-editor/src/components/block-alignment-matrix-toolbar/index.js rename to packages/block-editor/src/components/block-alignment-matrix-control/index.js index 8189d68f665844..5ad9dbffe64119 100644 --- a/packages/block-editor/src/components/block-alignment-matrix-toolbar/index.js +++ b/packages/block-editor/src/components/block-alignment-matrix-control/index.js @@ -10,11 +10,10 @@ import { DOWN } from '@wordpress/keycodes'; import { ToolbarButton, Dropdown, - ToolbarGroup, __experimentalAlignmentMatrixControl as AlignmentMatrixControl, } from '@wordpress/components'; -export function BlockAlignmentMatrixToolbar( props ) { +function BlockAlignmentMatrixControl( props ) { const { label = __( 'Change matrix alignment' ), onChange = noop, @@ -23,7 +22,7 @@ export function BlockAlignmentMatrixToolbar( props ) { } = props; const icon = ; - const className = 'block-editor-block-alignment-matrix-toolbar'; + const className = 'block-editor-block-alignment-matrix-control'; const popoverClassName = `${ className }__popover`; const isAlternate = true; @@ -42,18 +41,16 @@ export function BlockAlignmentMatrixToolbar( props ) { }; return ( - - - + ); } } renderContent={ () => ( @@ -67,4 +64,4 @@ export function BlockAlignmentMatrixToolbar( props ) { ); } -export default BlockAlignmentMatrixToolbar; +export default BlockAlignmentMatrixControl; diff --git a/packages/block-editor/src/components/block-alignment-matrix-toolbar/style.scss b/packages/block-editor/src/components/block-alignment-matrix-control/style.scss similarity index 65% rename from packages/block-editor/src/components/block-alignment-matrix-toolbar/style.scss rename to packages/block-editor/src/components/block-alignment-matrix-control/style.scss index 1309de2961bfa2..bc2fa4837bece2 100644 --- a/packages/block-editor/src/components/block-alignment-matrix-toolbar/style.scss +++ b/packages/block-editor/src/components/block-alignment-matrix-control/style.scss @@ -1,4 +1,4 @@ -.block-editor-block-alignment-matrix-toolbar__popover { +.block-editor-block-alignment-matrix-control__popover { .components-popover__content { min-width: 0; width: auto; @@ -7,5 +7,4 @@ padding: $grid-unit; } } - } diff --git a/packages/block-editor/src/components/block-alignment-matrix-toolbar/README.md b/packages/block-editor/src/components/block-alignment-matrix-toolbar/README.md deleted file mode 100644 index d28c9229aadc8e..00000000000000 --- a/packages/block-editor/src/components/block-alignment-matrix-toolbar/README.md +++ /dev/null @@ -1,64 +0,0 @@ -# Alignment Matrix Toolbar - -The alignment matrix toolbar allows users to quickly adjust inner block alignment; this is in contrast to the alignment toolbar that aligns the frame block. - -![Button components](https://i.imgur.com/PxYkgL5.png) - -## Table of contents -- [Alignment Matrix Toolbar](#alignment-matrix-toolbar) - - [Table of contents](#table-of-contents) - - [Design guidelines](#design-guidelines) - - [Usage](#usage) - - [Development guidelines](#development-guidelines) - - [Usage](#usage-1) - - [Props](#props) - -## Design guidelines - -### Usage - -The alignment matrix is a specialized tool, and it's used in the cover block. - -![Cover](https://i.imgur.com/nJjqen8.png) - -As an example, here's the matrix alignment tool in action. - -![center](https://i.imgur.com/0Ce1fZm.png) - - -![rop_right](https://i.imgur.com/yGGf6IP.png) - -## Development guidelines - -### Usage - -```jsx -// This is a paraphrased example from the cover block -import { - BlockControls, - __experimentalBlockAlignmentMatrixToolbar as BlockAlignmentMatrixToolbar -} from "@wordpress/block-editor"; - -const controls = ( - <> - - - setAttributes( { contentPosition: nextPosition } ) - } - /> - - -} -``` - -### Props - - -Name | Type | Default | Description ---- | --- | --- | --- -`label` | `string` | `Change matrix alignment` | concise description of tool's functionality. -`onChange` | `function` | `noop` | the function to execute upon a user's change of the matrix state -`value` | `string` | `center` | describes the content alignment location and can be `top`, `right`, `bottom`, `left`, `topRight`, `bottomRight`, `bottomLeft`, `topLeft` diff --git a/packages/block-editor/src/components/block-controls/index.js b/packages/block-editor/src/components/block-controls/index.js index 297d3839df4aa9..d2f31c78e5759b 100644 --- a/packages/block-editor/src/components/block-controls/index.js +++ b/packages/block-editor/src/components/block-controls/index.js @@ -11,6 +11,7 @@ import { __experimentalToolbarContext as ToolbarContext, createSlotFill, ToolbarGroup, + __experimentalUseSlot as useSlot, } from '@wordpress/components'; /** @@ -18,17 +19,61 @@ import { */ import useDisplayBlockControls from '../use-display-block-controls'; -const { Fill, Slot } = createSlotFill( 'BlockControls' ); +const BlockControlsDefault = createSlotFill( 'BlockControls' ); +const BlockControlsBlock = createSlotFill( 'BlockFormatControlsBlock' ); +const BlockControlsInline = createSlotFill( 'BlockFormatControls' ); +const BlockControlsOther = createSlotFill( 'BlockControlsOther' ); -function BlockControlsSlot( props ) { +const segments = { + default: BlockControlsDefault, + block: BlockControlsBlock, + inline: BlockControlsInline, + other: BlockControlsOther, +}; + +const slotNames = { + default: 'BlockControls', + block: 'BlockFormatControlsBlock', + inline: 'BlockFormatControls', + other: 'BlockControlsOther', +}; + +function BlockControlsSlot( { segment = 'default', ...props } ) { const accessibleToolbarState = useContext( ToolbarContext ); - return ; + const Slot = segments[ segment ].Slot; + const slot = useSlot( slotNames[ segment ] ); + const hasFills = Boolean( slot.fills && slot.fills.length ); + + if ( ! hasFills ) { + return null; + } + + if ( segment === 'default' ) { + return ( + + ); + } + + return ( + + + + ); } -function BlockControlsFill( { controls, children } ) { +function BlockControlsFill( { segment = 'default', controls, children } ) { if ( ! useDisplayBlockControls() ) { return null; } + const Fill = segments[ segment ].Fill; return ( @@ -39,7 +84,9 @@ function BlockControlsFill( { controls, children } ) { const value = ! isEmpty( fillProps ) ? fillProps : null; return ( - + { segment === 'default' && ( + + ) } { children } ); @@ -52,4 +99,12 @@ const BlockControls = BlockControlsFill; BlockControls.Slot = BlockControlsSlot; +// This is just here for backward compatibility +export const BlockFormatControls = ( props ) => { + return ; +}; +BlockFormatControls.Slot = ( props ) => { + return ; +}; + export default BlockControls; diff --git a/packages/block-editor/src/components/block-format-controls/README.md b/packages/block-editor/src/components/block-format-controls/README.md deleted file mode 100644 index 856c5bb5e66824..00000000000000 --- a/packages/block-editor/src/components/block-format-controls/README.md +++ /dev/null @@ -1,29 +0,0 @@ -BlockFormatControls -============ - -`BlockFormatControls` is a slot & fill component that is the basis of all the formats, e.g., bold, italic, link, etc., that appear on the block format toolbar. -Under normal circumstances, the component should not be used directly. When implementing a custom format for the block editor, the API's wp.formatLibrary APIs should be used instead. These API's deal with much of the complexity required for implementing a custom format ( e.g., know which part of the text is selected etc.). `BlockFormatControls` could be considered when there is a need a very custom format with a special UI, and the wp.formatLibrary package does not fit the use-case. - -`BlockFormatControls` does not receive any properties and renders the children passed to it, as fills of the format toolbar slot. -E.g: To add a custom button to the format toolbar one can use the following sample: -```jsx - - - - { ( toggleProps ) => ( - - ) } - - - -``` - -Note that the component does not deal with anything related to applying a format. It just renders the children inside the format toolbar. diff --git a/packages/block-editor/src/components/block-format-controls/index.js b/packages/block-editor/src/components/block-format-controls/index.js deleted file mode 100644 index 73628e3415fc32..00000000000000 --- a/packages/block-editor/src/components/block-format-controls/index.js +++ /dev/null @@ -1,51 +0,0 @@ -/** - * External dependencies - */ -import { isEmpty } from 'lodash'; - -/** - * WordPress dependencies - */ -import { useContext } from '@wordpress/element'; -import { - __experimentalToolbarContext as ToolbarContext, - createSlotFill, -} from '@wordpress/components'; - -/** - * Internal dependencies - */ -import { useBlockEditContext } from '../block-edit/context'; - -const { Fill, Slot } = createSlotFill( 'BlockFormatControls' ); - -function BlockFormatControlsSlot( props ) { - const accessibleToolbarState = useContext( ToolbarContext ); - return ; -} - -function BlockFormatControlsFill( props ) { - const { isSelected } = useBlockEditContext(); - if ( ! isSelected ) { - return null; - } - - return ( - - { ( fillProps ) => { - const value = ! isEmpty( fillProps ) ? fillProps : null; - return ( - - { props.children } - - ); - } } - - ); -} - -const BlockFormatControls = BlockFormatControlsFill; - -BlockFormatControls.Slot = BlockFormatControlsSlot; - -export default BlockFormatControls; diff --git a/packages/block-editor/src/components/block-full-height-alignment-toolbar/README.md b/packages/block-editor/src/components/block-full-height-alignment-control/README.md similarity index 89% rename from packages/block-editor/src/components/block-full-height-alignment-toolbar/README.md rename to packages/block-editor/src/components/block-full-height-alignment-control/README.md index 6febd1fc272f3a..3768bece723134 100644 --- a/packages/block-editor/src/components/block-full-height-alignment-toolbar/README.md +++ b/packages/block-editor/src/components/block-full-height-alignment-control/README.md @@ -1,3 +1,3 @@ -# Full Height Toolbar Toolbar +# Full Height Toolbar Control Unlike the block alignment options, `Full Height Alignment` can be applied to a block in an independent way. But also, it works very well together with these block alignment options, where the combination empowers the design-layout capability. \ No newline at end of file diff --git a/packages/block-editor/src/components/block-full-height-alignment-control/index.js b/packages/block-editor/src/components/block-full-height-alignment-control/index.js new file mode 100644 index 00000000000000..98384414ae4ba4 --- /dev/null +++ b/packages/block-editor/src/components/block-full-height-alignment-control/index.js @@ -0,0 +1,25 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { ToolbarButton } from '@wordpress/components'; +import { fullscreen } from '@wordpress/icons'; + +function BlockFullHeightAlignmentControl( { + isActive, + label = __( 'Toggle full height' ), + onToggle, + isDisabled, +} ) { + return ( + onToggle( ! isActive ) } + disabled={ isDisabled } + /> + ); +} + +export default BlockFullHeightAlignmentControl; diff --git a/packages/block-editor/src/components/block-full-height-alignment-toolbar/index.js b/packages/block-editor/src/components/block-full-height-alignment-toolbar/index.js deleted file mode 100644 index adc213859bd5b3..00000000000000 --- a/packages/block-editor/src/components/block-full-height-alignment-toolbar/index.js +++ /dev/null @@ -1,27 +0,0 @@ -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { ToolbarGroup, ToolbarButton } from '@wordpress/components'; -import { fullscreen } from '@wordpress/icons'; - -function BlockFullHeightAlignmentToolbar( { - isActive, - label = __( 'Toggle full height' ), - onToggle, - isDisabled, -} ) { - return ( - - onToggle( ! isActive ) } - disabled={ isDisabled } - /> - - ); -} - -export default BlockFullHeightAlignmentToolbar; diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js index db07a42a6f56e5..4a8db954ded68c 100644 --- a/packages/block-editor/src/components/block-toolbar/index.js +++ b/packages/block-editor/src/components/block-toolbar/index.js @@ -19,7 +19,6 @@ import BlockMover from '../block-mover'; import BlockParentSelector from '../block-parent-selector'; import BlockSwitcher from '../block-switcher'; import BlockControls from '../block-controls'; -import BlockFormatControls from '../block-format-controls'; import BlockSettingsMenu from '../block-settings-menu'; import { useShowMoversGestures } from './utils'; import { store as blockEditorStore } from '../../store'; @@ -124,12 +123,18 @@ export default function BlockToolbar( { hideDragHandle } ) { { shouldShowVisualToolbar && ( <> + { ' ' } - + + diff --git a/packages/block-editor/src/components/block-toolbar/index.native.js b/packages/block-editor/src/components/block-toolbar/index.native.js index 5e8848e3ff4ffa..cc8eccc69467d5 100644 --- a/packages/block-editor/src/components/block-toolbar/index.native.js +++ b/packages/block-editor/src/components/block-toolbar/index.native.js @@ -7,7 +7,6 @@ import { useSelect } from '@wordpress/data'; * Internal dependencies */ import BlockControls from '../block-controls'; -import BlockFormatControls from '../block-format-controls'; import UngroupButton from '../ungroup-button'; import { store as blockEditorStore } from '../../store'; @@ -42,8 +41,10 @@ export default function BlockToolbar() { { mode === 'visual' && isValid && ( <> + - + + ) } diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 16977e34af4976..1c0c30d1cd83cc 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -11,14 +11,14 @@ export { BlockAlignmentControl, BlockAlignmentToolbar, } from './block-alignment-control'; -export { default as __experimentalBlockFullHeightAligmentToolbar } from './block-full-height-alignment-toolbar'; -export { default as __experimentalBlockAlignmentMatrixToolbar } from './block-alignment-matrix-toolbar'; +export { default as __experimentalBlockFullHeightAligmentControl } from './block-full-height-alignment-control'; +export { default as __experimentalBlockAlignmentMatrixControl } from './block-alignment-matrix-control'; export { default as BlockBreadcrumb } from './block-breadcrumb'; export { BlockContextProvider } from './block-context'; export { default as BlockControls } from './block-controls'; export { default as BlockColorsStyleSelector } from './color-style-selector'; export { default as BlockEdit, useBlockEditContext } from './block-edit'; -export { default as BlockFormatControls } from './block-format-controls'; +export { default as BlockFormatControls } from './block-controls'; export { default as BlockIcon } from './block-icon'; export { default as BlockNavigationDropdown } from './block-navigation/dropdown'; export { BlockNavigationBlockFill as __experimentalBlockNavigationBlockFill } from './block-navigation/block-slot'; diff --git a/packages/block-editor/src/components/index.native.js b/packages/block-editor/src/components/index.native.js index 3fbd2e0fc752fe..e98557d5f5ad0d 100644 --- a/packages/block-editor/src/components/index.native.js +++ b/packages/block-editor/src/components/index.native.js @@ -3,7 +3,7 @@ export { BlockAlignmentToolbar } from './block-alignment-control'; export { BlockContextProvider } from './block-context'; export { default as BlockControls } from './block-controls'; export { default as BlockEdit, useBlockEditContext } from './block-edit'; -export { default as BlockFormatControls } from './block-format-controls'; +export { default as BlockFormatControls } from './block-controls'; export { default as BlockIcon } from './block-icon'; export { default as BlockVerticalAlignmentToolbar } from './block-vertical-alignment-toolbar'; export * from './colors'; diff --git a/packages/block-editor/src/components/rich-text/format-toolbar-container.js b/packages/block-editor/src/components/rich-text/format-toolbar-container.js index 0d8c88f0761b86..d91d8f5c0e340b 100644 --- a/packages/block-editor/src/components/rich-text/format-toolbar-container.js +++ b/packages/block-editor/src/components/rich-text/format-toolbar-container.js @@ -6,7 +6,7 @@ import { Popover } from '@wordpress/components'; /** * Internal dependencies */ -import BlockFormatControls from '../block-format-controls'; +import BlockControls from '../block-controls'; import FormatToolbar from './format-toolbar'; const FormatToolbarContainer = ( { inline, anchorRef } ) => { @@ -27,9 +27,9 @@ const FormatToolbarContainer = ( { inline, anchorRef } ) => { } // Render regular toolbar return ( - + - + ); }; diff --git a/packages/block-editor/src/components/rich-text/format-toolbar-container.native.js b/packages/block-editor/src/components/rich-text/format-toolbar-container.native.js index d37fe5bfee0f68..6d7ef3c7c2ff94 100644 --- a/packages/block-editor/src/components/rich-text/format-toolbar-container.native.js +++ b/packages/block-editor/src/components/rich-text/format-toolbar-container.native.js @@ -1,15 +1,15 @@ /** * Internal dependencies */ -import BlockFormatControls from '../block-format-controls'; +import BlockControls from '../block-controls'; import FormatToolbar from './format-toolbar'; const FormatToolbarContainer = () => { // Render regular toolbar return ( - + - + ); }; diff --git a/packages/block-editor/src/hooks/align.js b/packages/block-editor/src/hooks/align.js index 41987c43a6fe75..96982f7edd1753 100644 --- a/packages/block-editor/src/hooks/align.js +++ b/packages/block-editor/src/hooks/align.js @@ -19,7 +19,7 @@ import { useSelect } from '@wordpress/data'; /** * Internal dependencies */ -import { BlockControls, BlockAlignmentToolbar } from '../components'; +import { BlockControls, BlockAlignmentControl } from '../components'; import { store as blockEditorStore } from '../store'; /** @@ -138,8 +138,8 @@ export const withToolbarControls = createHigherOrderComponent( return [ validAlignments.length > 0 && props.isSelected && ( - - + - - + @@ -379,11 +379,13 @@ function CoverEdit( { } isDisabled={ ! hasBackground } /> - + +