diff --git a/packages/block-editor/src/components/block-alignment-control/use-available-alignments.js b/packages/block-editor/src/components/block-alignment-control/use-available-alignments.js index ab6213b4389282..d77eb2af2a5976 100644 --- a/packages/block-editor/src/components/block-alignment-control/use-available-alignments.js +++ b/packages/block-editor/src/components/block-alignment-control/use-available-alignments.js @@ -19,20 +19,25 @@ export default function useAvailableAlignments( controls = DEFAULT_CONTROLS ) { if ( ! controls.includes( 'none' ) ) { controls = [ 'none', ...controls ]; } - const { wideControlsEnabled = false, themeSupportsLayout } = useSelect( - ( select ) => { - const { getSettings } = select( blockEditorStore ); - const settings = getSettings(); - return { - wideControlsEnabled: settings.alignWide, - themeSupportsLayout: settings.supportsLayout, - }; - }, - [] - ); + const { + wideControlsEnabled = false, + themeSupportsLayout, + isBlockBasedTheme, + } = useSelect( ( select ) => { + const { getSettings } = select( blockEditorStore ); + const settings = getSettings(); + return { + wideControlsEnabled: settings.alignWide, + themeSupportsLayout: settings.supportsLayout, + isBlockBasedTheme: settings.__unstableIsBlockBasedTheme, + }; + }, [] ); const layout = useLayout(); const layoutType = getLayoutType( layout?.type ); - const layoutAlignments = layoutType.getAlignments( layout ); + const layoutAlignments = layoutType.getAlignments( + layout, + isBlockBasedTheme + ); if ( themeSupportsLayout ) { const alignments = layoutAlignments.filter( diff --git a/packages/block-editor/src/layouts/flow.js b/packages/block-editor/src/layouts/flow.js index 9367d5b91508a7..d064edce65fedc 100644 --- a/packages/block-editor/src/layouts/flow.js +++ b/packages/block-editor/src/layouts/flow.js @@ -56,7 +56,7 @@ export default { getOrientation() { return 'vertical'; }, - getAlignments( layout ) { + getAlignments( layout, isBlockBasedTheme ) { const alignmentInfo = getAlignmentsInfo( layout ); if ( layout.alignments !== undefined ) { if ( ! layout.alignments.includes( 'none' ) ) { @@ -74,6 +74,21 @@ export default { { name: 'right' }, ]; + // This is for backwards compatibility with hybrid themes. + if ( ! isBlockBasedTheme ) { + const { contentSize, wideSize } = layout; + if ( contentSize ) { + alignments.unshift( { name: 'full' } ); + } + + if ( wideSize ) { + alignments.unshift( { + name: 'wide', + info: alignmentInfo.wide, + } ); + } + } + alignments.unshift( { name: 'none', info: alignmentInfo.none } ); return alignments; diff --git a/packages/editor/src/components/provider/use-block-editor-settings.js b/packages/editor/src/components/provider/use-block-editor-settings.js index 8b9d9e5ba86d77..4c5c431e5915f1 100644 --- a/packages/editor/src/components/provider/use-block-editor-settings.js +++ b/packages/editor/src/components/provider/use-block-editor-settings.js @@ -73,6 +73,7 @@ const BLOCK_EDITOR_SETTINGS = [ '__unstableHasCustomAppender', '__unstableIsPreviewMode', '__unstableResolvedAssets', + '__unstableIsBlockBasedTheme', ]; /**