From 4e3843bd0cf856481dfb82c91b82c0acc513cbac Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 31 Mar 2022 17:33:25 +1100 Subject: [PATCH] Try using variable for root padding value --- lib/block-supports/layout.php | 2 +- .../class-wp-theme-json-gutenberg.php | 43 +++ lib/compat/wordpress-6.0/theme.json | 253 ++++++++++++++++++ ...class-wp-theme-json-resolver-gutenberg.php | 17 ++ .../src/components/block-list/style.scss | 5 + packages/block-editor/src/hooks/style.js | 3 + packages/block-editor/src/layouts/flow.js | 2 +- packages/blocks/src/api/constants.js | 20 ++ .../global-styles/use-global-styles-output.js | 14 +- 9 files changed, 353 insertions(+), 6 deletions(-) create mode 100644 lib/compat/wordpress-6.0/theme.json diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index a04a2c4451c8ab..e7bd4c43fcf311 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -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;'; diff --git a/lib/compat/wordpress-6.0/class-wp-theme-json-gutenberg.php b/lib/compat/wordpress-6.0/class-wp-theme-json-gutenberg.php index b963477a30a9f5..40668eb234ff92 100644 --- a/lib/compat/wordpress-6.0/class-wp-theme-json-gutenberg.php +++ b/lib/compat/wordpress-6.0/class-wp-theme-json-gutenberg.php @@ -16,6 +16,46 @@ */ class WP_Theme_JSON_Gutenberg extends WP_Theme_JSON_5_9 { + /** + * Metadata for style properties. + * + * Each element is a direct mapping from the CSS property name to the + * 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' ), + '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' ), + '--wp--style--padding-top' => array( 'spacing', 'padding', 'top' ), + '--wp--style--padding-right' => array( 'spacing', 'padding', 'right' ), + '--wp--style--padding-bottom' => array( 'spacing', 'padding', 'bottom' ), + '--wp--style--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' ), + ); + /** * The top-level keys a theme.json can have. * @@ -104,6 +144,9 @@ protected function get_block_classes( $style_nodes ) { } if ( static::ROOT_BLOCK_SELECTOR === $selector ) { + $block_rules .= '.wp-site-blocks { padding-top: var(--wp--style--padding-top); padding-bottom: var(--wp--style--padding-bottom); }'; + $block_rules .= '.wp-site-blocks > * { padding-right: var(--wp--style--padding-right); padding-left: var(--wp--style--padding-left); }'; + $block_rules .= '.wp-site-blocks > * > .alignfull { margin-right: calc(var(--wp--style--padding-right) * -1); margin-left: calc(var(--wp--style--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; }'; diff --git a/lib/compat/wordpress-6.0/theme.json b/lib/compat/wordpress-6.0/theme.json new file mode 100644 index 00000000000000..a107593517f465 --- /dev/null +++ b/lib/compat/wordpress-6.0/theme.json @@ -0,0 +1,253 @@ +{ + "version": 2, + "settings": { + "appearanceTools": false, + "border": { + "color": false, + "radius": false, + "style": false, + "width": false + }, + "color": { + "background": true, + "custom": true, + "customDuotone": true, + "customGradient": true, + "defaultDuotone": true, + "defaultGradients": true, + "defaultPalette": true, + "duotone": [ + { + "name": "Dark grayscale", + "colors": [ "#000000", "#7f7f7f" ], + "slug": "dark-grayscale" + }, + { + "name": "Grayscale", + "colors": [ "#000000", "#ffffff" ], + "slug": "grayscale" + }, + { + "name": "Purple and yellow", + "colors": [ "#8c00b7", "#fcff41" ], + "slug": "purple-yellow" + }, + { + "name": "Blue and red", + "colors": [ "#000097", "#ff4747" ], + "slug": "blue-red" + }, + { + "name": "Midnight", + "colors": [ "#000000", "#00a5ff" ], + "slug": "midnight" + }, + { + "name": "Magenta and yellow", + "colors": [ "#c7005a", "#fff278" ], + "slug": "magenta-yellow" + }, + { + "name": "Purple and green", + "colors": [ "#a60072", "#67ff66" ], + "slug": "purple-green" + }, + { + "name": "Blue and orange", + "colors": [ "#1900d8", "#ffa96b" ], + "slug": "blue-orange" + } + ], + "gradients": [ + { + "name": "Vivid cyan blue to vivid purple", + "gradient": "linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)", + "slug": "vivid-cyan-blue-to-vivid-purple" + }, + { + "name": "Light green cyan to vivid green cyan", + "gradient": "linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)", + "slug": "light-green-cyan-to-vivid-green-cyan" + }, + { + "name": "Luminous vivid amber to luminous vivid orange", + "gradient": "linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)", + "slug": "luminous-vivid-amber-to-luminous-vivid-orange" + }, + { + "name": "Luminous vivid orange to vivid red", + "gradient": "linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)", + "slug": "luminous-vivid-orange-to-vivid-red" + }, + { + "name": "Very light gray to cyan bluish gray", + "gradient": "linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)", + "slug": "very-light-gray-to-cyan-bluish-gray" + }, + { + "name": "Cool to warm spectrum", + "gradient": "linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)", + "slug": "cool-to-warm-spectrum" + }, + { + "name": "Blush light purple", + "gradient": "linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)", + "slug": "blush-light-purple" + }, + { + "name": "Blush bordeaux", + "gradient": "linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)", + "slug": "blush-bordeaux" + }, + { + "name": "Luminous dusk", + "gradient": "linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)", + "slug": "luminous-dusk" + }, + { + "name": "Pale ocean", + "gradient": "linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)", + "slug": "pale-ocean" + }, + { + "name": "Electric grass", + "gradient": "linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%)", + "slug": "electric-grass" + }, + { + "name": "Midnight", + "gradient": "linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)", + "slug": "midnight" + } + ], + "link": false, + "palette": [ + { + "name": "Black", + "slug": "black", + "color": "#000000" + }, + { + "name": "Cyan bluish gray", + "slug": "cyan-bluish-gray", + "color": "#abb8c3" + }, + { + "name": "White", + "slug": "white", + "color": "#ffffff" + }, + { + "name": "Pale pink", + "slug": "pale-pink", + "color": "#f78da7" + }, + { + "name": "Vivid red", + "slug": "vivid-red", + "color": "#cf2e2e" + }, + { + "name": "Luminous vivid orange", + "slug": "luminous-vivid-orange", + "color": "#ff6900" + }, + { + "name": "Luminous vivid amber", + "slug": "luminous-vivid-amber", + "color": "#fcb900" + }, + { + "name": "Light green cyan", + "slug": "light-green-cyan", + "color": "#7bdcb5" + }, + { + "name": "Vivid green cyan", + "slug": "vivid-green-cyan", + "color": "#00d084" + }, + { + "name": "Pale cyan blue", + "slug": "pale-cyan-blue", + "color": "#8ed1fc" + }, + { + "name": "Vivid cyan blue", + "slug": "vivid-cyan-blue", + "color": "#0693e3" + }, + { + "name": "Vivid purple", + "slug": "vivid-purple", + "color": "#9b51e0" + } + ], + "text": true + }, + "spacing": { + "blockGap": null, + "margin": false, + "padding": false, + "units": [ "px", "em", "rem", "vh", "vw", "%" ] + }, + "typography": { + "customFontSize": true, + "dropCap": true, + "fontSizes": [ + { + "name": "Small", + "slug": "small", + "size": "13px" + }, + { + "name": "Medium", + "slug": "medium", + "size": "20px" + }, + { + "name": "Large", + "slug": "large", + "size": "36px" + }, + { + "name": "Extra Large", + "slug": "x-large", + "size": "42px" + } + ], + "fontStyle": true, + "fontWeight": true, + "letterSpacing": true, + "lineHeight": false, + "textDecoration": true, + "textTransform": true + }, + "blocks": { + "core/button": { + "border": { + "radius": true + } + }, + "core/pullquote": { + "border": { + "color": true, + "radius": true, + "style": true, + "width": true + } + } + } + }, + "styles": { + "spacing": { + "blockGap": "24px", + "padding": { + "top": "17px", + "right": "17px", + "bottom": "17px", + "left": "17px" + } + } + } +} diff --git a/lib/experimental/class-wp-theme-json-resolver-gutenberg.php b/lib/experimental/class-wp-theme-json-resolver-gutenberg.php index 7714b6256d136b..d123175679792f 100644 --- a/lib/experimental/class-wp-theme-json-resolver-gutenberg.php +++ b/lib/experimental/class-wp-theme-json-resolver-gutenberg.php @@ -16,6 +16,23 @@ * @access private */ class WP_Theme_JSON_Resolver_Gutenberg extends WP_Theme_JSON_Resolver_6_0 { + /** + * Return core's origin config. + * + * @return WP_Theme_JSON_Gutenberg Entity that holds core data. + */ + public static function get_core_data() { + if ( null !== static::$core ) { + return static::$core; + } + + $config = static::read_json_file( __DIR__ . '/theme.json' ); + $config = static::translate( $config ); + static::$core = new WP_Theme_JSON_Gutenberg( $config, 'default' ); + + return static::$core; + } + /** * Returns the theme's data. * diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index 73f1579de94d4a..6827dbdf8d968c 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -319,6 +319,11 @@ } } +.is-root-container > .alignfull { + margin-right: calc(var(--wp--style--padding-right) * -1); + margin-left: calc(var(--wp--style--padding-left) * -1); +} + .wp-block[data-align="left"] > *, .wp-block[data-align="right"] > *, .wp-block.alignleft, diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js index cf5626b6843152..ac413263d1e0d1 100644 --- a/packages/block-editor/src/hooks/style.js +++ b/packages/block-editor/src/hooks/style.js @@ -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. diff --git a/packages/block-editor/src/layouts/flow.js b/packages/block-editor/src/layouts/flow.js index 82851cb0150756..764cee2001dd3e 100644 --- a/packages/block-editor/src/layouts/flow.js +++ b/packages/block-editor/src/layouts/flow.js @@ -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; diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js index c9b8d3e0e8f1d3..f1bd0988a3e214 100644 --- a/packages/blocks/src/api/constants.js +++ b/packages/blocks/src/api/constants.js @@ -118,6 +118,26 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = { value: [ 'spacing', 'blockGap' ], support: [ 'spacing', 'blockGap' ], }, + '--wp--style--padding-top': { + value: [ 'spacing', 'padding', 'top' ], + support: [ 'spacing', 'padding' ], + rootOnly: true, + }, + '--wp--style--padding-right': { + value: [ 'spacing', 'padding', 'right' ], + support: [ 'spacing', 'padding' ], + rootOnly: true, + }, + '--wp--style--padding-bottom': { + value: [ 'spacing', 'padding', 'bottom' ], + support: [ 'spacing', 'padding' ], + rootOnly: true, + }, + '--wp--style--padding-left': { + value: [ 'spacing', 'padding', 'left' ], + support: [ 'spacing', 'padding' ], + rootOnly: true, + }, }; export const __EXPERIMENTAL_ELEMENTS = { diff --git a/packages/edit-site/src/components/global-styles/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/use-global-styles-output.js index 72ed5a5afe32e4..9c517fb5d4557b 100644 --- a/packages/edit-site/src/components/global-styles/use-global-styles-output.js +++ b/packages/edit-site/src/components/global-styles/use-global-styles-output.js @@ -142,11 +142,12 @@ 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 {boolean} isRoot Whether the styles apply to the root selector. * @return {Array} An array of style declarations. */ -function getStylesDeclarations( blockStyles = {} ) { +function getStylesDeclarations( blockStyles = {}, isRoot = false ) { const output = reduce( STYLE_PROPERTY, ( declarations, { value, properties, useEngine }, key ) => { @@ -190,6 +191,10 @@ function getStylesDeclarations( blockStyles = {} ) { [] ); + if ( isRoot ) { + 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' } ); @@ -334,9 +339,10 @@ export const toStyles = ( tree, blockSelectors ) => { const nodesWithSettings = getNodesWithSettings( tree, blockSelectors ); let ruleset = - '.wp-site-blocks > * { margin-top: 0; margin-bottom: 0; }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); }'; + 'body { padding-right: 0; padding-left: 0; } .wp-site-blocks > * { margin-top: 0; margin-bottom: 0; padding-right: var(--wp--style--padding-right); padding-left: var(--wp--style--padding-left); }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); }'; nodesWithStyles.forEach( ( { selector, styles } ) => { - const declarations = getStylesDeclarations( styles ); + const isRoot = ROOT_BLOCK_SELECTOR === selector; + const declarations = getStylesDeclarations( styles, isRoot ); if ( declarations.length === 0 ) { return; }