diff --git a/packages/block-editor/src/components/block-alignment-toolbar/index.js b/packages/block-editor/src/components/block-alignment-toolbar/index.js
index 2e4ac8ea7556d..b47f0642d2e3e 100644
--- a/packages/block-editor/src/components/block-alignment-toolbar/index.js
+++ b/packages/block-editor/src/components/block-alignment-toolbar/index.js
@@ -3,8 +3,7 @@
*/
import { __ } from '@wordpress/i18n';
import { ToolbarGroup } from '@wordpress/components';
-import { withSelect } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
import {
positionCenter,
positionLeft,
@@ -13,6 +12,11 @@ import {
stretchWide,
} from '@wordpress/icons';
+/**
+ * Internal dependencies
+ */
+import { useLayout } from '../inner-blocks/layout';
+
const BLOCK_ALIGNMENTS_CONTROLS = {
left: {
icon: positionLeft,
@@ -49,18 +53,36 @@ export function BlockAlignmentToolbar( {
onChange,
controls = DEFAULT_CONTROLS,
isCollapsed = true,
- wideControlsEnabled = false,
} ) {
+ const { wideControlsEnabled = false } = useSelect( ( select ) => {
+ const { getSettings } = select( 'core/block-editor' );
+ const settings = getSettings();
+ return {
+ wideControlsEnabled: settings.alignWide,
+ };
+ } );
+ const layout = useLayout();
+ const supportsAlignments = layout.type === 'default';
+
+ if ( ! supportsAlignments ) {
+ return null;
+ }
+
+ const { alignments: availableAlignments = DEFAULT_CONTROLS } = layout;
+ const enabledControls = controls.filter(
+ ( control ) =>
+ ( wideControlsEnabled || WIDE_CONTROLS.includes( control ) ) &&
+ availableAlignments.includes( control )
+ );
+
+ if ( enabledControls.length === 0 ) {
+ return null;
+ }
+
function applyOrUnset( align ) {
return () => onChange( value === align ? undefined : align );
}
- const enabledControls = wideControlsEnabled
- ? controls
- : controls.filter(
- ( control ) => WIDE_CONTROLS.indexOf( control ) === -1
- );
-
const activeAlignmentControl = BLOCK_ALIGNMENTS_CONTROLS[ value ];
const defaultAlignmentControl =
BLOCK_ALIGNMENTS_CONTROLS[ DEFAULT_CONTROL ];
@@ -87,12 +109,4 @@ export function BlockAlignmentToolbar( {
);
}
-export default compose(
- withSelect( ( select ) => {
- const { getSettings } = select( 'core/block-editor' );
- const settings = getSettings();
- return {
- wideControlsEnabled: settings.alignWide,
- };
- } )
-)( BlockAlignmentToolbar );
+export default BlockAlignmentToolbar;
diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js
index 18a38801eb740..3f0df33961dcc 100644
--- a/packages/block-editor/src/components/inner-blocks/index.js
+++ b/packages/block-editor/src/components/inner-blocks/index.js
@@ -27,6 +27,7 @@ import { BlockListItems } from '../block-list';
import { BlockContextProvider } from '../block-context';
import { useBlockEditContext } from '../block-edit/context';
import useBlockSync from '../provider/use-block-sync';
+import { defaultLayout, LayoutProvider } from './layout';
/**
* InnerBlocks is a component which allows a single block to have multiple blocks
@@ -49,6 +50,7 @@ function UncontrolledInnerBlocks( props ) {
renderAppender,
orientation,
placeholder,
+ __experimentalLayout: layout = defaultLayout,
} = props;
useNestedSettingsUpdate(
@@ -83,15 +85,19 @@ function UncontrolledInnerBlocks( props ) {
// This component needs to always be synchronous as it's the one changing
// the async mode depending on the block selection.
return (
-
-
-
+
+
+
+
+
);
}
diff --git a/packages/block-editor/src/components/inner-blocks/layout.js b/packages/block-editor/src/components/inner-blocks/layout.js
new file mode 100644
index 0000000000000..745b59945ea61
--- /dev/null
+++ b/packages/block-editor/src/components/inner-blocks/layout.js
@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext, useContext } from '@wordpress/element';
+
+export const defaultLayout = { type: 'default' };
+
+const Layout = createContext( defaultLayout );
+
+/**
+ * Allows to define the layout.
+ */
+export const LayoutProvider = Layout.Provider;
+
+/**
+ * React hook used to retrieve the layout config.
+ */
+export function useLayout() {
+ return useContext( Layout );
+}
diff --git a/packages/block-editor/src/hooks/align.js b/packages/block-editor/src/hooks/align.js
index f5f82c4d754c4..67b8e80367333 100644
--- a/packages/block-editor/src/hooks/align.js
+++ b/packages/block-editor/src/hooks/align.js
@@ -7,7 +7,6 @@ import { has, without } from 'lodash';
/**
* WordPress dependencies
*/
-import { createContext, useContext } from '@wordpress/element';
import { createHigherOrderComponent } from '@wordpress/compose';
import { addFilter } from '@wordpress/hooks';
import {
@@ -106,13 +105,6 @@ export function addAttribute( settings ) {
return settings;
}
-const AlignmentHookSettings = createContext( {} );
-
-/**
- * Allows to pass additional settings to the alignment hook.
- */
-export const AlignmentHookSettingsProvider = AlignmentHookSettings.Provider;
-
/**
* Override the default edit UI to include new toolbar controls for block
* alignment, if block defines support.
@@ -122,17 +114,15 @@ export const AlignmentHookSettingsProvider = AlignmentHookSettings.Provider;
*/
export const withToolbarControls = createHigherOrderComponent(
( BlockEdit ) => ( props ) => {
- const { isEmbedButton } = useContext( AlignmentHookSettings );
const { name: blockName } = props;
// Compute valid alignments without taking into account,
- // if the theme supports wide alignments or not.
- // BlockAlignmentToolbar takes into account the theme support.
- const validAlignments = isEmbedButton
- ? []
- : getValidAlignments(
- getBlockSupport( blockName, 'align' ),
- hasBlockSupport( blockName, 'alignWide', true )
- );
+ // if the theme supports wide alignments or not
+ // and without checking the layout for availble alignments.
+ // BlockAlignmentToolbar takes both of these into account.
+ const validAlignments = getValidAlignments(
+ getBlockSupport( blockName, 'align' ),
+ hasBlockSupport( blockName, 'alignWide', true )
+ );
const updateAlignment = ( nextAlign ) => {
if ( ! nextAlign ) {
diff --git a/packages/block-editor/src/hooks/align.native.js b/packages/block-editor/src/hooks/align.native.js
index 8fb3f6e2be93c..2eaa4bc747b29 100644
--- a/packages/block-editor/src/hooks/align.native.js
+++ b/packages/block-editor/src/hooks/align.native.js
@@ -12,8 +12,6 @@ import { WIDE_ALIGNMENTS } from '@wordpress/components';
const ALIGNMENTS = [ 'left', 'center', 'right' ];
-export { AlignmentHookSettingsProvider } from './align.js';
-
// Used to filter out blocks that don't support wide/full alignment on mobile
addFilter(
'blocks.registerBlockType',
diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js
index 5d9b2f5393a8d..6aa2b76fc1d1f 100644
--- a/packages/block-editor/src/hooks/index.js
+++ b/packages/block-editor/src/hooks/index.js
@@ -1,12 +1,10 @@
/**
* Internal dependencies
*/
-import { AlignmentHookSettingsProvider } from './align';
+import './align';
import './anchor';
import './custom-class-name';
import './generated-class-name';
import './style';
import './color';
import './font-size';
-
-export { AlignmentHookSettingsProvider };
diff --git a/packages/block-editor/src/hooks/index.native.js b/packages/block-editor/src/hooks/index.native.js
index 5d9b2f5393a8d..6aa2b76fc1d1f 100644
--- a/packages/block-editor/src/hooks/index.native.js
+++ b/packages/block-editor/src/hooks/index.native.js
@@ -1,12 +1,10 @@
/**
* Internal dependencies
*/
-import { AlignmentHookSettingsProvider } from './align';
+import './align';
import './anchor';
import './custom-class-name';
import './generated-class-name';
import './style';
import './color';
import './font-size';
-
-export { AlignmentHookSettingsProvider };
diff --git a/packages/block-editor/src/index.js b/packages/block-editor/src/index.js
index add6f5a5f9910..037b0f8fad5f1 100644
--- a/packages/block-editor/src/index.js
+++ b/packages/block-editor/src/index.js
@@ -10,8 +10,7 @@ import '@wordpress/notices';
/**
* Internal dependencies
*/
-import { AlignmentHookSettingsProvider as __experimentalAlignmentHookSettingsProvider } from './hooks';
-export { __experimentalAlignmentHookSettingsProvider };
+import './hooks';
export * from './components';
export * from './utils';
export { storeConfig } from './store';
diff --git a/packages/block-library/src/buttons/edit.js b/packages/block-library/src/buttons/edit.js
index 6cc9d69f8efb1..5e1abc01582a0 100644
--- a/packages/block-library/src/buttons/edit.js
+++ b/packages/block-library/src/buttons/edit.js
@@ -2,7 +2,6 @@
* WordPress dependencies
*/
import {
- __experimentalAlignmentHookSettingsProvider as AlignmentHookSettingsProvider,
__experimentalUseInnerBlocksProps as useInnerBlocksProps,
useBlockProps,
} from '@wordpress/block-editor';
@@ -15,23 +14,18 @@ import { name as buttonBlockName } from '../button/';
const ALLOWED_BLOCKS = [ buttonBlockName ];
const BUTTONS_TEMPLATE = [ [ 'core/button' ] ];
-// Inside buttons block alignment options are not supported.
-const alignmentHooksSetting = {
- isEmbedButton: true,
-};
-
function ButtonsEdit() {
const blockProps = useBlockProps();
const innerBlocksProps = useInnerBlocksProps( blockProps, {
allowedBlocks: ALLOWED_BLOCKS,
template: BUTTONS_TEMPLATE,
orientation: 'horizontal',
+ __experimentalLayout: {
+ type: 'default',
+ alignments: [],
+ },
} );
- return (
-
-
-
- );
+ return
;
}
export default ButtonsEdit;
diff --git a/packages/block-library/src/buttons/edit.native.js b/packages/block-library/src/buttons/edit.native.js
index 307a8b19634aa..7c35a762935c9 100644
--- a/packages/block-library/src/buttons/edit.native.js
+++ b/packages/block-library/src/buttons/edit.native.js
@@ -7,10 +7,7 @@ import { View } from 'react-native';
/**
* WordPress dependencies
*/
-import {
- __experimentalAlignmentHookSettingsProvider as AlignmentHookSettingsProvider,
- InnerBlocks,
-} from '@wordpress/block-editor';
+import { InnerBlocks } from '@wordpress/block-editor';
import { createBlock } from '@wordpress/blocks';
import { useResizeObserver } from '@wordpress/compose';
import { useDispatch, useSelect } from '@wordpress/data';
@@ -97,15 +94,10 @@ export default function ButtonsEdit( {
) );
- // Inside buttons block alignment options are not supported.
- const alignmentHooksSetting = {
- isEmbedButton: true,
- };
-
const shouldRenderFooterAppender = isSelected || isInnerButtonSelected;
return (
-
+ <>
{ resizeObserver }
-
+ >
);
}