From fcfce1523c323597a2ceafb83945066964595389 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 25 Jul 2022 16:16:32 +1000 Subject: [PATCH 1/4] Add inherit content size to base styles --- lib/block-supports/layout.php | 61 +++++++++++-------- .../wordpress-6.1/class-wp-theme-json-6-1.php | 33 +++++++--- lib/compat/wordpress-6.1/theme.json | 14 +++++ packages/block-editor/src/hooks/layout.js | 6 +- packages/block-editor/src/layouts/flow.js | 7 +-- 5 files changed, 78 insertions(+), 43 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index b26ed9df659c28..8ecf3186cbfc7b 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,26 @@ 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'] ) { + $class_names[] = 'has-global-content-size'; + } + + if ( isset( $global_layout_settings['wideSize'] ) && $global_layout_settings['wideSize'] ) { + $class_names[] = 'has-global-wide-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 ac2f983721aa74..3b01a8e8066a3d 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,29 @@ 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'] ) { + $block_rules .= '--wp--style--global--content-size: ' . $settings['layout']['contentSize'] . ';'; + } + if ( isset( $settings['layout']['wideSize'] ) && $settings['layout']['wideSize'] ) { + $block_rules .= '--wp--style--global--wide-size: ' . $settings['layout']['wideSize'] . ';'; + } + + $block_rules .= '}'; } // 2. Generate and append the rules that use the general selector. @@ -1264,7 +1277,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 d817f336536121..77aabf9e668689 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-wide-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 4db7ac3b6ef05f..3e3c583b542865 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -62,6 +62,10 @@ function useLayoutClasses( layout, layoutDefinitions ) { layoutDefinitions?.[ layout?.type || 'default' ]?.className ); } + if ( layout?.inherit ) { + layoutClassnames.push( 'has-global-content-size' ); + layoutClassnames.push( 'has-global-wide-size' ); + } if ( ( layout?.inherit || layout?.contentSize ) && rootPaddingAlignment ) { layoutClassnames.push( 'has-global-padding' ); @@ -275,7 +279,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 f0e084d623b17b..1e17052ae26285 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; - } ` : ''; From 2e9719fe621e1073ee1fb2f542a6dc65e0524233 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 26 Jul 2022 17:10:48 +1000 Subject: [PATCH 2/4] Use only one classname for both content sizes. --- lib/block-supports/layout.php | 6 +----- lib/compat/wordpress-6.1/theme.json | 2 +- packages/block-editor/src/hooks/layout.js | 1 - 3 files changed, 2 insertions(+), 7 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 8ecf3186cbfc7b..6857e10384ec65 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -193,13 +193,9 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) { return $block_content; } - if ( isset( $global_layout_settings['contentSize'] ) && $global_layout_settings['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 ( isset( $global_layout_settings['wideSize'] ) && $global_layout_settings['wideSize'] ) { - $class_names[] = 'has-global-wide-size'; - } } if ( $use_global_padding ) { diff --git a/lib/compat/wordpress-6.1/theme.json b/lib/compat/wordpress-6.1/theme.json index 77aabf9e668689..4a3f4c71375884 100644 --- a/lib/compat/wordpress-6.1/theme.json +++ b/lib/compat/wordpress-6.1/theme.json @@ -225,7 +225,7 @@ } }, { - "selector": ":where(.has-global-wide-size) > .alignwide", + "selector": ":where(.has-global-content-size) > .alignwide", "rules": { "max-width": "var(--wp--style--global--wide-size)" } diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index 3e3c583b542865..b20ded0d6e161f 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -64,7 +64,6 @@ function useLayoutClasses( layout, layoutDefinitions ) { } if ( layout?.inherit ) { layoutClassnames.push( 'has-global-content-size' ); - layoutClassnames.push( 'has-global-wide-size' ); } if ( ( layout?.inherit || layout?.contentSize ) && rootPaddingAlignment ) { From 8f219a18c502bda99646133155ee8e243d8f50b1 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 26 Jul 2022 17:29:48 +1000 Subject: [PATCH 3/4] Content and wide values fallback to each other. --- lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) 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 3b01a8e8066a3d..b7fd17314622eb 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 @@ -751,11 +751,11 @@ function( $pseudo_selector ) use ( $selector ) { * 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'] ) { - $block_rules .= '--wp--style--global--content-size: ' . $settings['layout']['contentSize'] . ';'; - } - if ( isset( $settings['layout']['wideSize'] ) && $settings['layout']['wideSize'] ) { - $block_rules .= '--wp--style--global--wide-size: ' . $settings['layout']['wideSize'] . ';'; + 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']; + $wide_size = isset( $settings['layout']['wideSize'] ) ? $settings['layout']['wideSize'] : $settings['layout']['contentSize']; + $block_rules .= '--wp--style--global--content-size: ' . $content_size . ';'; + $block_rules .= '--wp--style--global--wide-size: ' . $wide_size . ';'; } $block_rules .= '}'; From 3addf03ad9bec9cf61b25699d7208e8554ccaff8 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Wed, 27 Jul 2022 18:09:40 +1000 Subject: [PATCH 4/4] Check if safe CSS values. --- lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php | 2 ++ 1 file changed, 2 insertions(+) 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 b7fd17314622eb..1b5b0ccfeb0ab4 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 @@ -753,7 +753,9 @@ function( $pseudo_selector ) use ( $selector ) { */ 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 . ';'; }