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 }
/>
-
+
+