diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index 925b10ed99589..5381de6bc0708 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -118,15 +118,21 @@ export default function VisualEditor( { styles } ) { ( select ) => select( editPostStore ).hasMetaBoxes(), [] ); - const { themeHasDisabledLayoutStyles, themeSupportsLayout, assets } = - useSelect( ( select ) => { - const _settings = select( blockEditorStore ).getSettings(); - return { - themeHasDisabledLayoutStyles: _settings.disableLayoutStyles, - themeSupportsLayout: _settings.supportsLayout, - assets: _settings.__unstableResolvedAssets, - }; - }, [] ); + const { + themeHasDisabledLayoutStyles, + themeSupportsLayout, + assets, + useRootPaddingAwareAlignments, + } = useSelect( ( select ) => { + const _settings = select( blockEditorStore ).getSettings(); + return { + themeHasDisabledLayoutStyles: _settings.disableLayoutStyles, + themeSupportsLayout: _settings.supportsLayout, + assets: _settings.__unstableResolvedAssets, + useRootPaddingAwareAlignments: + _settings.__experimentalFeatures?.useRootPaddingAwareAlignments, + }; + }, [] ); const { clearSelectedBlock } = useDispatch( blockEditorStore ); const { setIsEditingTemplate } = useDispatch( editPostStore ); const desktopCanvasStyles = { @@ -189,9 +195,11 @@ export default function VisualEditor( { styles } ) { return { type: 'default' }; }, [ isTemplateMode, themeSupportsLayout, defaultLayout ] ); - const blockListLayoutClass = themeSupportsLayout - ? 'is-layout-constrained' - : 'is-layout-flow'; + const blockListLayoutClass = classnames( { + 'is-layout-constrained': themeSupportsLayout, + 'is-layout-flow': ! themeSupportsLayout, + 'has-global-padding': useRootPaddingAwareAlignments, + } ); const titleRef = useRef(); useEffect( () => {