Skip to content

Commit

Permalink
Try using variable for root padding value
Browse files Browse the repository at this point in the history 
Root vars shouldn't apply to block global styles

Fix issue with shorthand padding on server side.

Temp fix for file path error

Fix site editor top padding not updating

Support shorthand properties in site editor.

Fix full widths in the post editor

Check selector inside function.

Fix kebab-casing of CSS variables.

Fix borked merge conflict solving

Move post editor full width styles to edit-post package.

Set default padding value to 0.

Update test string.

Fix PHP unit tests

Fix PHP lint

Fix failing PHP tests.

Use block gap variable as default root padding value.

Fix linting errors.

Add opt-in setting via package.json

Generate correct block editor styles

Fix tests and add prop to core theme.json

Fix unit tests properly this time

Improve the logic for warnings for Post Comments Form placeholder (#40563)

* Improve the warning for Comments Form placeholder

* Fix typo on showPlaceholder variable name

Co-authored-by: Luis Herranz <luisherranz@gmail.com>

Add optional chaining in case taxonomy visibility is not defined (#40532)

Co-authored-by: Glen Davies <glen.davies@a8c.com>

Merge remote-tracking branch 'origin/trunk' into try/root-padding-fix

Added missing doc comment for parameter "$use_root_vars"

Add alignments rules for blocks within post content

Remove default padding

match alignment rules to those used in blockbase

move root padding rules to a new method

revert unconnected change

revert spacing change

add docblock for new method

remove file'

fix merge mess

formatting
  • Loading branch information
@tellthemachines @scruffian
tellthemachines authored and scruffian committed May 9, 2022
1 parent 450e402 commit a536b12
Show file tree
Hide file tree
Showing 9 changed files with 362 additions and 78 deletions.
2 changes: 1 addition & 1 deletion lib/block-supports/layout.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ 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 > :where(:not(.alignleft):not(.alignright)) {";
$style = "$selector > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {";
$style .= 'max-width: ' . esc_html( $all_max_width_value ) . ';';
$style .= 'margin-left: auto !important;';
$style .= 'margin-right: auto !important;';
Expand Down
311 changes: 248 additions & 63 deletions lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions lib/compat/wordpress-6.0/theme.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
"version": 2,
"settings": {
"appearanceTools": false,
"useRootVariables": false,
"border": {
"color": false,
"radius": false,
Expand Down
3 changes: 3 additions & 0 deletions packages/block-editor/src/hooks/style.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,9 @@ export function getInlineStyles( styles = {} ) {
const ignoredStyles = [ 'spacing.blockGap' ];
const output = {};
Object.keys( STYLE_PROPERTY ).forEach( ( propKey ) => {
if ( STYLE_PROPERTY[ propKey ].rootOnly ) {
return;
}
const path = STYLE_PROPERTY[ propKey ].value;
const subPaths = STYLE_PROPERTY[ propKey ].properties;
// Ignore styles on elements because they are handled on the server.
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/layouts/flow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ export default {
? `
${ appendSelectors(
selector,
'> :where(:not(.alignleft):not(.alignright))'
'> :where(:not(.alignleft):not(.alignright):not(.alignfull))'
) } {
max-width: ${ contentSize ?? wideSize };
margin-left: auto !important;
Expand Down
11 changes: 11 additions & 0 deletions packages/blocks/src/api/constants.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,6 +170,17 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
value: [ 'spacing', 'blockGap' ],
support: [ 'spacing', 'blockGap' ],
},
'--wp--style--root--padding': {
value: [ 'spacing', 'padding' ],
support: [ 'spacing', 'padding' ],
properties: {
'--wp--style--root--padding-top': 'top',
'--wp--style--root--padding-right': 'right',
'--wp--style--root--padding-bottom': 'bottom',
'--wp--style--root--padding-left': 'left',
},
rootOnly: true,
},
};

export const __EXPERIMENTAL_ELEMENTS = {
Expand Down
2 changes: 1 addition & 1 deletion packages/edit-site/src/components/global-styles/test/use-global-styles-output.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -378,7 +378,7 @@ describe( 'global styles renderer', () => {

expect( toStyles( tree, blockSelectors ) ).toEqual(
'body {margin: 0;}' +
'body{background-color: red;margin: 10px;padding: 10px;}h1{font-size: 42px;}.wp-block-group{margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}h1,h2,h3,h4,h5,h6{color: orange;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color: hotpink;}' +
'body{background-color: red;--wp--style--root--padding-top: 10px;--wp--style--root--padding-right: 10px;--wp--style--root--padding-bottom: 10px;--wp--style--root--padding-left: 10px;margin: 10px;padding: 10px;}h1{font-size: 42px;}.wp-block-group{margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}h1,h2,h3,h4,h5,h6{color: orange;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color: hotpink;}' +
'.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }' +
'.has-white-color{color: var(--wp--preset--color--white) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}h1.has-blue-color,h2.has-blue-color,h3.has-blue-color,h4.has-blue-color,h5.has-blue-color,h6.has-blue-color{color: var(--wp--preset--color--blue) !important;}h1.has-blue-background-color,h2.has-blue-background-color,h3.has-blue-background-color,h4.has-blue-background-color,h5.has-blue-background-color,h6.has-blue-background-color{background-color: var(--wp--preset--color--blue) !important;}h1.has-blue-border-color,h2.has-blue-border-color,h3.has-blue-border-color,h4.has-blue-border-color,h5.has-blue-border-color,h6.has-blue-border-color{border-color: var(--wp--preset--color--blue) !important;}'
);
Expand Down
96 changes: 90 additions & 6 deletions packages/edit-site/src/components/global-styles/use-global-styles-output.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,14 +170,21 @@ function flattenTree( input = {}, prefix, token ) {
/**
* Transform given style tree into a set of style declarations.
*
* @param {Object} blockStyles Block styles.
* @param {Object} blockStyles Block styles.
*
* @param {string} selector The selector these declarations should attach to.
*
* @param {boolean} useRootVars Whether to use CSS custom properties in root selector.
* @return {Array} An array of style declarations.
*/
function getStylesDeclarations( blockStyles = {} ) {
function getStylesDeclarations( blockStyles = {}, selector = '', useRootVars ) {
const isRoot = ROOT_BLOCK_SELECTOR === selector;
const output = reduce(
STYLE_PROPERTY,
( declarations, { value, properties, useEngine }, key ) => {
( declarations, { value, properties, useEngine, rootOnly }, key ) => {
if ( rootOnly && ! isRoot ) {
return declarations;
}
const pathToValue = value;
if ( first( pathToValue ) === 'elements' || useEngine ) {
return declarations;
Expand All @@ -194,14 +201,63 @@ function getStylesDeclarations( blockStyles = {} ) {
// for sub-properties that don't have any value.
return;
}

const cssProperty = kebabCase( name );
const cssProperty = name.startsWith( '--' )
? name
: kebabCase( name );
declarations.push(
`${ cssProperty }: ${ compileStyleValue(
get( styleValue, [ prop ] )
) }`
);
} );
} else if ( !! properties && isString( styleValue ) && rootOnly ) {
const separateValues = styleValue.split( ' ' );

const sortedBoxValues = {
top: '0',
right: '0',
bottom: '0',
left: '0',
};

switch ( separateValues.length ) {
case 1:
sortedBoxValues.top = separateValues[ 0 ];
sortedBoxValues.right = separateValues[ 0 ];
sortedBoxValues.bottom = separateValues[ 0 ];
sortedBoxValues.left = separateValues[ 0 ];
break;
case 2:
sortedBoxValues.top = separateValues[ 0 ];
sortedBoxValues.right = separateValues[ 1 ];
sortedBoxValues.bottom = separateValues[ 0 ];
sortedBoxValues.left = separateValues[ 1 ];
break;
case 3:
sortedBoxValues.top = separateValues[ 0 ];
sortedBoxValues.right = separateValues[ 1 ];
sortedBoxValues.bottom = separateValues[ 2 ];
sortedBoxValues.left = separateValues[ 1 ];
break;
case 4:
sortedBoxValues.top = separateValues[ 0 ];
sortedBoxValues.right = separateValues[ 1 ];
sortedBoxValues.bottom = separateValues[ 2 ];
sortedBoxValues.left = separateValues[ 3 ];
break;
}

Object.entries( properties ).forEach( ( entry ) => {
const [ name, prop ] = entry;
const cssProperty = name.startsWith( '--' )
? name
: kebabCase( name );
declarations.push(
`${ cssProperty }: ${ compileStyleValue(
get( sortedBoxValues, [ prop ] )
) }`
);
} );
} else if ( get( blockStyles, pathToValue, false ) ) {
const cssProperty = key.startsWith( '--' )
? key
Expand All @@ -218,6 +274,10 @@ function getStylesDeclarations( blockStyles = {} ) {
[]
);

if ( isRoot && useRootVars ) {
return output;
}

// The goal is to move everything to server side generated engine styles
// This is temporary as we absorb more and more styles into the engine.
const extraRules = getCSSRules( blockStyles, { selector: 'self' } );
Expand Down Expand Up @@ -363,6 +423,7 @@ export const toCustomProperties = ( tree, blockSelectors ) => {
export const toStyles = ( tree, blockSelectors, hasBlockGapSupport ) => {
const nodesWithStyles = getNodesWithStyles( tree, blockSelectors );
const nodesWithSettings = getNodesWithSettings( tree, blockSelectors );
const useRootVars = tree?.settings?.useRootVariables;

/*
* Reset default browser margin on the root body element.
Expand All @@ -373,6 +434,12 @@ export const toStyles = ( tree, blockSelectors, hasBlockGapSupport ) => {
* @link https://github.com/WordPress/gutenberg/issues/36147.
*/
let ruleset = 'body {margin: 0;}';

// Add alignment rules.
if ( useRootVars ) {
ruleset =
'body { padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) } .wp-site-blocks > * { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); } }';
}
nodesWithStyles.forEach( ( { selector, duotoneSelector, styles } ) => {
const duotoneStyles = {};
if ( styles?.filter ) {
Expand All @@ -392,7 +459,24 @@ export const toStyles = ( tree, blockSelectors, hasBlockGapSupport ) => {
}

// Process the remaning block styles (they use either normal block class or __experimentalSelector).
const declarations = getStylesDeclarations( styles );
const declarations = getStylesDeclarations(
styles,
selector,
useRootVars
);
if ( declarations.length === 0 ) {
return;
}
ruleset = ruleset + `${ selector }{${ declarations.join( ';' ) };}`;
} );

nodesWithStyles.forEach( ( { selector, styles } ) => {
const declarations = getStylesDeclarations(
styles,
selector,
useRootVars
);

if ( declarations.length === 0 ) {
return;
}
Expand Down
12 changes: 6 additions & 6 deletions phpunit/class-wp-theme-json-test.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -351,7 +351,7 @@ function test_get_stylesheet_support_for_shorthand_and_longhand_values() {
)
);

$styles = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-block-group{border-radius: 10px;margin: 1em;padding: 24px;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;padding-top: 15px;}';
$styles = 'body { margin: 0; }body{--wp--style--root--padding-top: ;--wp--style--root--padding-right: ;--wp--style--root--padding-bottom: ;--wp--style--root--padding-left: ;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-block-group{border-radius: 10px;margin: 1em;padding: 24px;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;padding-top: 15px;}';
$this->assertEquals( $styles, $theme_json->get_stylesheet() );
$this->assertEquals( $styles, $theme_json->get_stylesheet( array( 'styles' ) ) );
}
Expand Down Expand Up @@ -380,7 +380,7 @@ function test_get_stylesheet_skips_disabled_protected_properties() {
)
);

$expected = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
$expected = 'body { margin: 0; }body{--wp--style--root--padding-top: ;--wp--style--root--padding-right: ;--wp--style--root--padding-bottom: ;--wp--style--root--padding-left: ;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
$this->assertEquals( $expected, $theme_json->get_stylesheet() );
$this->assertEquals( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) );
}
Expand All @@ -402,7 +402,7 @@ function test_get_stylesheet_renders_enabled_protected_properties() {
)
);

$expected = 'body { margin: 0; }body{--wp--style--block-gap: 1em;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: var( --wp--style--block-gap ); }';
$expected = 'body { margin: 0; }body{--wp--style--root--padding-top: ;--wp--style--root--padding-right: ;--wp--style--root--padding-bottom: ;--wp--style--root--padding-left: ;--wp--style--block-gap: 1em;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: var( --wp--style--block-gap ); }';
$this->assertEquals( $expected, $theme_json->get_stylesheet() );
$this->assertEquals( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) );
}
Expand Down Expand Up @@ -528,7 +528,7 @@ function test_get_stylesheet() {
);

$variables = 'body{--wp--preset--color--grey: grey;--wp--preset--font-family--small: 14px;--wp--preset--font-family--big: 41px;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}';
$styles = 'body { margin: 0; }body{color: var(--wp--preset--color--grey);}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: var( --wp--style--block-gap ); }a{background-color: #333;color: #111;}.wp-block-group{border-radius: 10px;padding: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;}';
$styles = 'body { margin: 0; }body{color: var(--wp--preset--color--grey);--wp--style--root--padding-top: ;--wp--style--root--padding-right: ;--wp--style--root--padding-bottom: ;--wp--style--root--padding-left: ;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: var( --wp--style--block-gap ); }a{background-color: #333;color: #111;}.wp-block-group{border-radius: 10px;padding: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;}';
$presets = '.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}.has-small-font-family{font-family: var(--wp--preset--font-family--small) !important;}.has-big-font-family{font-family: var(--wp--preset--font-family--big) !important;}';
$all = $variables . $styles . $presets;
$this->assertEquals( $all, $theme_json->get_stylesheet() );
Expand Down Expand Up @@ -594,7 +594,7 @@ function test_get_stylesheet_preset_rules_come_after_block_rules() {
)
);

$styles = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-block-group{color: red;}';
$styles = 'body { margin: 0; }body{--wp--style--root--padding-top: ;--wp--style--root--padding-right: ;--wp--style--root--padding-bottom: ;--wp--style--root--padding-left: ;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-block-group{color: red;}';
$presets = '.wp-block-group.has-grey-color{color: var(--wp--preset--color--grey) !important;}.wp-block-group.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.wp-block-group.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}';
$variables = '.wp-block-group{--wp--preset--color--grey: grey;}';
$all = $variables . $styles . $presets;
Expand Down Expand Up @@ -680,7 +680,7 @@ public function test_get_stylesheet_preset_values_are_marked_as_important() {
);

$this->assertEquals(
'body{--wp--preset--color--grey: grey;}body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }p{background-color: blue;color: red;font-size: 12px;line-height: 1.3;}.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}',
'body{--wp--preset--color--grey: grey;}body { margin: 0; }body{--wp--style--root--padding-top: ;--wp--style--root--padding-right: ;--wp--style--root--padding-bottom: ;--wp--style--root--padding-left: ;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }p{background-color: blue;color: red;font-size: 12px;line-height: 1.3;}.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}',
$theme_json->get_stylesheet()
);
}
Expand Down

0 comments on commit a536b12

Please sign in to comment.