diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index d7df54ea3c614c..69b5810b0f1062 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -84,22 +84,6 @@ function useLayoutClasses( layout, layoutDefinitions ) { return layoutClassnames; } -/** - * Determines whether or not the theme has disabled all layout styles output. - * - * This feature only disables the output of layout styles, - * the controls for adjusting layout will still be available in the editor. - * Themes that use this feature commit to providing their own styling for layout features. - * - * @return {boolean} Whether or not the theme opts-in to disable all layout styles. - */ -function useThemeHasDisabledLayoutStyles() { - return useSelect( ( select ) => { - const { getSettings } = select( blockEditorStore ); - return !! getSettings().disableLayoutStyles; - } ); -} - function LayoutPanel( { setAttributes, attributes, name: blockName } ) { const { layout } = attributes; const defaultThemeLayout = useSetting( 'layout' ); @@ -284,8 +268,12 @@ export const withLayoutStyles = createHigherOrderComponent( name, layoutBlockSupportKey ); + const disableLayoutStyles = useSelect( ( select ) => { + const { getSettings } = select( blockEditorStore ); + return !! getSettings().disableLayoutStyles; + } ); const shouldRenderLayoutStyles = - hasLayoutBlockSupport && ! useThemeHasDisabledLayoutStyles(); + hasLayoutBlockSupport && ! disableLayoutStyles; const id = useInstanceId( BlockListBlock ); const defaultThemeLayout = useSetting( 'layout' ) || {}; const element = useContext( BlockList.__unstableElementContext ); diff --git a/packages/edit-site/src/components/global-styles/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/use-global-styles-output.js index 0ffbda42b5218a..a50cd0d29b096c 100644 --- a/packages/edit-site/src/components/global-styles/use-global-styles-output.js +++ b/packages/edit-site/src/components/global-styles/use-global-styles-output.js @@ -539,7 +539,7 @@ export const toStyles = ( blockSelectors, hasBlockGapSupport, hasFallbackGapSupport, - skipLayoutStyles = false + disableLayoutStyles = false ) => { const nodesWithStyles = getNodesWithStyles( tree, blockSelectors ); const nodesWithSettings = getNodesWithSettings( tree, blockSelectors ); @@ -616,7 +616,7 @@ export const toStyles = ( // Process blockGap and layout styles. if ( - ! skipLayoutStyles && + ! disableLayoutStyles && ( ROOT_BLOCK_SELECTOR === selector || hasLayoutSupport ) ) { ruleset += getLayoutStyles( { @@ -767,22 +767,6 @@ export const getBlockSelectors = ( blockTypes ) => { return result; }; -/** - * Determines whether or not the theme has disabled all layout styles output. - * - * This feature only disables the output of layout styles, - * the controls for adjusting layout will still be available in the editor. - * Themes that use this feature commit to providing their own styling for layout features. - * - * @return {boolean} Whether or not the theme opts-in to disable all layout styles. - */ -function useThemeHasDisabledLayoutStyles() { - return useSelect( ( select ) => { - const { getSettings } = select( blockEditorStore ); - return !! getSettings().disableLayoutStyles; - } ); -} - export function useGlobalStylesOutput() { const [ stylesheets, setStylesheets ] = useState( [] ); const [ settings, setSettings ] = useState( {} ); @@ -791,7 +775,10 @@ export function useGlobalStylesOutput() { const [ blockGap ] = useSetting( 'spacing.blockGap' ); const hasBlockGapSupport = blockGap !== null; const hasFallbackGapSupport = ! hasBlockGapSupport; // This setting isn't useful yet: it exists as a placeholder for a future explicit fallback styles support. - const skipLayoutStyles = useThemeHasDisabledLayoutStyles(); + const disableLayoutStyles = useSelect( ( select ) => { + const { getSettings } = select( blockEditorStore ); + return !! getSettings().disableLayoutStyles; + } ); useEffect( () => { if ( ! mergedConfig?.styles || ! mergedConfig?.settings ) { @@ -808,7 +795,7 @@ export function useGlobalStylesOutput() { blockSelectors, hasBlockGapSupport, hasFallbackGapSupport, - skipLayoutStyles + disableLayoutStyles ); const filters = toSvgFilters( mergedConfig, blockSelectors ); setStylesheets( [ @@ -827,7 +814,7 @@ export function useGlobalStylesOutput() { hasBlockGapSupport, hasFallbackGapSupport, mergedConfig, - skipLayoutStyles, + disableLayoutStyles, ] ); return [ stylesheets, settings, svgFilters, hasBlockGapSupport ];