diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index b26ed9df659c2..6857e10384ec6 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -45,6 +45,7 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support if ( 'default' === $layout_type ) { $content_size = isset( $layout['contentSize'] ) ? $layout['contentSize'] : ''; $wide_size = isset( $layout['wideSize'] ) ? $layout['wideSize'] : ''; + $inherit = isset( $layout['inherit'] ) ? $layout['inherit'] : ''; $all_max_width_value = $content_size ? $content_size : $wide_size; $wide_max_width_value = $wide_size ? $wide_size : $content_size; @@ -62,25 +63,24 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support $style .= '}'; $style .= "$selector > .alignwide { max-width: " . esc_html( $wide_max_width_value ) . ';}'; - $style .= "$selector .alignfull { max-width: none; }"; - - if ( isset( $block_spacing ) ) { - $block_spacing_values = gutenberg_style_engine_get_block_supports_styles( - array( - 'spacing' => $block_spacing, - ) - ); - - // Handle negative margins for alignfull children of blocks with custom padding set. - // They're added separately because padding might only be set on one side. - if ( isset( $block_spacing_values['declarations']['padding-right'] ) ) { - $padding_right = $block_spacing_values['declarations']['padding-right']; - $style .= "$selector > .alignfull { margin-right:calc($padding_right * -1); }"; - } - if ( isset( $block_spacing_values['declarations']['padding-left'] ) ) { - $padding_left = $block_spacing_values['declarations']['padding-left']; - $style .= "$selector > .alignfull { margin-left: calc($padding_left * -1); }"; - } + } + + if ( ( $content_size || $wide_size || $inherit ) && isset( $block_spacing ) ) { + $block_spacing_values = gutenberg_style_engine_get_block_supports_styles( + array( + 'spacing' => $block_spacing, + ) + ); + + // Handle negative margins for alignfull children of blocks with custom padding set. + // They're added separately because padding might only be set on one side. + if ( isset( $block_spacing_values['declarations']['padding-right'] ) ) { + $padding_right = $block_spacing_values['declarations']['padding-right']; + $style .= "$selector > .alignfull { margin-right:calc($padding_right * -1); }"; + } + if ( isset( $block_spacing_values['declarations']['padding-left'] ) ) { + $padding_left = $block_spacing_values['declarations']['padding-left']; + $style .= "$selector > .alignfull { margin-left: calc($padding_left * -1); }"; } } @@ -181,19 +181,22 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) { $has_block_gap_support = isset( $block_gap ) ? null !== $block_gap : false; $default_block_layout = _wp_array_get( $block_type->supports, array( '__experimentalLayout', 'default' ), array() ); $used_layout = isset( $block['attrs']['layout'] ) ? $block['attrs']['layout'] : $default_block_layout; + $class_names = array(); + $layout_definitions = _wp_array_get( $global_layout_settings, array( 'definitions' ), array() ); + $block_classname = wp_get_block_default_classname( $block['blockName'] ); + $container_class = wp_unique_id( 'wp-container-' ); + $layout_classname = ''; + $use_global_padding = gutenberg_get_global_settings( array( 'useRootPaddingAwareAlignments' ) ) && ( isset( $used_layout['inherit'] ) && $used_layout['inherit'] || isset( $used_layout['contentSize'] ) && $used_layout['contentSize'] ); + if ( isset( $used_layout['inherit'] ) && $used_layout['inherit'] ) { if ( ! $global_layout_settings ) { return $block_content; } - $used_layout = $global_layout_settings; - } - $class_names = array(); - $layout_definitions = _wp_array_get( $global_layout_settings, array( 'definitions' ), array() ); - $block_classname = wp_get_block_default_classname( $block['blockName'] ); - $container_class = wp_unique_id( 'wp-container-' ); - $layout_classname = ''; - $use_global_padding = gutenberg_get_global_settings( array( 'useRootPaddingAwareAlignments' ) ) && ( isset( $used_layout['inherit'] ) && $used_layout['inherit'] || isset( $used_layout['contentSize'] ) && $used_layout['contentSize'] ); + if ( isset( $global_layout_settings['contentSize'] ) && $global_layout_settings['contentSize'] || isset( $global_layout_settings['wideSize'] ) && $global_layout_settings['wideSize'] ) { + $class_names[] = 'has-global-content-size'; + } + } if ( $use_global_padding ) { $class_names[] = 'has-global-padding'; diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php index ac2f983721aa7..1b5b0ccfeb0ab 100644 --- a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php +++ b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php @@ -736,16 +736,31 @@ function( $pseudo_selector ) use ( $selector ) { } } - /* - * Reset default browser margin on the root body element. - * This is set on the root selector **before** generating the ruleset - * from the `theme.json`. This is to ensure that if the `theme.json` declares - * `margin` in its `spacing` declaration for the `body` element then these - * user-generated values take precedence in the CSS cascade. - * @link https://github.com/WordPress/gutenberg/issues/36147. - */ if ( static::ROOT_BLOCK_SELECTOR === $selector ) { - $block_rules .= 'body { margin: 0; }'; + /* + * Reset default browser margin on the root body element. + * This is set on the root selector **before** generating the ruleset + * from the `theme.json`. This is to ensure that if the `theme.json` declares + * `margin` in its `spacing` declaration for the `body` element then these + * user-generated values take precedence in the CSS cascade. + * @link https://github.com/WordPress/gutenberg/issues/36147. + */ + $block_rules .= 'body { margin: 0;'; + + /* + * If there are content and wide widths in theme.json, output them + * as custom properties on the body element so all blocks can use them. + */ + if ( isset( $settings['layout']['contentSize'] ) && $settings['layout']['contentSize'] || isset( $settings['layout']['wideSize'] ) && $settings['layout']['wideSize'] ) { + $content_size = isset( $settings['layout']['contentSize'] ) ? $settings['layout']['contentSize'] : $settings['layout']['wideSize']; + $content_size = static::is_safe_css_declaration( 'max-width', $content_size ) ? $content_size : 'initial'; + $wide_size = isset( $settings['layout']['wideSize'] ) ? $settings['layout']['wideSize'] : $settings['layout']['contentSize']; + $wide_size = static::is_safe_css_declaration( 'max-width', $wide_size ) ? $wide_size : 'initial'; + $block_rules .= '--wp--style--global--content-size: ' . $content_size . ';'; + $block_rules .= '--wp--style--global--wide-size: ' . $wide_size . ';'; + } + + $block_rules .= '}'; } // 2. Generate and append the rules that use the general selector. @@ -1264,7 +1279,7 @@ protected function get_layout_styles( $block_metadata ) { $has_fallback_gap_support = ! $has_block_gap_support; // This setting isn't useful yet: it exists as a placeholder for a future explicit fallback gap styles support. $node = _wp_array_get( $this->theme_json, $block_metadata['path'], array() ); $layout_definitions = _wp_array_get( $this->theme_json, array( 'settings', 'layout', 'definitions' ), array() ); - $layout_selector_pattern = '/^[a-zA-Z0-9\-\.\ *+>]*$/'; // Allow alphanumeric classnames, spaces, wildcard, sibling, and child combinator selectors. + $layout_selector_pattern = '/^[a-zA-Z0-9\-\.\ *+>:\(\)]*$/'; // Allow alphanumeric classnames, spaces, wildcard, sibling, child combinator and pseudo class selectors. // Gap styles will only be output if the theme has block gap support, or supports a fallback gap. // Default layout gap styles will be skipped for themes that do not explicitly opt-in to blockGap with a `true` or `false` value. diff --git a/lib/compat/wordpress-6.1/theme.json b/lib/compat/wordpress-6.1/theme.json index d817f33653612..4a3f4c7137588 100644 --- a/lib/compat/wordpress-6.1/theme.json +++ b/lib/compat/wordpress-6.1/theme.json @@ -215,6 +215,20 @@ "margin-left": "auto !important", "margin-right": "auto !important" } + }, + { + "selector": ":where(.has-global-content-size) > :where(:not(.alignleft):not(.alignright):not(.alignfull))", + "rules": { + "max-width": "var(--wp--style--global--content-size)", + "margin-left": "auto !important", + "margin-right": "auto !important" + } + }, + { + "selector": ":where(.has-global-content-size) > .alignwide", + "rules": { + "max-width": "var(--wp--style--global--wide-size)" + } } ], "spacingStyles": [ diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index 4db7ac3b6ef05..b20ded0d6e161 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -62,6 +62,9 @@ function useLayoutClasses( layout, layoutDefinitions ) { layoutDefinitions?.[ layout?.type || 'default' ]?.className ); } + if ( layout?.inherit ) { + layoutClassnames.push( 'has-global-content-size' ); + } if ( ( layout?.inherit || layout?.contentSize ) && rootPaddingAlignment ) { layoutClassnames.push( 'has-global-padding' ); @@ -275,7 +278,7 @@ export const withLayoutStyles = createHigherOrderComponent( const { default: defaultBlockLayout } = getBlockSupport( name, layoutBlockSupportKey ) || {}; const usedLayout = layout?.inherit - ? defaultThemeLayout + ? { ...defaultThemeLayout, ...layout } : layout || defaultBlockLayout || {}; const layoutClasses = shouldRenderLayoutStyles ? useLayoutClasses( usedLayout, defaultThemeLayout?.definitions ) diff --git a/packages/block-editor/src/layouts/flow.js b/packages/block-editor/src/layouts/flow.js index f0e084d623b17..1e17052ae2628 100644 --- a/packages/block-editor/src/layouts/flow.js +++ b/packages/block-editor/src/layouts/flow.js @@ -116,7 +116,7 @@ export default { hasBlockGapSupport, layoutDefinitions, } ) { - const { contentSize, wideSize } = layout; + const { contentSize, wideSize, inherit = false } = layout; const blockGapStyleValue = getGapBoxControlValueFromStyle( style?.spacing?.blockGap ); @@ -129,7 +129,7 @@ export default { : ''; let output = - !! contentSize || !! wideSize + ( !! contentSize || !! wideSize ) && ! inherit ? ` ${ appendSelectors( selector, @@ -142,9 +142,6 @@ export default { ${ appendSelectors( selector, '> .alignwide' ) } { max-width: ${ wideSize ?? contentSize }; } - ${ appendSelectors( selector, '> .alignfull' ) } { - max-width: none; - } ` : '';