Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Avoid using CSS variables for block gap styles #37360

Merged
merged 7 commits into from
Dec 28, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/reference-guides/core-blocks.md
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ Display content in multiple columns, with blocks added to each column.

- **Name:** core/columns
- **Category:** design
- **Supports:** align (full, wide), anchor, color (background, gradients, link, text), spacing (blockGap, margin, padding), ~~html~~
- **Supports:** align (full, wide), anchor, color (background, gradients, link, text), spacing (margin, padding), ~~html~~
- **Attributes:** isStackedOnMobile, verticalAlignment

## Comment Author Avatar
Expand Down Expand Up @@ -365,7 +365,7 @@ A collection of blocks that allow visitors to get around your site.

- **Name:** core/navigation
- **Category:** theme
- **Supports:** align (full, wide), anchor, inserter, spacing (blockGap, units), typography (fontSize, lineHeight), ~~html~~
- **Supports:** align (full, wide), anchor, inserter, spacing (units), typography (fontSize, lineHeight), ~~html~~
- **Attributes:** __unstableLocation, backgroundColor, customBackgroundColor, customOverlayBackgroundColor, customOverlayTextColor, customTextColor, openSubmenusOnClick, overlayBackgroundColor, overlayMenu, overlayTextColor, ref, rgbBackgroundColor, rgbTextColor, showSubmenuIcon, textColor

## Navigation Area
Expand Down
20 changes: 14 additions & 6 deletions lib/block-supports/layout.php
Original file line number Diff line number Diff line change
Expand Up @@ -31,10 +31,11 @@ function gutenberg_register_layout_support( $block_type ) {
* @param string $selector CSS selector.
* @param array $layout Layout object. The one that is passed has already checked the existance 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.
*
* @return string CSS style.
*/
function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support = false ) {
function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support = false, $gap_value = null ) {
$layout_type = isset( $layout['type'] ) ? $layout['type'] : 'default';

$style = '';
Expand Down Expand Up @@ -65,8 +66,9 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
$style .= "$selector .alignleft { float: left; margin-right: 2em; }";
$style .= "$selector .alignright { float: right; margin-left: 2em; }";
if ( $has_block_gap_support ) {
$style .= "$selector > * { margin-top: 0; margin-bottom: 0; }";
$style .= "$selector > * + * { margin-top: var( --wp--style--block-gap ); margin-bottom: 0; }";
$gap_style = $gap_value ? $gap_value : 'var( --wp--style--block-gap )';
$style .= "$selector > * { margin-top: 0; margin-bottom: 0; }";
$style .= "$selector > * + * { margin-top: $gap_style; margin-bottom: 0; }";
}
} elseif ( 'flex' === $layout_type ) {
$layout_orientation = isset( $layout['orientation'] ) ? $layout['orientation'] : 'horizontal';
Expand All @@ -89,7 +91,8 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
$style = "$selector {";
$style .= 'display: flex;';
if ( $has_block_gap_support ) {
$style .= 'gap: var( --wp--style--block-gap, 0.5em );';
$gap_style = $gap_value ? $gap_value : 'var( --wp--style--block-gap, 0.5em )';
$style .= "gap: $gap_style;";
} else {
$style .= 'gap: 0.5em;';
}
Expand Down Expand Up @@ -145,8 +148,13 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
$used_layout = $default_layout;
}

$id = uniqid();
$style = gutenberg_get_layout_style( ".wp-container-$id", $used_layout, $has_block_gap_support );
$id = uniqid();
$gap_value = _wp_array_get( $block, array( 'attrs', 'style', 'spacing', 'blockGap' ) );
// Skip if gap value contains unsupported characters.
// Regex for CSS value borrowed from `safecss_filter_attr`, and used here
// because we only want to match against the value, not the CSS attribute.
$gap_value = preg_match( '%[\\\(&=}]|/\*%', $gap_value ) ? null : $gap_value;
$style = gutenberg_get_layout_style( ".wp-container-$id", $used_layout, $has_block_gap_support, $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(
Expand Down
53 changes: 0 additions & 53 deletions lib/block-supports/spacing.php
Original file line number Diff line number Diff line change
Expand Up @@ -90,57 +90,6 @@ function gutenberg_skip_spacing_serialization( $block_type ) {
$spacing_support['__experimentalSkipSerialization'];
}


/**
* Renders the spacing gap support to the block wrapper, to ensure
* that the CSS variable is rendered in all environments.
*
* @param string $block_content Rendered block content.
* @param array $block Block object.
* @return string Filtered block content.
*/
function gutenberg_render_spacing_gap_support( $block_content, $block ) {
$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
$has_gap_support = gutenberg_block_has_support( $block_type, array( 'spacing', 'blockGap' ), false );
if ( ! $has_gap_support || ! isset( $block['attrs']['style']['spacing']['blockGap'] ) ) {
return $block_content;
}

$gap_value = $block['attrs']['style']['spacing']['blockGap'];

// Skip if gap value contains unsupported characters.
// Regex for CSS value borrowed from `safecss_filter_attr`, and used here
// because we only want to match against the value, not the CSS attribute.
if ( preg_match( '%[\\\(&=}]|/\*%', $gap_value ) ) {
return $block_content;
}

$style = sprintf(
'--wp--style--block-gap: %s',
esc_attr( $gap_value )
);

// Attempt to update an existing style attribute on the wrapper element.
$injected_style = preg_replace(
'/^([^>.]+?)(' . preg_quote( 'style="', '/' ) . ')(?=.+?>)/',
'$1$2' . $style . '; ',
$block_content,
1
);

// If there is no existing style attribute, add one to the wrapper element.
if ( $injected_style === $block_content ) {
$injected_style = preg_replace(
'/<([a-zA-Z0-9]+)([ >])/',
'<$1 style="' . $style . '"$2',
$block_content,
1
);
};

return $injected_style;
}

// Register the block support.
WP_Block_Supports::get_instance()->register(
'spacing',
Expand All @@ -149,5 +98,3 @@ function gutenberg_render_spacing_gap_support( $block_content, $block ) {
'apply' => 'gutenberg_apply_spacing_support',
)
);

add_filter( 'render_block', 'gutenberg_render_spacing_gap_support', 10, 2 );
17 changes: 14 additions & 3 deletions lib/compat/wordpress-5.9/class-wp-theme-json-gutenberg.php
Original file line number Diff line number Diff line change
Expand Up @@ -285,7 +285,7 @@ class WP_Theme_JSON_Gutenberg {
'spacing' => array(
'margin' => null,
'padding' => null,
'blockGap' => null,
'blockGap' => 'top',
),
'typography' => array(
'fontFamily' => null,
Expand Down Expand Up @@ -428,17 +428,28 @@ private static function sanitize( $input, $valid_block_names, $valid_element_nam

$output = array_intersect_key( $input, array_flip( self::VALID_TOP_LEVEL_KEYS ) );

// Some styles are only meant to be available at the top-level (e.g.: blockGap),
// hence, the schema for blocks & elements should not have them.
$styles_non_top_level = self::VALID_STYLES;
foreach ( array_keys( $styles_non_top_level ) as $section ) {
foreach ( array_keys( $styles_non_top_level[ $section ] ) as $prop ) {
if ( 'top' === $styles_non_top_level[ $section ][ $prop ] ) {
unset( $styles_non_top_level[ $section ][ $prop ] );
}
}
}

// Build the schema based on valid block & element names.
$schema = array();
$schema_styles_elements = array();
foreach ( $valid_element_names as $element ) {
$schema_styles_elements[ $element ] = self::VALID_STYLES;
$schema_styles_elements[ $element ] = $styles_non_top_level;
}
$schema_styles_blocks = array();
$schema_settings_blocks = array();
foreach ( $valid_block_names as $block ) {
$schema_settings_blocks[ $block ] = self::VALID_SETTINGS;
$schema_styles_blocks[ $block ] = self::VALID_STYLES;
$schema_styles_blocks[ $block ] = $styles_non_top_level;
$schema_styles_blocks[ $block ]['elements'] = $schema_styles_elements;
}
$schema['styles'] = self::VALID_STYLES;
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/hooks/layout.js
Original file line number Diff line number Diff line change
Expand Up @@ -215,6 +215,7 @@ export const withLayoutStyles = createHigherOrderComponent(
<LayoutStyle
selector={ `.wp-container-${ id }` }
layout={ usedLayout }
style={ attributes?.style }
/>,
element
) }
Expand Down
3 changes: 2 additions & 1 deletion packages/block-editor/src/hooks/style.js
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ function compileStyleValue( uncompiledValue ) {
* @return {Object} Flattened CSS variables declaration.
*/
export function getInlineStyles( styles = {} ) {
const ignoredStyles = [ 'spacing.blockGap' ];
const output = {};
Object.keys( STYLE_PROPERTY ).forEach( ( propKey ) => {
const path = STYLE_PROPERTY[ propKey ].value;
Expand All @@ -93,7 +94,7 @@ export function getInlineStyles( styles = {} ) {
output[ name ] = compileStyleValue( value );
}
} );
} else {
} else if ( ! ignoredStyles.includes( path.join( '.' ) ) ) {
output[ propKey ] = compileStyleValue( get( styles, path ) );
}
}
Expand Down
2 changes: 0 additions & 2 deletions packages/block-editor/src/hooks/test/style.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ describe( 'getInlineStyles', () => {
},
} )
).toEqual( {
'--wp--style--block-gap': '1em',
backgroundColor: 'black',
borderColor: '#21759b',
borderRadius: '10px',
Expand Down Expand Up @@ -104,7 +103,6 @@ describe( 'getInlineStyles', () => {
},
} )
).toEqual( {
'--wp--style--block-gap': '1em',
margin: '10px',
padding: '20px',
} );
Expand Down
10 changes: 4 additions & 6 deletions packages/block-editor/src/layouts/flex.js
Original file line number Diff line number Diff line change
Expand Up @@ -84,10 +84,12 @@ export default {
</BlockControls>
);
},
save: function FlexLayoutStyle( { selector, layout } ) {
save: function FlexLayoutStyle( { selector, layout, style } ) {
const { orientation = 'horizontal' } = layout;
const blockGapSupport = useSetting( 'spacing.blockGap' );
const hasBlockGapStylesSupport = blockGapSupport !== null;
const blockGapValue =
style?.spacing?.blockGap ?? 'var( --wp--style--block-gap, 0.5em )';
const justifyContent =
justifyContentMap[ layout.justifyContent ] ||
justifyContentMap.left;
Expand All @@ -110,11 +112,7 @@ export default {
<style>{ `
${ appendSelectors( selector ) } {
display: flex;
gap: ${
hasBlockGapStylesSupport
? 'var( --wp--style--block-gap, 0.5em )'
: '0.5em'
};
gap: ${ hasBlockGapStylesSupport ? blockGapValue : '0.5em' };
flex-wrap: ${ flexWrap };
${ orientation === 'horizontal' ? rowOrientation : columnOrientation }
}
Expand Down
14 changes: 8 additions & 6 deletions packages/block-editor/src/layouts/flow.js
Original file line number Diff line number Diff line change
Expand Up @@ -105,12 +105,14 @@ export default {
toolBarControls: function DefaultLayoutToolbarControls() {
return null;
},
save: function DefaultLayoutStyle( { selector, layout = {} } ) {
save: function DefaultLayoutStyle( { selector, layout = {}, style } ) {
const { contentSize, wideSize } = layout;
const blockGapSupport = useSetting( 'spacing.blockGap' );
const hasBlockGapStylesSupport = blockGapSupport !== null;
const blockGapValue =
style?.spacing?.blockGap ?? 'var( --wp--style--block-gap )';

let style =
let output =
!! contentSize || !! wideSize
? `
${ appendSelectors( selector, '> *' ) } {
Expand All @@ -129,7 +131,7 @@ export default {
`
: '';

style += `
output += `
${ appendSelectors( selector, '> [data-align="left"]' ) } {
float: left;
margin-right: 2em;
Expand All @@ -143,18 +145,18 @@ export default {
`;

if ( hasBlockGapStylesSupport ) {
style += `
output += `
${ appendSelectors( selector, '> *' ) } {
margin-top: 0;
margin-bottom: 0;
}
${ appendSelectors( selector, '> * + *' ) } {
margin-top: var( --wp--style--block-gap );
margin-top: ${ blockGapValue };
}
`;
}

return <style>{ style }</style>;
return <style>{ output }</style>;
},
getOrientation() {
return 'vertical';
Expand Down
3 changes: 1 addition & 2 deletions packages/block-library/src/columns/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,10 @@
"link": true
},
"spacing": {
"blockGap": true,
"margin": [ "top", "bottom" ],
"padding": true,
"__experimentalDefaultControls": {
"blockGap": true
"padding": true
}
}
},
Expand Down
6 changes: 1 addition & 5 deletions packages/block-library/src/navigation/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -92,11 +92,7 @@
}
},
"spacing": {
"blockGap": true,
"units": [ "px", "em", "rem", "vh", "vw" ],
"__experimentalDefaultControls": {
"blockGap": true
}
"units": [ "px", "em", "rem", "vh", "vw" ]
},
"__experimentalLayout": {
"allowSwitching": false,
Expand Down
Loading