From 6dad1d52df8cdf269340ebe080c5e5a6c4b3e3fa Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 30 Mar 2022 16:42:13 +1300 Subject: [PATCH] Cherry pick relevant commits from #36214 --- lib/block-supports/layout.php | 36 +++++++++---- .../wordpress-6.0/class-wp-theme-json-6-0.php | 1 + packages/block-editor/src/hooks/layout.js | 53 +++++++++++-------- packages/block-editor/src/hooks/padding.js | 13 ++++- packages/block-editor/src/layouts/flow.js | 10 ++++ packages/block-library/src/cover/style.scss | 1 - .../src/components/visual-editor/index.js | 9 ++++ 7 files changed, 90 insertions(+), 33 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 01e6b9324e5a5d..ed4c70c3343cde 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -28,16 +28,17 @@ function gutenberg_register_layout_support( $block_type ) { /** * Generates the CSS corresponding to the provided layout. * - * @param string $selector CSS selector. - * @param array $layout Layout object. The one that is passed has already checked the existence of default block layout. - * @param boolean $has_block_gap_support Whether the theme has support for the block gap. - * @param string $gap_value The block gap value to apply. - * @param boolean $should_skip_gap_serialization Whether to skip applying the user-defined value set in the editor. - * @param string $fallback_gap_value The block gap value to apply. + * @param string $selector CSS selector. + * @param array $layout Layout object. The one that is passed has already checked the existence of default block layout. + * @param array|null $padding Padding applied to the current block. + * @param boolean $has_block_gap_support Whether the theme has support for the block gap. + * @param string $gap_value The block gap value to apply. + * @param boolean $should_skip_gap_serialization Whether to skip applying the user-defined value set in the editor. + * @param string $fallback_gap_value The block gap value to apply. * * @return string CSS style. */ -function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support = false, $gap_value = null, $should_skip_gap_serialization = false, $fallback_gap_value = '0.5em' ) { +function gutenberg_get_layout_style( $selector, $layout, $padding, $has_block_gap_support = false, $gap_value = null, $should_skip_gap_serialization = false, $fallback_gap_value = '0.5em' ) { $layout_type = isset( $layout['type'] ) ? $layout['type'] : 'default'; $style = ''; @@ -54,6 +55,17 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support $wide_max_width_value = wp_strip_all_tags( explode( ';', $wide_max_width_value )[0] ); if ( $content_size || $wide_size ) { + $style = "$selector {"; + // Using important here to override the inline padding that could be potentially + // applied using the custom padding control before the layout inheritance is applied. + $style .= sprintf( + 'padding: %s %s %s %s !important', + isset( $padding['top'] ) ? $padding['top'] : 0, + isset( $padding['right'] ) ? $padding['right'] : 0, + isset( $padding['bottom'] ) ? $padding['bottom'] : 0, + isset( $padding['left'] ) ? $padding['left'] : 0 + ); + $style .= '}'; $style = "$selector > :where(:not(.alignleft):not(.alignright)) {"; $style .= 'max-width: ' . esc_html( $all_max_width_value ) . ';'; $style .= 'margin-left: auto !important;'; @@ -61,7 +73,11 @@ 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; }"; + $style .= "$selector .alignfull {"; + $style .= 'max-width: none;'; + $style .= isset( $padding['left'] ) ? sprintf( 'margin-left: calc( -1 * %s ) !important;', $padding['left'] ) : ''; + $style .= isset( $padding['right'] ) ? sprintf( 'margin-right: calc( -1 * %s ) !important;', $padding['right'] ) : ''; + $style .= '}'; } $style .= "$selector > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }"; @@ -162,6 +178,7 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) { $block_gap = gutenberg_get_global_settings( array( 'spacing', 'blockGap' ) ); $default_layout = gutenberg_get_global_settings( array( 'layout' ) ); + $padding = _wp_array_get( $block, array( 'attrs', 'style', 'padding' ), null ); $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; @@ -170,6 +187,7 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) { return $block_content; } $used_layout = $default_layout; + $padding = isset( $default_layout['padding'] ) ? $default_layout['padding'] : null; } $class_name = wp_unique_id( 'wp-container-' ); @@ -190,7 +208,7 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) { // If a block's block.json skips serialization for spacing or spacing.blockGap, // don't apply the user-defined value to the styles. $should_skip_gap_serialization = gutenberg_should_skip_block_supports_serialization( $block_type, 'spacing', 'blockGap' ); - $style = gutenberg_get_layout_style( ".$class_name", $used_layout, $has_block_gap_support, $gap_value, $should_skip_gap_serialization, $fallback_gap_value ); + $style = gutenberg_get_layout_style( ".$class_name", $used_layout, $padding, $has_block_gap_support, $gap_value, $should_skip_gap_serialization, $fallback_gap_value ); // This assumes the hook only applies to blocks with a single wrapper. // I think this is a reasonable limitation for that particular hook. $content = preg_replace( diff --git a/lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php b/lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php index 77d731b9d45442..cb8015beec604d 100644 --- a/lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php +++ b/lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php @@ -227,6 +227,7 @@ class WP_Theme_JSON_6_0 extends WP_Theme_JSON_5_9 { 'layout' => array( 'contentSize' => null, 'wideSize' => null, + 'padding' => null, ), 'spacing' => array( 'blockGap' => null, diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index 586b38bf4c8a0e..77c4a02746c779 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -2,7 +2,7 @@ * External dependencies */ import classnames from 'classnames'; -import { has } from 'lodash'; +import { has, get } from 'lodash'; /** * WordPress dependencies @@ -34,23 +34,14 @@ const layoutBlockSupportKey = '__experimentalLayout'; function LayoutPanel( { setAttributes, attributes, name: blockName } ) { const { layout } = attributes; - const defaultThemeLayout = useSetting( 'layout' ); - const themeSupportsLayout = useSelect( ( select ) => { - const { getSettings } = select( blockEditorStore ); - return getSettings().supportsLayout; - }, [] ); - const layoutBlockSupport = getBlockSupport( - blockName, - layoutBlockSupportKey, - {} - ); + const { supportsFlowLayout, config } = useLayout( blockName ); const { allowSwitching, allowEditing = true, allowInheriting = true, default: defaultBlockLayout, - } = layoutBlockSupport; + } = config; if ( ! allowEditing ) { return null; @@ -61,18 +52,14 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) { // and that the default / flow layout type is in use, as this is the only one that supports inheritance. const showInheritToggle = !! ( allowInheriting && - !! defaultThemeLayout && + !! supportsFlowLayout && ( ! layout?.type || layout?.type === 'default' || layout?.inherit ) ); const usedLayout = layout || defaultBlockLayout || {}; const { inherit = false, type = 'default' } = usedLayout; - /** - * `themeSupportsLayout` is only relevant to the `default/flow` - * layout and it should not be taken into account when other - * `layout` types are used. - */ - if ( type === 'default' && ! themeSupportsLayout ) { + + if ( type === 'default' && ! supportsFlowLayout ) { return null; } const layoutType = getLayoutType( type ); @@ -109,7 +96,7 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) { ) } @@ -118,7 +105,7 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) { ) } @@ -143,6 +130,26 @@ function LayoutTypeSwitcher( { type, onChange } ) { ); } +export function useLayout( blockName ) { + const defaultThemeLayout = useSetting( 'layout' ); + const themeSupportsLayout = useSelect( ( select ) => { + const { getSettings } = select( blockEditorStore ); + return getSettings().supportsLayout; + }, [] ); + + const layoutBlockSupport = getBlockSupport( + blockName, + layoutBlockSupportKey, + {} + ); + + return { + supportsFlowLayout: themeSupportsLayout, + defaultLayout: defaultThemeLayout, + config: layoutBlockSupport, + }; +} + /** * Filters registered block settings, extending attributes to include `layout`. * @@ -212,6 +219,9 @@ export const withLayoutStyles = createHigherOrderComponent( const usedLayout = layout?.inherit ? defaultThemeLayout : layout || defaultBlockLayout || {}; + const padding = layout?.inherit + ? usedLayout?.padding + : get( attributes, [ 'style', 'padding' ] ); const className = classnames( props?.className, { [ `wp-container-${ id }` ]: shouldRenderLayoutStyles, } ); @@ -225,6 +235,7 @@ export const withLayoutStyles = createHigherOrderComponent( blockName={ name } selector={ `.wp-container-${ id }` } layout={ usedLayout } + padding={ padding } style={ attributes?.style } />, element diff --git a/packages/block-editor/src/hooks/padding.js b/packages/block-editor/src/hooks/padding.js index 02a371db0d6a33..495ea70570e594 100644 --- a/packages/block-editor/src/hooks/padding.js +++ b/packages/block-editor/src/hooks/padding.js @@ -28,6 +28,7 @@ import { } from './dimensions'; import { cleanEmptyObject } from './utils'; import BlockPopover from '../components/block-popover'; +import { useLayout } from './layout'; /** * Determines if there is padding support. @@ -80,11 +81,19 @@ export function resetPadding( { attributes = {}, setAttributes } ) { * * @return {boolean} Whether padding setting is disabled. */ -export function useIsPaddingDisabled( { name: blockName } = {} ) { +export function useIsPaddingDisabled( { name: blockName, attributes } = {} ) { + const { supportsFlowLayout, config } = useLayout( blockName ); + const hasInheritedLayout = + supportsFlowLayout && !! config && attributes?.layout?.inherit; const isDisabled = ! useSetting( 'spacing.padding' ); const isInvalid = ! useIsDimensionsSupportValid( blockName, 'padding' ); - return ! hasPaddingSupport( blockName ) || isDisabled || isInvalid; + return ( + ! hasPaddingSupport( blockName ) || + hasInheritedLayout || + isDisabled || + isInvalid + ); } /** diff --git a/packages/block-editor/src/layouts/flow.js b/packages/block-editor/src/layouts/flow.js index 82851cb0150756..eac3c58846ba26 100644 --- a/packages/block-editor/src/layouts/flow.js +++ b/packages/block-editor/src/layouts/flow.js @@ -112,6 +112,7 @@ export default { layout = {}, style, blockName, + padding, } ) { const { contentSize, wideSize } = layout; const blockGapSupport = useSetting( 'spacing.blockGap' ); @@ -126,10 +127,17 @@ export default { ! shouldSkipSerialization( blockName, 'spacing', 'blockGap' ) ? blockGapStyleValue?.top : 'var( --wp--style--block-gap )'; + // Using important here for the padding to override the inline padding that could be potentially + // applied using the custom padding control before the layout inheritance is applied. let output = !! contentSize || !! wideSize ? ` + ${ appendSelectors( selector ) } { + padding: ${ padding?.top || 0 } ${ padding?.right || 0 } ${ + padding?.bottom || 0 + } ${ padding?.left || 0 } !important; + } ${ appendSelectors( selector, '> :where(:not(.alignleft):not(.alignright))' @@ -143,6 +151,8 @@ export default { } ${ appendSelectors( selector, '> .alignfull' ) } { max-width: none; + margin-left: calc( -1 * ${ padding?.left || 0 } ) !important; + margin-right: calc( -1 * ${ padding?.right || 0 } ) !important; } ` : ''; diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss index 957cfc5d4e23a3..619cad46c1b5a3 100644 --- a/packages/block-library/src/cover/style.scss +++ b/packages/block-library/src/cover/style.scss @@ -4,7 +4,6 @@ background-size: cover; background-position: center center; min-height: 430px; - width: 100%; display: flex; justify-content: center; align-items: center; diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index b5a2b0a4a4b971..e7f6be3871928f 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -190,6 +190,14 @@ export default function VisualEditor( { styles } ) { return undefined; }, [ isTemplateMode, themeSupportsLayout, defaultLayout ] ); + const padding = useMemo( () => { + if ( isTemplateMode || ! themeSupportsLayout ) { + return undefined; + } + + return defaultLayout?.padding; + } ); + const titleRef = useRef(); useEffect( () => { if ( isWelcomeGuideVisible || ! isCleanNewPost() ) { @@ -245,6 +253,7 @@ export default function VisualEditor( { styles } ) { ) } { ! isTemplateMode && (