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

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

Added missing doc comment for parameter "$use_root_vars"

fix rebase
  • Loading branch information
@tellthemachines @scruffian
tellthemachines authored and scruffian committed May 26, 2022
1 parent 9705bf2 commit a13fa7a
Show file tree
Hide file tree
Showing 11 changed files with 335 additions and 73 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 @@ -66,7 +66,7 @@ function gutenberg_get_layout_style( $selector, $layout, $padding, $has_block_ga
isset( $padding['left'] ) ? $padding['left'] : 0
);
$style .= '}';
$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
262 changes: 208 additions & 54 deletions lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,49 +22,54 @@ class WP_Theme_JSON_6_0 extends WP_Theme_JSON_5_9 {
* path to the value in theme.json & block attributes.
*/
const PROPERTIES_METADATA = array(
'background' => array( 'color', 'gradient' ),
'background-color' => array( 'color', 'background' ),
'border-radius' => array( 'border', 'radius' ),
'border-top-left-radius' => array( 'border', 'radius', 'topLeft' ),
'border-top-right-radius' => array( 'border', 'radius', 'topRight' ),
'border-bottom-left-radius' => array( 'border', 'radius', 'bottomLeft' ),
'border-bottom-right-radius' => array( 'border', 'radius', 'bottomRight' ),
'border-color' => array( 'border', 'color' ),
'border-width' => array( 'border', 'width' ),
'border-style' => array( 'border', 'style' ),
'border-top-color' => array( 'border', 'top', 'color' ),
'border-top-width' => array( 'border', 'top', 'width' ),
'border-top-style' => array( 'border', 'top', 'style' ),
'border-right-color' => array( 'border', 'right', 'color' ),
'border-right-width' => array( 'border', 'right', 'width' ),
'border-right-style' => array( 'border', 'right', 'style' ),
'border-bottom-color' => array( 'border', 'bottom', 'color' ),
'border-bottom-width' => array( 'border', 'bottom', 'width' ),
'border-bottom-style' => array( 'border', 'bottom', 'style' ),
'border-left-color' => array( 'border', 'left', 'color' ),
'border-left-width' => array( 'border', 'left', 'width' ),
'border-left-style' => array( 'border', 'left', 'style' ),
'color' => array( 'color', 'text' ),
'font-family' => array( 'typography', 'fontFamily' ),
'font-size' => array( 'typography', 'fontSize' ),
'font-style' => array( 'typography', 'fontStyle' ),
'font-weight' => array( 'typography', 'fontWeight' ),
'letter-spacing' => array( 'typography', 'letterSpacing' ),
'line-height' => array( 'typography', 'lineHeight' ),
'margin' => array( 'spacing', 'margin' ),
'margin-top' => array( 'spacing', 'margin', 'top' ),
'margin-right' => array( 'spacing', 'margin', 'right' ),
'margin-bottom' => array( 'spacing', 'margin', 'bottom' ),
'margin-left' => array( 'spacing', 'margin', 'left' ),
'padding' => array( 'spacing', 'padding' ),
'padding-top' => array( 'spacing', 'padding', 'top' ),
'padding-right' => array( 'spacing', 'padding', 'right' ),
'padding-bottom' => array( 'spacing', 'padding', 'bottom' ),
'padding-left' => array( 'spacing', 'padding', 'left' ),
'--wp--style--block-gap' => array( 'spacing', 'blockGap' ),
'text-decoration' => array( 'typography', 'textDecoration' ),
'text-transform' => array( 'typography', 'textTransform' ),
'filter' => array( 'filter', 'duotone' ),
'background' => array( 'color', 'gradient' ),
'background-color' => array( 'color', 'background' ),
'border-radius' => array( 'border', 'radius' ),
'border-top-left-radius' => array( 'border', 'radius', 'topLeft' ),
'border-top-right-radius' => array( 'border', 'radius', 'topRight' ),
'border-bottom-left-radius' => array( 'border', 'radius', 'bottomLeft' ),
'border-bottom-right-radius' => array( 'border', 'radius', 'bottomRight' ),
'border-color' => array( 'border', 'color' ),
'border-width' => array( 'border', 'width' ),
'border-style' => array( 'border', 'style' ),
'border-top-color' => array( 'border', 'top', 'color' ),
'border-top-width' => array( 'border', 'top', 'width' ),
'border-top-style' => array( 'border', 'top', 'style' ),
'border-right-color' => array( 'border', 'right', 'color' ),
'border-right-width' => array( 'border', 'right', 'width' ),
'border-right-style' => array( 'border', 'right', 'style' ),
'border-bottom-color' => array( 'border', 'bottom', 'color' ),
'border-bottom-width' => array( 'border', 'bottom', 'width' ),
'border-bottom-style' => array( 'border', 'bottom', 'style' ),
'border-left-color' => array( 'border', 'left', 'color' ),
'border-left-width' => array( 'border', 'left', 'width' ),
'border-left-style' => array( 'border', 'left', 'style' ),
'color' => array( 'color', 'text' ),
'font-family' => array( 'typography', 'fontFamily' ),
'font-size' => array( 'typography', 'fontSize' ),
'font-style' => array( 'typography', 'fontStyle' ),
'font-weight' => array( 'typography', 'fontWeight' ),
'letter-spacing' => array( 'typography', 'letterSpacing' ),
'line-height' => array( 'typography', 'lineHeight' ),
'margin' => array( 'spacing', 'margin' ),
'margin-top' => array( 'spacing', 'margin', 'top' ),
'margin-right' => array( 'spacing', 'margin', 'right' ),
'margin-bottom' => array( 'spacing', 'margin', 'bottom' ),
'margin-left' => array( 'spacing', 'margin', 'left' ),
'padding' => array( 'spacing', 'padding' ),
'padding-top' => array( 'spacing', 'padding', 'top' ),
'padding-right' => array( 'spacing', 'padding', 'right' ),
'padding-bottom' => array( 'spacing', 'padding', 'bottom' ),
'padding-left' => array( 'spacing', 'padding', 'left' ),
'--wp--style--root--padding' => array( 'spacing', 'padding' ),
'--wp--style--root--padding-top' => array( 'spacing', 'padding', 'top' ),
'--wp--style--root--padding-right' => array( 'spacing', 'padding', 'right' ),
'--wp--style--root--padding-bottom' => array( 'spacing', 'padding', 'bottom' ),
'--wp--style--root--padding-left' => array( 'spacing', 'padding', 'left' ),
'--wp--style--block-gap' => array( 'spacing', 'blockGap' ),
'text-decoration' => array( 'typography', 'textDecoration' ),
'text-transform' => array( 'typography', 'textTransform' ),
'filter' => array( 'filter', 'duotone' ),
);

/**
Expand Down Expand Up @@ -202,14 +207,15 @@ class WP_Theme_JSON_6_0 extends WP_Theme_JSON_5_9 {
* @var array
*/
const VALID_SETTINGS = array(
'appearanceTools' => null,
'border' => array(
'appearanceTools' => null,
'useRootVariables' => null,
'border' => array(
'color' => null,
'radius' => null,
'style' => null,
'width' => null,
),
'color' => array(
'color' => array(
'background' => null,
'custom' => null,
'customDuotone' => null,
Expand All @@ -223,19 +229,19 @@ class WP_Theme_JSON_6_0 extends WP_Theme_JSON_5_9 {
'palette' => null,
'text' => null,
),
'custom' => null,
'layout' => array(
'custom' => null,
'layout' => array(
'contentSize' => null,
'wideSize' => null,
'padding' => null,
),
'spacing' => array(
'spacing' => array(
'blockGap' => null,
'margin' => null,
'padding' => null,
'units' => null,
),
'typography' => array(
'typography' => array(
'customFontSize' => null,
'dropCap' => null,
'fontFamilies' => null,
Expand Down Expand Up @@ -326,10 +332,11 @@ protected function get_block_classes( $style_nodes ) {
continue;
}

$node = _wp_array_get( $this->theme_json, $metadata['path'], array() );
$selector = $metadata['selector'];
$settings = _wp_array_get( $this->theme_json, array( 'settings' ) );
$declarations = static::compute_style_properties( $node, $settings );
$use_root_vars = _wp_array_get( $this->theme_json, array( 'settings', 'useRootVariables' ), array() );
$node = _wp_array_get( $this->theme_json, $metadata['path'], array() );
$selector = $metadata['selector'];
$settings = _wp_array_get( $this->theme_json, array( 'settings' ) );
$declarations = static::compute_style_properties( $node, $settings, null, $selector, $use_root_vars );

// 1. Separate the ones who use the general selector
// and the ones who use the duotone selector.
Expand Down Expand Up @@ -363,6 +370,16 @@ protected function get_block_classes( $style_nodes ) {
}

if ( static::ROOT_BLOCK_SELECTOR === $selector ) {
if ( $use_root_vars ) {
$block_rules .= '.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }';
$block_rules .= '.wp-site-blocks > * { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
$block_rules .= '.wp-site-blocks > * > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }';

// Alignfull blocks in the block editor that are direct children of post content should also get negative margins.
if ( is_callable( 'get_current_screen' ) && get_current_screen()->is_block_editor() ) {
$block_rules .= '.is-root-container > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }';
}
}
$block_rules .= '.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }';
$block_rules .= '.wp-site-blocks > .alignright { float: right; margin-left: 2em; }';
$block_rules .= '.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
Expand Down Expand Up @@ -530,6 +547,143 @@ protected static function get_metadata_boolean( $data, $path, $default = false )
return $default;
}

/**
* Given a styles array, it extracts the style properties
* and adds them to the $declarations array following the format:
*
* ```php
* array(
* 'name' => 'property_name',
* 'value' => 'property_value,
* )
* ```
*
* @param array $styles Styles to process.
* @param array $settings Theme settings.
* @param array $properties Properties metadata.
* @param string $selector Selector for styles.
* @param boolean $use_root_vars Whether to use root variables.
* @return array Returns the modified $declarations.
*/
protected static function compute_style_properties( $styles, $settings = array(), $properties = null, $selector = null, $use_root_vars = null ) {
if ( null === $properties ) {
$properties = static::PROPERTIES_METADATA;
}

$declarations = array();
$root_variable_duplicates = array();

if ( empty( $styles ) ) {
return $declarations;
}

foreach ( $properties as $css_property => $value_path ) {
$value = static::get_property_value( $styles, $value_path );

if ( strpos( $css_property, '--wp--style--root--' ) === 0 && static::ROOT_BLOCK_SELECTOR !== $selector ) {
continue;
}

if ( strpos( $css_property, '--wp--style--root--' ) === 0 && $use_root_vars ) {
$root_variable_duplicates[] = substr( $css_property, strlen( '--wp--style--root--' ) );
}

// Root padding requires special logic to split shorthand values.
if ( '--wp--style--root--padding' === $css_property && is_string( $value ) ) {

$shorthand_top = '0';
$shorthand_right = '0';
$shorthand_bottom = '0';
$shorthand_left = '0';

$separate_values = explode( ' ', $value );

switch ( count( $separate_values ) ) {
case 1:
$shorthand_top = $separate_values[0];
$shorthand_right = $separate_values[0];
$shorthand_bottom = $separate_values[0];
$shorthand_left = $separate_values[0];
break;
case 2:
$shorthand_top = $separate_values[0];
$shorthand_right = $separate_values[1];
$shorthand_bottom = $separate_values[0];
$shorthand_left = $separate_values[1];
break;
case 3:
$shorthand_top = $separate_values[0];
$shorthand_right = $separate_values[1];
$shorthand_bottom = $separate_values[2];
$shorthand_left = $separate_values[1];
break;
case 4:
$shorthand_top = $separate_values[0];
$shorthand_right = $separate_values[1];
$shorthand_bottom = $separate_values[2];
$shorthand_left = $separate_values[3];
break;
}

$all_properties = array(
array(
'name' => '--wp--style--root--padding-top',
'value' => $shorthand_top,
),
array(
'name' => '--wp--style--root--padding-right',
'value' => $shorthand_right,
),
array(
'name' => '--wp--style--root--padding-bottom',
'value' => $shorthand_bottom,
),
array(
'name' => '--wp--style--root--padding-left',
'value' => $shorthand_left,
),
);

$declarations = array_merge( $declarations, $all_properties );

continue;
}

// Look up protected properties, keyed by value path.
// Skip protected properties that are explicitly set to `null`.
if ( is_array( $value_path ) ) {
$path_string = implode( '.', $value_path );
if (
array_key_exists( $path_string, static::PROTECTED_PROPERTIES ) &&
_wp_array_get( $settings, static::PROTECTED_PROPERTIES[ $path_string ], null ) === null
) {
continue;
}
}

// Skip if empty and not "0" or value represents array of longhand values.
$has_missing_value = empty( $value ) && ! is_numeric( $value );
if ( $has_missing_value || is_array( $value ) ) {
continue;
}

$declarations[] = array(
'name' => $css_property,
'value' => $value,
);
}

// If a variable value is added to the root, the corresponding property should be removed.
foreach ( $root_variable_duplicates as $duplicate ) {
$discard = array_search( $duplicate, array_column( $declarations, 'name' ), true );
if ( $discard ) {
array_splice( $declarations, $discard, 1 );
}
}

return $declarations;
}

/**
* Returns a valid theme.json as provided by a theme.
*
Expand Down
1 change: 1 addition & 0 deletions lib/compat/wordpress-6.0/class-wp-theme-json-resolver-6-0.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
* @access private
*/
class WP_Theme_JSON_Resolver_6_0 extends WP_Theme_JSON_Resolver_5_9 {

/**
* Given a theme.json structure modifies it in place
* to update certain values by its translated strings
Expand Down
11 changes: 10 additions & 1 deletion 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 Expand Up @@ -240,6 +241,14 @@
}
},
"styles": {
"spacing": { "blockGap": "24px" }
"spacing": {
"blockGap": "24px",
"padding": {
"top": "var(--wp--style--block-gap)",
"right": "var(--wp--style--block-gap)",
"bottom": "var(--wp--style--block-gap)",
"left": "var(--wp--style--block-gap)"
}
}
}
}
16 changes: 16 additions & 0 deletions packages/block-editor/src/components/block-list/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -308,6 +308,22 @@
}
}

// Active entity spotlight.
// Disable if focus mode is active.
.is-root-container:not(.is-focus-mode) .block-editor-block-list__block.has-active-entity {
opacity: 0.5;
transition: opacity 0.1s linear;
@include reduce-motion("transition");

&.is-active-entity,
&.has-child-selected,
&:not(.has-child-selected) .block-editor-block-list__block,
&.is-active-entity .block-editor-block-list__block,
.is-active-entity .block-editor-block-list__block {
opacity: 1;
}
}

.wp-block[data-align="left"] > *,
.wp-block[data-align="right"] > *,
.wp-block.alignleft,
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 @@ -68,6 +68,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
Loading

0 comments on commit a13fa7a

Please sign in to comment.