<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[50973] trunk: Block Editor: Add Global Styles support using theme.json file.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { white-space: pre-line; overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/50973">50973</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/50973","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>jorgefilipecosta</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2021-05-24 17:38:59 +0000 (Mon, 24 May 2021)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>Block Editor: Add Global Styles support using theme.json file.
This is the second piece of landing the theme.json processing in WordPress core.
It includes the mechanism that outputs the CSS styles of a theme.json file.
Props nosolosw, youknowriad.
See <a href="https://core.trac.wordpress.org/ticket/53175">#53175</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpincludesblockeditorphp">trunk/src/wp-includes/block-editor.php</a></li>
<li><a href="#trunksrcwpincludesclasswpthemejsonphp">trunk/src/wp-includes/class-wp-theme-json.php</a></li>
<li><a href="#trunksrcwpincludesdefaultfiltersphp">trunk/src/wp-includes/default-filters.php</a></li>
<li><a href="#trunksrcwpincludesscriptloaderphp">trunk/src/wp-includes/script-loader.php</a></li>
<li><a href="#trunktestsphpunitteststhemewpThemeJsonphp">trunk/tests/phpunit/tests/theme/wpThemeJson.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpincludesblockeditorphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/block-editor.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/block-editor.php 2021-05-24 15:36:45 UTC (rev 50972)
+++ trunk/src/wp-includes/block-editor.php 2021-05-24 17:38:59 UTC (rev 50973)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -243,8 +243,17 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $custom_settings
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $editor_settings['__experimentalFeatures'] = WP_Theme_JSON_Resolver::get_merged_data( $editor_settings )->get_settings();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $theme_json = WP_Theme_JSON_Resolver::get_merged_data( $editor_settings );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( WP_Theme_JSON_Resolver::theme_has_support() ) {
+ $editor_settings['styles'][] = array( 'css' => $theme_json->get_stylesheet( 'block_styles' ) );
+ $editor_settings['styles'][] = array(
+ 'css' => $theme_json->get_stylesheet( 'css_variables' ),
+ '__experimentalNoWrapper' => true,
+ );
+ }
+
+ $editor_settings['__experimentalFeatures'] = $theme_json->get_settings();
</ins><span class="cx" style="display: block; padding: 0 10px"> // These settings may need to be updated based on data coming from theme.json sources.
</span><span class="cx" style="display: block; padding: 0 10px"> if ( isset( $editor_settings['__experimentalFeatures']['color']['palette'] ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> $editor_settings['colors'] = $editor_settings['__experimentalFeatures']['color']['palette'];
</span></span></pre></div>
<a id="trunksrcwpincludesclasswpthemejsonphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/class-wp-theme-json.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/class-wp-theme-json.php 2021-05-24 15:36:45 UTC (rev 50972)
+++ trunk/src/wp-includes/class-wp-theme-json.php 2021-05-24 17:38:59 UTC (rev 50973)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -23,19 +23,149 @@
</span><span class="cx" style="display: block; padding: 0 10px"> private $theme_json = null;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * Holds the allowed block names extracted from block.json.
- * Shared among all instances so we only process it once.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Holds block metadata extracted from block.json
+ * to be shared among all instances so we don't
+ * process it twice.
</ins><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 5.8.0
</span><span class="cx" style="display: block; padding: 0 10px"> * @var array
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- private static $allowed_block_names = null;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ private static $blocks_metadata = null;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * The CSS selector for the top-level styles.
+ *
+ * @since 5.8.0
+ * @var string
+ */
+ const ROOT_BLOCK_SELECTOR = 'body';
+
+ /**
+ * Presets are a set of values that serve
+ * to bootstrap some styles: colors, font sizes, etc.
+ *
+ * They are a unkeyed array of values such as:
+ *
+ * ```php
+ * array(
+ * array(
+ * 'slug' => 'unique-name-within-the-set',
+ * 'name' => 'Name for the UI',
+ * <value_key> => 'value'
+ * ),
+ * )
+ * ```
+ *
+ * This contains the necessary metadata to process them:
+ *
+ * - path => where to find the preset within the settings section
+ *
+ * - value_key => the key that represents the value
+ *
+ * - css_var_infix => infix to use in generating the CSS Custom Property. Example:
+ * --wp--preset--<preset_infix>--<slug>: <preset_value>
+ *
+ * - classes => array containing a structure with the classes to
+ * generate for the presets. Each class should have
+ * the class suffix and the property name. Example:
+ *
+ * .has-<slug>-<class_suffix> {
+ * <property_name>: <preset_value>
+ * }
+ *
+ * @since 5.8.0
+ * @var array
+ */
+ const PRESETS_METADATA = array(
+ array(
+ 'path' => array( 'color', 'palette' ),
+ 'value_key' => 'color',
+ 'css_var_infix' => 'color',
+ 'classes' => array(
+ array(
+ 'class_suffix' => 'color',
+ 'property_name' => 'color',
+ ),
+ array(
+ 'class_suffix' => 'background-color',
+ 'property_name' => 'background-color',
+ ),
+ ),
+ ),
+ array(
+ 'path' => array( 'color', 'gradients' ),
+ 'value_key' => 'gradient',
+ 'css_var_infix' => 'gradient',
+ 'classes' => array(
+ array(
+ 'class_suffix' => 'gradient-background',
+ 'property_name' => 'background',
+ ),
+ ),
+ ),
+ array(
+ 'path' => array( 'typography', 'fontSizes' ),
+ 'value_key' => 'size',
+ 'css_var_infix' => 'font-size',
+ 'classes' => array(
+ array(
+ 'class_suffix' => 'font-size',
+ 'property_name' => 'font-size',
+ ),
+ ),
+ ),
+ );
+
+ /**
+ * Metadata for style properties.
+ *
+ * Each property declares:
+ *
+ * - 'value': path to the value in theme.json and block attributes.
+ *
+ * @since 5.8.0
+ * @var array
+ */
+ const PROPERTIES_METADATA = array(
+ 'background' => array(
+ 'value' => array( 'color', 'gradient' ),
+ ),
+ 'background-color' => array(
+ 'value' => array( 'color', 'background' ),
+ ),
+ 'color' => array(
+ 'value' => array( 'color', 'text' ),
+ ),
+ 'font-size' => array(
+ 'value' => array( 'typography', 'fontSize' ),
+ ),
+ 'line-height' => array(
+ 'value' => array( 'typography', 'lineHeight' ),
+ ),
+ 'margin' => array(
+ 'value' => array( 'spacing', 'margin' ),
+ 'properties' => array( 'top', 'right', 'bottom', 'left' ),
+ ),
+ 'padding' => array(
+ 'value' => array( 'spacing', 'padding' ),
+ 'properties' => array( 'top', 'right', 'bottom', 'left' ),
+ ),
+ );
+
+ /**
+ * @since 5.8.0
+ * @var array
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> const ALLOWED_TOP_LEVEL_KEYS = array(
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'settings',
+ 'styles',
</ins><span class="cx" style="display: block; padding: 0 10px"> 'version',
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 'settings',
</del><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * @since 5.8.0
+ * @var array
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> const ALLOWED_SETTINGS = array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'color' => array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'custom' => null,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -60,6 +190,54 @@
</span><span class="cx" style="display: block; padding: 0 10px"> ),
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * @since 5.8.0
+ * @var array
+ */
+ const ALLOWED_STYLES = array(
+ 'color' => array(
+ 'background' => null,
+ 'gradient' => null,
+ 'text' => null,
+ ),
+ 'spacing' => array(
+ 'margin' => array(
+ 'top' => null,
+ 'right' => null,
+ 'bottom' => null,
+ 'left' => null,
+ ),
+ 'padding' => array(
+ 'bottom' => null,
+ 'left' => null,
+ 'right' => null,
+ 'top' => null,
+ ),
+ ),
+ 'typography' => array(
+ 'fontSize' => null,
+ 'lineHeight' => null,
+ ),
+ );
+
+ /**
+ * @since 5.8.0
+ * @var array
+ */
+ const ELEMENTS = array(
+ 'link' => 'a',
+ 'h1' => 'h1',
+ 'h2' => 'h2',
+ 'h3' => 'h3',
+ 'h4' => 'h4',
+ 'h5' => 'h5',
+ 'h6' => 'h6',
+ );
+
+ /**
+ * @since 5.8.0
+ * @var int
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> const LATEST_SCHEMA = 1;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -79,23 +257,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * Returns the allowed block names.
- *
- * @since 5.8.0
- *
- * @return array
- */
- private static function get_allowed_block_names() {
- if ( null !== self::$allowed_block_names ) {
- return self::$allowed_block_names;
- }
-
- self::$allowed_block_names = array_keys( WP_Block_Type_Registry::get_instance()->get_all_registered() );
-
- return self::$allowed_block_names;
- }
-
- /**
</del><span class="cx" style="display: block; padding: 0 10px"> * Sanitizes the input according to the schemas.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 5.8.0
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -110,21 +271,35 @@
</span><span class="cx" style="display: block; padding: 0 10px"> return $output;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $allowed_blocks = self::get_allowed_block_names();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $allowed_top_level_keys = self::ALLOWED_TOP_LEVEL_KEYS;
+ $allowed_settings = self::ALLOWED_SETTINGS;
+ $allowed_styles = self::ALLOWED_STYLES;
+ $allowed_blocks = array_keys( self::get_blocks_metadata() );
+ $allowed_elements = array_keys( self::ELEMENTS );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $output = array_intersect_key( $input, array_flip( self::ALLOWED_TOP_LEVEL_KEYS ) );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $output = array_intersect_key( $input, array_flip( $allowed_top_level_keys ) );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Build the schema.
</span><span class="cx" style="display: block; padding: 0 10px"> $schema = array();
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $schema_styles_elements = array();
+ foreach ( $allowed_elements as $element ) {
+ $schema_styles_elements[ $element ] = $allowed_styles;
+ }
+ $schema_styles_blocks = array();
</ins><span class="cx" style="display: block; padding: 0 10px"> $schema_settings_blocks = array();
</span><span class="cx" style="display: block; padding: 0 10px"> foreach ( $allowed_blocks as $block ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $schema_settings_blocks[ $block ] = self::ALLOWED_SETTINGS;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $schema_settings_blocks[ $block ] = $allowed_settings;
+ $schema_styles_blocks[ $block ] = $allowed_styles;
+ $schema_styles_blocks[ $block ]['elements'] = $schema_styles_elements;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $schema['settings'] = self::ALLOWED_SETTINGS;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $schema['styles'] = $allowed_styles;
+ $schema['styles']['blocks'] = $schema_styles_blocks;
+ $schema['styles']['elements'] = $schema_styles_elements;
+ $schema['settings'] = $allowed_settings;
</ins><span class="cx" style="display: block; padding: 0 10px"> $schema['settings']['blocks'] = $schema_settings_blocks;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Remove anything that's not present in the schema.
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- foreach ( array( 'settings' ) as $subtree ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ foreach ( array( 'styles', 'settings' ) as $subtree ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( ! isset( $input[ $subtree ] ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> continue;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -147,6 +322,68 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Returns the metadata for each block.
+ *
+ * Example:
+ *
+ * {
+ * 'core/paragraph': {
+ * 'selector': 'p',
+ * 'elements': {
+ * 'link' => 'link selector',
+ * 'etc' => 'element selector'
+ * }
+ * },
+ * 'core/heading': {
+ * 'selector': 'h1',
+ * 'elements': {}
+ * }
+ * 'core/group': {
+ * 'selector': '.wp-block-group',
+ * 'elements': {}
+ * }
+ * }
+ *
+ * @since 5.8.0
+ *
+ * @return array Block metadata.
+ */
+ private static function get_blocks_metadata() {
+ if ( null !== self::$blocks_metadata ) {
+ return self::$blocks_metadata;
+ }
+
+ self::$blocks_metadata = array();
+
+ $registry = WP_Block_Type_Registry::get_instance();
+ $blocks = $registry->get_all_registered();
+ foreach ( $blocks as $block_name => $block_type ) {
+ if (
+ isset( $block_type->supports['__experimentalSelector'] ) &&
+ is_string( $block_type->supports['__experimentalSelector'] )
+ ) {
+ self::$blocks_metadata[ $block_name ]['selector'] = $block_type->supports['__experimentalSelector'];
+ } else {
+ self::$blocks_metadata[ $block_name ]['selector'] = '.wp-block-' . str_replace( '/', '-', str_replace( 'core/', '', $block_name ) );
+ }
+
+ // Assign defaults, then overwrite those that the block sets by itself.
+ // If the block selector is compounded, will append the element to each
+ // individual block selector.
+ $block_selectors = explode( ',', self::$blocks_metadata[ $block_name ]['selector'] );
+ foreach ( self::ELEMENTS as $el_name => $el_selector ) {
+ $element_selector = array();
+ foreach ( $block_selectors as $selector ) {
+ $element_selector[] = $selector . ' ' . $el_selector;
+ }
+ self::$blocks_metadata[ $block_name ]['elements'][ $el_name ] = implode( ',', $element_selector );
+ }
+ }
+
+ return self::$blocks_metadata;
+ }
+
+ /**
</ins><span class="cx" style="display: block; padding: 0 10px"> * Given a tree, removes the keys that are not present in the schema.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * It is recursive and modifies the input in-place.
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -155,6 +392,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @param array $tree Input to process.
</span><span class="cx" style="display: block; padding: 0 10px"> * @param array $schema Schema to adhere to.
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ *
</ins><span class="cx" style="display: block; padding: 0 10px"> * @return array Returns the modified $tree.
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> private static function remove_keys_not_in_schema( $tree, $schema ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -210,23 +448,465 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Returns the stylesheet that results of processing
+ * the theme.json structure this object represents.
+ *
+ * @since 5.8.0
+ *
+ * @param string $type Type of stylesheet we want accepts 'all', 'block_styles', and 'css_variables'.
+ *
+ * @return string Stylesheet.
+ */
+ public function get_stylesheet( $type = 'all' ) {
+ $blocks_metadata = self::get_blocks_metadata();
+ $style_nodes = self::get_style_nodes( $this->theme_json, $blocks_metadata );
+ $setting_nodes = self::get_setting_nodes( $this->theme_json, $blocks_metadata );
+
+ switch ( $type ) {
+ case 'block_styles':
+ return $this->get_block_styles( $style_nodes, $setting_nodes );
+ case 'css_variables':
+ return $this->get_css_variables( $setting_nodes );
+ default:
+ return $this->get_css_variables( $setting_nodes ) . $this->get_block_styles( $style_nodes, $setting_nodes );
+ }
+
+ }
+
+ /**
+ * Converts each style section into a list of rulesets
+ * containing the block styles to be appended to the stylesheet.
+ *
+ * See glossary at https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax
+ *
+ * For each section this creates a new ruleset such as:
+ *
+ * block-selector {
+ * style-property-one: value;
+ * }
+ *
+ * Additionally, it'll also create new rulesets
+ * as classes for each preset value such as:
+ *
+ * .has-value-color {
+ * color: value;
+ * }
+ *
+ * .has-value-background-color {
+ * background-color: value;
+ * }
+ *
+ * .has-value-font-size {
+ * font-size: value;
+ * }
+ *
+ * .has-value-gradient-background {
+ * background: value;
+ * }
+ *
+ * p.has-value-gradient-background {
+ * background: value;
+ * }
+ *
+ * @since 5.8.0
+ *
+ * @param array $style_nodes Nodes with styles.
+ * @param array $setting_nodes Nodes with settings.
+ *
+ * @return string The new stylesheet.
+ */
+ private function get_block_styles( $style_nodes, $setting_nodes ) {
+ $block_rules = '';
+ foreach ( $style_nodes as $metadata ) {
+ if ( null === $metadata['selector'] ) {
+ continue;
+ }
+
+ $node = _wp_array_get( $this->theme_json, $metadata['path'], array() );
+ $selector = $metadata['selector'];
+ $declarations = self::compute_style_properties( $node );
+ $block_rules .= self::to_ruleset( $selector, $declarations );
+ }
+
+ $preset_rules = '';
+ foreach ( $setting_nodes as $metadata ) {
+ if ( null === $metadata['selector'] ) {
+ continue;
+ }
+
+ $selector = $metadata['selector'];
+ $node = _wp_array_get( $this->theme_json, $metadata['path'], array() );
+ $preset_rules .= self::compute_preset_classes( $node, $selector );
+ }
+
+ return $block_rules . $preset_rules;
+ }
+
+ /**
+ * Converts each styles section into a list of rulesets
+ * to be appended to the stylesheet.
+ * These rulesets contain all the css variables (custom variables and preset variables).
+ *
+ * See glossary at https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax
+ *
+ * For each section this creates a new ruleset such as:
+ *
+ * block-selector {
+ * --wp--preset--category--slug: value;
+ * --wp--custom--variable: value;
+ * }
+ *
+ * @since 5.8.0
+ *
+ * @param array $nodes Nodes with settings.
+ *
+ * @return string The new stylesheet.
+ */
+ private function get_css_variables( $nodes ) {
+ $stylesheet = '';
+ foreach ( $nodes as $metadata ) {
+ if ( null === $metadata['selector'] ) {
+ continue;
+ }
+
+ $selector = $metadata['selector'];
+
+ $node = _wp_array_get( $this->theme_json, $metadata['path'], array() );
+ $declarations = array_merge( self::compute_preset_vars( $node ), self::compute_theme_vars( $node ) );
+
+ $stylesheet .= self::to_ruleset( $selector, $declarations );
+ }
+
+ return $stylesheet;
+ }
+
+ /**
+ * Given a selector and a declaration list,
+ * creates the corresponding ruleset.
+ *
+ * To help debugging, will add some space
+ * if SCRIPT_DEBUG is defined and true.
+ *
+ * @since 5.8.0
+ *
+ * @param string $selector CSS selector.
+ * @param array $declarations List of declarations.
+ *
+ * @return string CSS ruleset.
+ */
+ private static function to_ruleset( $selector, $declarations ) {
+ if ( empty( $declarations ) ) {
+ return '';
+ }
+
+ $declaration_block = array_reduce(
+ $declarations,
+ function ( $carry, $element ) {
+ return $carry .= $element['name'] . ': ' . $element['value'] . ';'; },
+ ''
+ );
+
+ return $selector . '{' . $declaration_block . '}';
+ }
+
+ /**
+ * Given a settings array, it returns the generated rulesets
+ * for the preset classes.
+ *
+ * @since 5.8.0
+ *
+ * @param array $settings Settings to process.
+ * @param string $selector Selector wrapping the classes.
+ *
+ * @return string The result of processing the presets.
+ */
+ private static function compute_preset_classes( $settings, $selector ) {
+ if ( self::ROOT_BLOCK_SELECTOR === $selector ) {
+ // Classes at the global level do not need any CSS prefixed,
+ // and we don't want to increase its specificity.
+ $selector = '';
+ }
+
+ $stylesheet = '';
+ foreach ( self::PRESETS_METADATA as $preset ) {
+ $values = _wp_array_get( $settings, $preset['path'], array() );
+ foreach ( $values as $value ) {
+ foreach ( $preset['classes'] as $class ) {
+ $stylesheet .= self::to_ruleset(
+ $selector . '.has-' . $value['slug'] . '-' . $class['class_suffix'],
+ array(
+ array(
+ 'name' => $class['property_name'],
+ 'value' => $value[ $preset['value_key'] ] . ' !important',
+ ),
+ )
+ );
+ }
+ }
+ }
+
+ return $stylesheet;
+ }
+
+ /**
+ * Given the block settings, it extracts the CSS Custom Properties
+ * for the presets and adds them to the $declarations array
+ * following the format:
+ *
+ * ```php
+ * array(
+ * 'name' => 'property_name',
+ * 'value' => 'property_value,
+ * )
+ * ```
+ *
+ * @since 5.8.0
+ *
+ * @param array $settings Settings to process.
+ *
+ * @return array Returns the modified $declarations.
+ */
+ private static function compute_preset_vars( $settings ) {
+ $declarations = array();
+ foreach ( self::PRESETS_METADATA as $preset ) {
+ $values = _wp_array_get( $settings, $preset['path'], array() );
+ foreach ( $values as $value ) {
+ $declarations[] = array(
+ 'name' => '--wp--preset--' . $preset['css_var_infix'] . '--' . $value['slug'],
+ 'value' => $value[ $preset['value_key'] ],
+ );
+ }
+ }
+
+ return $declarations;
+ }
+
+ /**
+ * Given an array of settings, it extracts the CSS Custom Properties
+ * for the custom values and adds them to the $declarations
+ * array following the format:
+ *
+ * ```php
+ * array(
+ * 'name' => 'property_name',
+ * 'value' => 'property_value,
+ * )
+ * ```
+ *
+ * @since 5.8.0
+ *
+ * @param array $settings Settings to process.
+ *
+ * @return array Returns the modified $declarations.
+ */
+ private static function compute_theme_vars( $settings ) {
+ $declarations = array();
+ $custom_values = _wp_array_get( $settings, array( 'custom' ), array() );
+ $css_vars = self::flatten_tree( $custom_values );
+ foreach ( $css_vars as $key => $value ) {
+ $declarations[] = array(
+ 'name' => '--wp--custom--' . $key,
+ 'value' => $value,
+ );
+ }
+
+ return $declarations;
+ }
+
+ /**
+ * Given a tree, it creates a flattened one
+ * by merging the keys and binding the leaf values
+ * to the new keys.
+ *
+ * It also transforms camelCase names into kebab-case
+ * and substitutes '/' by '-'.
+ *
+ * This is thought to be useful to generate
+ * CSS Custom Properties from a tree,
+ * although there's nothing in the implementation
+ * of this function that requires that format.
+ *
+ * For example, assuming the given prefix is '--wp'
+ * and the token is '--', for this input tree:
+ *
+ * {
+ * 'some/property': 'value',
+ * 'nestedProperty': {
+ * 'sub-property': 'value'
+ * }
+ * }
+ *
+ * it'll return this output:
+ *
+ * {
+ * '--wp--some-property': 'value',
+ * '--wp--nested-property--sub-property': 'value'
+ * }
+ *
+ * @since 5.8.0
+ *
+ * @param array $tree Input tree to process.
+ * @param string $prefix Prefix to prepend to each variable. '' by default.
+ * @param string $token Token to use between levels. '--' by default.
+ *
+ * @return array The flattened tree.
+ */
+ private static function flatten_tree( $tree, $prefix = '', $token = '--' ) {
+ $result = array();
+ foreach ( $tree as $property => $value ) {
+ $new_key = $prefix . str_replace(
+ '/',
+ '-',
+ strtolower( preg_replace( '/(?<!^)[A-Z]/', '-$0', $property ) ) // CamelCase to kebab-case.
+ );
+
+ if ( is_array( $value ) ) {
+ $new_prefix = $new_key . $token;
+ $result = array_merge(
+ $result,
+ self::flatten_tree( $value, $new_prefix, $token )
+ );
+ } else {
+ $result[ $new_key ] = $value;
+ }
+ }
+ return $result;
+ }
+
+ /**
+ * 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,
+ * )
+ * ```
+ *
+ * @since 5.8.0
+ *
+ * @param array $styles Styles to process.
+ *
+ * @return array Returns the modified $declarations.
+ */
+ private static function compute_style_properties( $styles ) {
+ $declarations = array();
+ if ( empty( $styles ) ) {
+ return $declarations;
+ }
+
+ $properties = array();
+ foreach ( self::PROPERTIES_METADATA as $name => $metadata ) {
+ // Some properties can be shorthand properties, meaning that
+ // they contain multiple values instead of a single one.
+ // An example of this is the padding property.
+ if ( self::has_properties( $metadata ) ) {
+ foreach ( $metadata['properties'] as $property ) {
+ $properties[] = array(
+ 'name' => $name . '-' . $property,
+ 'value' => array_merge( $metadata['value'], array( $property ) ),
+ );
+ }
+ } else {
+ $properties[] = array(
+ 'name' => $name,
+ 'value' => $metadata['value'],
+ );
+ }
+ }
+
+ foreach ( $properties as $prop ) {
+ $value = self::get_property_value( $styles, $prop['value'] );
+ if ( empty( $value ) ) {
+ continue;
+ }
+
+ $declarations[] = array(
+ 'name' => $prop['name'],
+ 'value' => $value,
+ );
+ }
+
+ return $declarations;
+ }
+
+ /**
+ * Whether the metadata contains a key named properties.
+ *
+ * @since 5.8.0
+ *
+ * @param array $metadata Description of the style property.
+ *
+ * @return boolean True if properties exists, false otherwise.
+ */
+ private static function has_properties( $metadata ) {
+ if ( array_key_exists( 'properties', $metadata ) ) {
+ return true;
+ }
+
+ return false;
+ }
+
+ /**
+ * Returns the style property for the given path.
+ *
+ * It also converts CSS Custom Property stored as
+ * "var:preset|color|secondary" to the form
+ * "--wp--preset--color--secondary".
+ *
+ * @since 5.8.0
+ *
+ * @param array $styles Styles subtree.
+ * @param array $path Which property to process.
+ *
+ * @return string Style property value.
+ */
+ private static function get_property_value( $styles, $path ) {
+ $value = _wp_array_get( $styles, $path, '' );
+
+ if ( '' === $value ) {
+ return $value;
+ }
+
+ $prefix = 'var:';
+ $prefix_len = strlen( $prefix );
+ $token_in = '|';
+ $token_out = '--';
+ if ( 0 === strncmp( $value, $prefix, $prefix_len ) ) {
+ $unwrapped_name = str_replace(
+ $token_in,
+ $token_out,
+ substr( $value, $prefix_len )
+ );
+ $value = "var(--wp--$unwrapped_name)";
+ }
+
+ return $value;
+ }
+
+ /**
</ins><span class="cx" style="display: block; padding: 0 10px"> * Builds metadata for the setting nodes, which returns in the form of:
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * [
- * [
- * 'path' => ['path', 'to', 'some', 'node' ]
- * ],
- * [
- * 'path' => [ 'path', 'to', 'other', 'node' ]
- * ],
- * ]
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * [
+ * [
+ * 'path' => ['path', 'to', 'some', 'node' ],
+ * 'selector' => 'CSS selector for some node'
+ * ],
+ * [
+ * 'path' => [ 'path', 'to', 'other', 'node' ],
+ * 'selector' => 'CSS selector for other node'
+ * ],
+ * ]
</ins><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 5.8.0
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @param array $theme_json The tree to extract setting nodes from.
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * @param array $selectors List of selectors per block.
+ *
</ins><span class="cx" style="display: block; padding: 0 10px"> * @return array
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- private static function get_setting_nodes( $theme_json ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ private static function get_setting_nodes( $theme_json, $selectors = array() ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> $nodes = array();
</span><span class="cx" style="display: block; padding: 0 10px"> if ( ! isset( $theme_json['settings'] ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> return $nodes;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -234,7 +914,8 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Top-level.
</span><span class="cx" style="display: block; padding: 0 10px"> $nodes[] = array(
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 'path' => array( 'settings' ),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'path' => array( 'settings' ),
+ 'selector' => self::ROOT_BLOCK_SELECTOR,
</ins><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Calculate paths for blocks.
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -243,8 +924,14 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> foreach ( $theme_json['settings']['blocks'] as $name => $node ) {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $selector = null;
+ if ( isset( $selectors[ $name ]['selector'] ) ) {
+ $selector = $selectors[ $name ]['selector'];
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> $nodes[] = array(
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 'path' => array( 'settings', 'blocks', $name ),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'path' => array( 'settings', 'blocks', $name ),
+ 'selector' => $selector,
</ins><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -251,7 +938,79 @@
</span><span class="cx" style="display: block; padding: 0 10px"> return $nodes;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
</ins><span class="cx" style="display: block; padding: 0 10px"> /**
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Builds metadata for the style nodes, which returns in the form of:
+ *
+ * [
+ * [
+ * 'path' => [ 'path', 'to', 'some', 'node' ],
+ * 'selector' => 'CSS selector for some node'
+ * ],
+ * [
+ * 'path' => ['path', 'to', 'other', 'node' ],
+ * 'selector' => 'CSS selector for other node'
+ * ],
+ * ]
+ *
+ * @since 5.8.0
+ *
+ * @param array $theme_json The tree to extract style nodes from.
+ * @param array $selectors List of selectors per block.
+ *
+ * @return array
+ */
+ private static function get_style_nodes( $theme_json, $selectors = array() ) {
+ $nodes = array();
+ if ( ! isset( $theme_json['styles'] ) ) {
+ return $nodes;
+ }
+
+ // Top-level.
+ $nodes[] = array(
+ 'path' => array( 'styles' ),
+ 'selector' => self::ROOT_BLOCK_SELECTOR,
+ );
+
+ if ( isset( $theme_json['styles']['elements'] ) ) {
+ foreach ( $theme_json['styles']['elements'] as $element => $node ) {
+ $nodes[] = array(
+ 'path' => array( 'styles', 'elements', $element ),
+ 'selector' => self::ELEMENTS[ $element ],
+ );
+ }
+ }
+
+ // Blocks.
+ if ( ! isset( $theme_json['styles']['blocks'] ) ) {
+ return $nodes;
+ }
+
+ foreach ( $theme_json['styles']['blocks'] as $name => $node ) {
+ $selector = null;
+ if ( isset( $selectors[ $name ]['selector'] ) ) {
+ $selector = $selectors[ $name ]['selector'];
+ }
+
+ $nodes[] = array(
+ 'path' => array( 'styles', 'blocks', $name ),
+ 'selector' => $selector,
+ );
+
+ if ( isset( $theme_json['styles']['blocks'][ $name ]['elements'] ) ) {
+ foreach ( $theme_json['styles']['blocks'][ $name ]['elements'] as $element => $node ) {
+ $nodes[] = array(
+ 'path' => array( 'styles', 'blocks', $name, 'elements', $element ),
+ 'selector' => $selectors[ $name ]['elements'][ $element ],
+ );
+ }
+ }
+ }
+
+ return $nodes;
+ }
+
+ /**
</ins><span class="cx" style="display: block; padding: 0 10px"> * Merge new incoming data.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 5.8.0
</span></span></pre></div>
<a id="trunksrcwpincludesdefaultfiltersphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/default-filters.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/default-filters.php 2021-05-24 15:36:45 UTC (rev 50972)
+++ trunk/src/wp-includes/default-filters.php 2021-05-24 17:38:59 UTC (rev 50973)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -535,6 +535,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> add_action( 'wp_enqueue_scripts', 'wp_localize_jquery_ui_datepicker', 1000 );
</span><span class="cx" style="display: block; padding: 0 10px"> add_action( 'wp_enqueue_scripts', 'wp_common_block_scripts_and_styles' );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+add_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles' );
</ins><span class="cx" style="display: block; padding: 0 10px"> add_action( 'admin_enqueue_scripts', 'wp_localize_jquery_ui_datepicker', 1000 );
</span><span class="cx" style="display: block; padding: 0 10px"> add_action( 'admin_enqueue_scripts', 'wp_common_block_scripts_and_styles' );
</span><span class="cx" style="display: block; padding: 0 10px"> add_action( 'enqueue_block_assets', 'wp_enqueue_registered_block_scripts_and_styles' );
</span></span></pre></div>
<a id="trunksrcwpincludesscriptloaderphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/script-loader.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/script-loader.php 2021-05-24 15:36:45 UTC (rev 50972)
+++ trunk/src/wp-includes/script-loader.php 2021-05-24 17:38:59 UTC (rev 50973)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2233,6 +2233,52 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Enqueues the global styles defined via theme.json.
+ *
+ * @since 5.8.0
+ *
+ * @return void
+ */
+function wp_enqueue_global_styles() {
+ if ( ! WP_Theme_JSON_Resolver::theme_has_support() ) {
+ return;
+ }
+
+ $can_use_cache = (
+ ( ! defined( 'WP_DEBUG' ) || ! WP_DEBUG ) &&
+ ( ! defined( 'SCRIPT_DEBUG' ) || ! SCRIPT_DEBUG ) &&
+ ( ! defined( 'REST_REQUEST' ) || ! REST_REQUEST ) &&
+ ! is_admin()
+ );
+
+ $stylesheet = null;
+ if ( $can_use_cache ) {
+ $cache = get_transient( 'global_styles' );
+ if ( $cache ) {
+ $stylesheet = $cache;
+ }
+ }
+
+ if ( null === $stylesheet ) {
+ $settings = get_default_block_editor_settings();
+ $theme_json = WP_Theme_JSON_Resolver::get_merged_data( $settings );
+ $stylesheet = $theme_json->get_stylesheet();
+
+ if ( $can_use_cache ) {
+ set_transient( 'global_styles', $stylesheet, MINUTE_IN_SECONDS );
+ }
+ }
+
+ if ( empty( $stylesheet ) ) {
+ return;
+ }
+
+ wp_register_style( 'global-styles', false, array(), true, true );
+ wp_add_inline_style( 'global-styles', $stylesheet );
+ wp_enqueue_style( 'global-styles' );
+}
+
+/**
</ins><span class="cx" style="display: block; padding: 0 10px"> * Checks if the editor scripts and styles for all registered block types
</span><span class="cx" style="display: block; padding: 0 10px"> * should be enqueued on the current screen.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span></span></pre></div>
<a id="trunktestsphpunitteststhemewpThemeJsonphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/tests/phpunit/tests/theme/wpThemeJson.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/phpunit/tests/theme/wpThemeJson.php 2021-05-24 15:36:45 UTC (rev 50972)
+++ trunk/tests/phpunit/tests/theme/wpThemeJson.php 2021-05-24 17:38:59 UTC (rev 50973)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -34,8 +34,12 @@
</span><span class="cx" style="display: block; padding: 0 10px"> ),
</span><span class="cx" style="display: block; padding: 0 10px"> ),
</span><span class="cx" style="display: block; padding: 0 10px"> 'styles' => array(
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 'color' => array(
- 'link' => 'blue',
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'elements' => array(
+ 'link' => array(
+ 'color' => array(
+ 'text' => '#111',
+ ),
+ ),
</ins><span class="cx" style="display: block; padding: 0 10px"> ),
</span><span class="cx" style="display: block; padding: 0 10px"> ),
</span><span class="cx" style="display: block; padding: 0 10px"> )
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -59,6 +63,189 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertEqualSetsWithIndex( $expected, $actual );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ function test_get_stylesheet() {
+ $theme_json = new WP_Theme_JSON(
+ array(
+ 'version' => WP_Theme_JSON::LATEST_SCHEMA,
+ 'settings' => array(
+ 'color' => array(
+ 'text' => 'value',
+ 'palette' => array(
+ array(
+ 'slug' => 'grey',
+ 'color' => 'grey',
+ ),
+ ),
+ ),
+ 'misc' => 'value',
+ 'blocks' => array(
+ 'core/group' => array(
+ 'custom' => array(
+ 'base-font' => 16,
+ 'line-height' => array(
+ 'small' => 1.2,
+ 'medium' => 1.4,
+ 'large' => 1.8,
+ ),
+ ),
+ ),
+ ),
+ ),
+ 'styles' => array(
+ 'color' => array(
+ 'text' => 'var:preset|color|grey',
+ ),
+ 'misc' => 'value',
+ 'elements' => array(
+ 'link' => array(
+ 'color' => array(
+ 'text' => '#111',
+ 'background' => '#333',
+ ),
+ ),
+ ),
+ 'blocks' => array(
+ 'core/group' => array(
+ 'elements' => array(
+ 'link' => array(
+ 'color' => array(
+ 'text' => '#111',
+ ),
+ ),
+ ),
+ 'spacing' => array(
+ 'padding' => array(
+ 'top' => '12px',
+ 'bottom' => '24px',
+ ),
+ ),
+ ),
+ 'core/heading' => array(
+ 'color' => array(
+ 'text' => '#123456',
+ ),
+ 'elements' => array(
+ 'link' => array(
+ 'color' => array(
+ 'text' => '#111',
+ 'background' => '#333',
+ ),
+ 'typography' => array(
+ 'fontSize' => '60px',
+ ),
+ ),
+ ),
+ ),
+ 'core/post-date' => array(
+ 'color' => array(
+ 'text' => '#123456',
+ ),
+ 'elements' => array(
+ 'link' => array(
+ 'color' => array(
+ 'background' => '#777',
+ 'text' => '#555',
+ ),
+ ),
+ ),
+ ),
+ ),
+ ),
+ 'misc' => 'value',
+ )
+ );
+
+ $this->assertEquals(
+ 'body{--wp--preset--color--grey: grey;}.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;}body{color: var(--wp--preset--color--grey);}a{background-color: #333;color: #111;}.wp-block-group{padding-top: 12px;padding-bottom: 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;}.has-grey-color{color: grey !important;}.has-grey-background-color{background-color: grey !important;}',
+ $theme_json->get_stylesheet()
+ );
+ $this->assertEquals(
+ 'body{color: var(--wp--preset--color--grey);}a{background-color: #333;color: #111;}.wp-block-group{padding-top: 12px;padding-bottom: 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;}.has-grey-color{color: grey !important;}.has-grey-background-color{background-color: grey !important;}',
+ $theme_json->get_stylesheet( 'block_styles' )
+ );
+ $this->assertEquals(
+ 'body{--wp--preset--color--grey: grey;}.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;}',
+ $theme_json->get_stylesheet( 'css_variables' )
+ );
+ }
+
+ function test_get_stylesheet_preset_rules_come_after_block_rules() {
+ $theme_json = new WP_Theme_JSON(
+ array(
+ 'version' => WP_Theme_JSON::LATEST_SCHEMA,
+ 'settings' => array(
+ 'blocks' => array(
+ 'core/group' => array(
+ 'color' => array(
+ 'palette' => array(
+ array(
+ 'slug' => 'grey',
+ 'color' => 'grey',
+ ),
+ ),
+ ),
+ ),
+ ),
+ ),
+ 'styles' => array(
+ 'blocks' => array(
+ 'core/group' => array(
+ 'color' => array(
+ 'text' => 'red',
+ ),
+ ),
+ ),
+ ),
+ )
+ );
+
+ $this->assertEquals(
+ '.wp-block-group{--wp--preset--color--grey: grey;}.wp-block-group{color: red;}.wp-block-group.has-grey-color{color: grey !important;}.wp-block-group.has-grey-background-color{background-color: grey !important;}',
+ $theme_json->get_stylesheet()
+ );
+ $this->assertEquals(
+ '.wp-block-group{color: red;}.wp-block-group.has-grey-color{color: grey !important;}.wp-block-group.has-grey-background-color{background-color: grey !important;}',
+ $theme_json->get_stylesheet( 'block_styles' )
+ );
+ }
+
+ public function test_get_stylesheet_preset_values_are_marked_as_important() {
+ $theme_json = new WP_Theme_JSON(
+ array(
+ 'version' => WP_Theme_JSON::LATEST_SCHEMA,
+ 'settings' => array(
+ 'color' => array(
+ 'palette' => array(
+ array(
+ 'slug' => 'grey',
+ 'color' => 'grey',
+ ),
+ ),
+ ),
+ ),
+ 'styles' => array(
+ 'blocks' => array(
+ 'core/paragraph' => array(
+ 'color' => array(
+ 'text' => 'red',
+ 'background' => 'blue',
+ ),
+ 'typography' => array(
+ 'fontSize' => '12px',
+ 'lineHeight' => '1.3',
+ ),
+ ),
+ ),
+ ),
+ )
+ );
+
+ $this->assertEquals(
+ 'body{--wp--preset--color--grey: grey;}p{background-color: blue;color: red;font-size: 12px;line-height: 1.3;}.has-grey-color{color: grey !important;}.has-grey-background-color{background-color: grey !important;}',
+ $theme_json->get_stylesheet()
+ );
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * @ticket 52991
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -254,6 +441,29 @@
</span><span class="cx" style="display: block; padding: 0 10px"> ),
</span><span class="cx" style="display: block; padding: 0 10px"> ),
</span><span class="cx" style="display: block; padding: 0 10px"> ),
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'styles' => array(
+ 'typography' => array(
+ 'fontSize' => '12',
+ ),
+ 'blocks' => array(
+ 'core/group' => array(
+ 'spacing' => array(
+ 'padding' => array(
+ 'top' => '12px',
+ 'bottom' => '12px',
+ ),
+ ),
+ ),
+ 'core/list' => array(
+ 'typography' => array(
+ 'fontSize' => '12',
+ ),
+ 'color' => array(
+ 'background' => 'brown',
+ ),
+ ),
+ ),
+ ),
</ins><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $theme_json = new WP_Theme_JSON( $initial );
</span></span></pre>
</div>
</div>
</body>
</html>