<!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>[57662] trunk/tests/phpunit: Tests: Synchronize Theme.JSON unit test between Core and Gutenberg.</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/57662">57662</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/57662","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>youknowriad</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2024-02-20 09:53:11 +0000 (Tue, 20 Feb 2024)</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'>Tests: Synchronize Theme.JSON unit test between Core and Gutenberg.
Merges the changes from Core and Gutenberg for the following tests:
- WP_REST_Global_Styles_Controller_Test
- Tests_Theme_wpThemeJsonResolver
- Tests_Theme_wpThemeJsonSchema
- Tests_Theme_wpThemeJson
This will help ensure the stability of the theme.json style generation.
Props ajlende, scruffian, aaronrobertshaw, get_dave, youknowriad.
Fixes <a href="https://core.trac.wordpress.org/ticket/60387">#60387</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunktestsphpunitdatathemedir1blockthemethemejson">trunk/tests/phpunit/data/themedir1/block-theme/theme.json</a></li>
<li><a href="#trunktestsphpunitdatathemedir1blockthemechildthemejson">trunk/tests/phpunit/data/themedir1/block-theme-child/theme.json</a></li>
<li><a href="#trunktestsphpunittestsrestapirestglobalstylescontrollerphp">trunk/tests/phpunit/tests/rest-api/rest-global-styles-controller.php</a></li>
<li><a href="#trunktestsphpunitteststhemewpThemeJsonphp">trunk/tests/phpunit/tests/theme/wpThemeJson.php</a></li>
<li><a href="#trunktestsphpunitteststhemewpThemeJsonResolverphp">trunk/tests/phpunit/tests/theme/wpThemeJsonResolver.php</a></li>
<li><a href="#trunktestsphpunitteststhemewpThemeJsonSchemaphp">trunk/tests/phpunit/tests/theme/wpThemeJsonSchema.php</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunktestsphpunitdatathemedir1blockthemestylesvariationajson">trunk/tests/phpunit/data/themedir1/block-theme/styles/variation-a.json</a></li>
<li><a href="#trunktestsphpunitdatathemedir1blockthemechildstylesvariationajson">trunk/tests/phpunit/data/themedir1/block-theme-child/styles/variation-a.json</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunktestsphpunitdatathemedir1blockthemestylesvariationajson"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: trunk/tests/phpunit/data/themedir1/block-theme/styles/variation-a.json</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/phpunit/data/themedir1/block-theme/styles/variation-a.json (rev 0)
+++ trunk/tests/phpunit/data/themedir1/block-theme/styles/variation-a.json 2024-02-20 09:53:11 UTC (rev 57662)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,18 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+{
+ "version": 2,
+ "settings": {
+ "blocks": {
+ "core/paragraph": {
+ "color": {
+ "palette": [
+ {
+ "slug": "light",
+ "name": "Light",
+ "color": "#f2f2f2"
+ }
+ ]
+ }
+ }
+ }
+ }
+}
</ins><span class="cx" style="display: block; padding: 0 10px">Property changes on: trunk/tests/phpunit/data/themedir1/block-theme/styles/variation-a.json
</span><span class="cx" style="display: block; padding: 0 10px">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: svn:eol-style</h4></div>
<ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+native
</ins><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of property
</span><a id="trunktestsphpunitdatathemedir1blockthemethemejson"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/tests/phpunit/data/themedir1/block-theme/theme.json</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/phpunit/data/themedir1/block-theme/theme.json 2024-02-20 09:41:48 UTC (rev 57661)
+++ trunk/tests/phpunit/data/themedir1/block-theme/theme.json 2024-02-20 09:53:11 UTC (rev 57662)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,6 +1,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> {
</span><span class="cx" style="display: block; padding: 0 10px"> "$schema": "https://schemas.wp.org/trunk/theme.json",
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- "version": 1,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ "version": 2,
</ins><span class="cx" style="display: block; padding: 0 10px"> "title": "Block theme",
</span><span class="cx" style="display: block; padding: 0 10px"> "settings": {
</span><span class="cx" style="display: block; padding: 0 10px"> "color": {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -42,11 +42,11 @@
</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"> "customFontSize": false,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- "customLineHeight": true
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ "lineHeight": true
</ins><span class="cx" style="display: block; padding: 0 10px"> },
</span><span class="cx" style="display: block; padding: 0 10px"> "spacing": {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- "units": ["rem"],
- "customPadding": true,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ "units": [ "rem" ],
+ "padding": true,
</ins><span class="cx" style="display: block; padding: 0 10px"> "blockGap": true
</span><span class="cx" style="display: block; padding: 0 10px"> },
</span><span class="cx" style="display: block; padding: 0 10px"> "blocks": {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -63,8 +63,8 @@
</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">- "styles" : {
- "blocks" :{
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ "styles": {
+ "blocks": {
</ins><span class="cx" style="display: block; padding: 0 10px"> "core/post-featured-image": {
</span><span class="cx" style="display: block; padding: 0 10px"> "shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)",
</span><span class="cx" style="display: block; padding: 0 10px"> "filter": {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -122,7 +122,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> {
</span><span class="cx" style="display: block; padding: 0 10px"> "name": "custom-single-post-template",
</span><span class="cx" style="display: block; padding: 0 10px"> "title": "Custom Single Post template",
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- "postTypes": ["post"]
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ "postTypes": [ "post" ]
</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"> "templateParts": [
</span></span></pre></div>
<a id="trunktestsphpunitdatathemedir1blockthemechildstylesvariationajson"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: trunk/tests/phpunit/data/themedir1/block-theme-child/styles/variation-a.json</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/phpunit/data/themedir1/block-theme-child/styles/variation-a.json (rev 0)
+++ trunk/tests/phpunit/data/themedir1/block-theme-child/styles/variation-a.json 2024-02-20 09:53:11 UTC (rev 57662)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,18 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+{
+ "version": 2,
+ "settings": {
+ "blocks": {
+ "core/paragraph": {
+ "color": {
+ "palette": [
+ {
+ "slug": "dark",
+ "name": "Dark",
+ "color": "#010101"
+ }
+ ]
+ }
+ }
+ }
+ }
+}
</ins><span class="cx" style="display: block; padding: 0 10px">Property changes on: trunk/tests/phpunit/data/themedir1/block-theme-child/styles/variation-a.json
</span><span class="cx" style="display: block; padding: 0 10px">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: svn:eol-style</h4></div>
<ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+native
</ins><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of property
</span><a id="trunktestsphpunitdatathemedir1blockthemechildthemejson"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/tests/phpunit/data/themedir1/block-theme-child/theme.json</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/phpunit/data/themedir1/block-theme-child/theme.json 2024-02-20 09:41:48 UTC (rev 57661)
+++ trunk/tests/phpunit/data/themedir1/block-theme-child/theme.json 2024-02-20 09:53:11 UTC (rev 57662)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,6 +1,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> {
</span><span class="cx" style="display: block; padding: 0 10px"> "$schema": "https://schemas.wp.org/trunk/theme.json",
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- "version": 1,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ "version": 2,
</ins><span class="cx" style="display: block; padding: 0 10px"> "settings": {
</span><span class="cx" style="display: block; padding: 0 10px"> "color": {
</span><span class="cx" style="display: block; padding: 0 10px"> "palette": [
</span></span></pre></div>
<a id="trunktestsphpunittestsrestapirestglobalstylescontrollerphp"></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/rest-api/rest-global-styles-controller.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/phpunit/tests/rest-api/rest-global-styles-controller.php 2024-02-20 09:41:48 UTC (rev 57661)
+++ trunk/tests/phpunit/tests/rest-api/rest-global-styles-controller.php 2024-02-20 09:53:11 UTC (rev 57662)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -31,17 +31,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> protected static $post_id;
</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 function find_and_normalize_global_styles_by_id( $global_styles, $id ) {
- foreach ( $global_styles as $style ) {
- if ( $style['id'] === $id ) {
- unset( $style['_links'] );
- return $style;
- }
- }
-
- return null;
- }
-
</del><span class="cx" style="display: block; padding: 0 10px"> public function set_up() {
</span><span class="cx" style="display: block; padding: 0 10px"> parent::set_up();
</span><span class="cx" style="display: block; padding: 0 10px"> switch_theme( 'tt1-blocks' );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -130,6 +119,89 @@
</span><span class="cx" style="display: block; padding: 0 10px"> // Controller does not use get_context_param().
</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">+ public function test_get_theme_items() {
+ wp_set_current_user( self::$admin_id );
+ switch_theme( 'block-theme' );
+ $request = new WP_REST_Request( 'GET', '/wp/v2/global-styles/themes/block-theme/variations' );
+ $response = rest_get_server()->dispatch( $request );
+ $data = $response->get_data();
+ $expected = array(
+ array(
+ 'version' => 2,
+ 'title' => 'variation-a',
+ 'settings' => array(
+ 'blocks' => array(
+ 'core/paragraph' => array(
+ 'color' => array(
+ 'palette' => array(
+ 'theme' => array(
+ array(
+ 'slug' => 'light',
+ 'name' => 'Light',
+ 'color' => '#f2f2f2',
+ ),
+ ),
+ ),
+ ),
+ ),
+ ),
+ ),
+ ),
+ array(
+ 'version' => 2,
+ 'title' => 'variation-b',
+ 'settings' => array(
+ 'blocks' => array(
+ 'core/post-title' => array(
+ 'color' => array(
+ 'palette' => array(
+ 'theme' => array(
+ array(
+ 'slug' => 'light',
+ 'name' => 'Light',
+ 'color' => '#f1f1f1',
+ ),
+ ),
+ ),
+ ),
+ ),
+ ),
+ ),
+ ),
+ array(
+ 'version' => 2,
+ 'title' => 'Block theme variation',
+ 'settings' => array(
+ 'color' => array(
+ 'palette' => array(
+ 'theme' => array(
+ array(
+ 'slug' => 'foreground',
+ 'color' => '#3F67C6',
+ 'name' => 'Foreground',
+ ),
+ ),
+ ),
+ ),
+ ),
+ 'styles' => array(
+ 'blocks' => array(
+ 'core/post-title' => array(
+ 'typography' => array(
+ 'fontWeight' => '700',
+ ),
+ ),
+ ),
+ ),
+ ),
+ );
+
+ wp_recursive_ksort( $data );
+ wp_recursive_ksort( $expected );
+
+ $this->assertSameSets( $expected, $data );
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * @doesNotPerformAssertions
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -411,7 +483,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertSame( 'My new global styles title', $data['title']['raw'] );
</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">-
</del><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * @covers WP_REST_Global_Styles_Controller::update_item
</span><span class="cx" style="display: block; padding: 0 10px"> * @ticket 54516
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -446,6 +517,45 @@
</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">+ * @covers WP_REST_Global_Styles_Controller::update_item
+ * @ticket 57536
+ */
+ public function test_update_item_valid_styles_css() {
+ wp_set_current_user( self::$admin_id );
+ if ( is_multisite() ) {
+ grant_super_admin( self::$admin_id );
+ }
+ $request = new WP_REST_Request( 'PUT', '/wp/v2/global-styles/' . self::$global_styles_id );
+ $request->set_body_params(
+ array(
+ 'styles' => array( 'css' => 'body { color: red; }' ),
+ )
+ );
+ $response = rest_get_server()->dispatch( $request );
+ $data = $response->get_data();
+ $this->assertSame( 'body { color: red; }', $data['styles']['css'] );
+ }
+
+ /**
+ * @covers WP_REST_Global_Styles_Controller::update_item
+ * @ticket 57536
+ */
+ public function test_update_item_invalid_styles_css() {
+ wp_set_current_user( self::$admin_id );
+ if ( is_multisite() ) {
+ grant_super_admin( self::$admin_id );
+ }
+ $request = new WP_REST_Request( 'PUT', '/wp/v2/global-styles/' . self::$global_styles_id );
+ $request->set_body_params(
+ array(
+ 'styles' => array( 'css' => '<p>test</p> body { color: red; }' ),
+ )
+ );
+ $response = rest_get_server()->dispatch( $request );
+ $this->assertErrorResponse( 'rest_custom_css_illegal_markup', $response, 400 );
+ }
+
+ /**
</ins><span class="cx" style="display: block; padding: 0 10px"> * @doesNotPerformAssertions
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> public function test_delete_item() {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -475,69 +585,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertArrayHasKey( 'title', $properties, 'Schema properties array does not have "title" key' );
</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">-
- public function test_get_theme_items() {
- wp_set_current_user( self::$admin_id );
- switch_theme( 'block-theme' );
- $request = new WP_REST_Request( 'GET', '/wp/v2/global-styles/themes/block-theme/variations' );
- $response = rest_get_server()->dispatch( $request );
- $data = $response->get_data();
- $expected = array(
- array(
- 'version' => 2,
- 'title' => 'variation-b',
- 'settings' => array(
- 'blocks' => array(
- 'core/post-title' => array(
- 'color' => array(
- 'palette' => array(
- 'theme' => array(
- array(
- 'slug' => 'light',
- 'name' => 'Light',
- 'color' => '#f1f1f1',
- ),
- ),
- ),
- ),
- ),
- ),
- ),
- ),
- array(
- 'version' => 2,
- 'title' => 'Block theme variation',
- 'settings' => array(
- 'color' => array(
- 'palette' => array(
- 'theme' => array(
- array(
- 'slug' => 'foreground',
- 'color' => '#3F67C6',
- 'name' => 'Foreground',
- ),
- ),
- ),
- ),
- ),
- 'styles' => array(
- 'blocks' => array(
- 'core/post-title' => array(
- 'typography' => array(
- 'fontWeight' => '700',
- ),
- ),
- ),
- ),
- ),
- );
-
- wp_recursive_ksort( $data );
- wp_recursive_ksort( $expected );
-
- $this->assertSameSets( $data, $expected );
- }
-
</del><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * @covers WP_REST_Global_Styles_Controller::get_available_actions
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -556,43 +603,4 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertArrayHasKey( 'https://api.w.org/action-edit-css', $links );
</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">-
- /**
- * @covers WP_REST_Global_Styles_Controller::update_item
- * @ticket 57536
- */
- public function test_update_item_valid_styles_css() {
- wp_set_current_user( self::$admin_id );
- if ( is_multisite() ) {
- grant_super_admin( self::$admin_id );
- }
- $request = new WP_REST_Request( 'PUT', '/wp/v2/global-styles/' . self::$global_styles_id );
- $request->set_body_params(
- array(
- 'styles' => array( 'css' => 'body { color: red; }' ),
- )
- );
- $response = rest_get_server()->dispatch( $request );
- $data = $response->get_data();
- $this->assertSame( 'body { color: red; }', $data['styles']['css'] );
- }
-
- /**
- * @covers WP_REST_Global_Styles_Controller::update_item
- * @ticket 57536
- */
- public function test_update_item_invalid_styles_css() {
- wp_set_current_user( self::$admin_id );
- if ( is_multisite() ) {
- grant_super_admin( self::$admin_id );
- }
- $request = new WP_REST_Request( 'PUT', '/wp/v2/global-styles/' . self::$global_styles_id );
- $request->set_body_params(
- array(
- 'styles' => array( 'css' => '<p>test</p> body { color: red; }' ),
- )
- );
- $response = rest_get_server()->dispatch( $request );
- $this->assertErrorResponse( 'rest_custom_css_illegal_markup', $response, 400 );
- }
</del><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 2024-02-20 09:41:48 UTC (rev 57661)
+++ trunk/tests/phpunit/tests/theme/wpThemeJson.php 2024-02-20 09:53:11 UTC (rev 57662)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -387,111 +387,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">- * @ticket 54336
- * @ticket 58550
- */
- public function test_get_stylesheet_support_for_shorthand_and_longhand_values() {
- $theme_json = new WP_Theme_JSON(
- array(
- 'version' => WP_Theme_JSON::LATEST_SCHEMA,
- 'styles' => array(
- 'blocks' => array(
- 'core/group' => array(
- 'border' => array(
- 'radius' => '10px',
- ),
- 'spacing' => array(
- 'padding' => '24px',
- 'margin' => '1em',
- ),
- ),
- 'core/image' => array(
- 'border' => array(
- 'radius' => array(
- 'topLeft' => '10px',
- 'bottomRight' => '1em',
- ),
- ),
- 'spacing' => array(
- 'padding' => array(
- 'top' => '15px',
- ),
- 'margin' => array(
- 'bottom' => '30px',
- ),
- ),
- ),
- ),
- ),
- )
- );
-
- $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; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alig
nleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}.wp-block-group{border-radius: 10px;margin: 1em;padding: 24px;}.wp-block-image{margin-bottom: 30px;padding-top: 15px;}.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder{border-top-left-radius: 10px;border-bottom-right-radius: 1em;}';
- $this->assertSame( $styles, $theme_json->get_stylesheet() );
- $this->assertSame( $styles, $theme_json->get_stylesheet( array( 'styles' ) ) );
- }
-
- /**
- * @ticket 54336
- * @ticket 58550
- */
- public function test_get_stylesheet_skips_disabled_protected_properties() {
- $theme_json = new WP_Theme_JSON(
- array(
- 'version' => WP_Theme_JSON::LATEST_SCHEMA,
- 'settings' => array(
- 'spacing' => array(
- 'blockGap' => null,
- ),
- ),
- 'styles' => array(
- 'spacing' => array(
- 'blockGap' => '1em',
- ),
- 'blocks' => array(
- 'core/columns' => array(
- 'spacing' => array(
- 'blockGap' => '24px',
- ),
- ),
- ),
- ),
- )
- );
-
- $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; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.al
ignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}';
- $this->assertSame( $expected, $theme_json->get_stylesheet() );
- $this->assertSame( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) );
- }
-
- /**
- * @ticket 54336
- * @ticket 58548
- * @ticket 58550
- */
- public function test_get_stylesheet_renders_enabled_protected_properties() {
- $theme_json = new WP_Theme_JSON(
- array(
- 'version' => WP_Theme_JSON::LATEST_SCHEMA,
- 'settings' => array(
- 'spacing' => array(
- 'blockGap' => true,
- ),
- ),
- 'styles' => array(
- 'spacing' => array(
- 'blockGap' => '1em',
- ),
- ),
- )
- );
-
- $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; }:where(.wp-site-blocks) > * { margin-block-start: 1em; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child:first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child:last-child { margin-block-end: 0; }body { --wp--style--block-gap: 1em; }:where(body .is-layout-flow) > :first-child:first-child{margin-block-start: 0;}:where(body .is-layout-flow) > :last-child:last-child{margin-block-end: 0;}:where(body .is-layout-flow) > *{margin-block-start: 1em;margin-block-end: 0;}:where(body .is-layout-constrained) > :first-child:first-child{margin-block-start: 0;}:where(body .is-layout-constrained) > :last-child:last-child{margin-block-end: 0;}:where(body .is-layout-constrained
) > *{margin-block-start: 1em;margin-block-end: 0;}:where(body .is-layout-flex) {gap: 1em;}:where(body .is-layout-grid) {gap: 1em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width:
var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}';
- $this->assertSame( $expected, $theme_json->get_stylesheet() );
- $this->assertSame( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) );
- }
-
- /**
</del><span class="cx" style="display: block; padding: 0 10px"> * @ticket 53175
</span><span class="cx" style="display: block; padding: 0 10px"> * @ticket 54336
</span><span class="cx" style="display: block; padding: 0 10px"> * @ticket 56611
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -583,13 +478,16 @@
</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"> 'core/group' => array(
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 'color' => array(
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'color' => array(
</ins><span class="cx" style="display: block; padding: 0 10px"> 'gradient' => 'var:preset|gradient|custom-gradient',
</span><span class="cx" style="display: block; padding: 0 10px"> ),
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 'border' => array(
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'border' => array(
</ins><span class="cx" style="display: block; padding: 0 10px"> 'radius' => '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">- 'elements' => array(
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'dimensions' => array(
+ 'minHeight' => '50vh',
+ ),
+ 'elements' => array(
</ins><span class="cx" style="display: block; padding: 0 10px"> 'link' => array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'color' => array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'text' => '#111',
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -596,7 +494,7 @@
</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">- 'spacing' => array(
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'spacing' => array(
</ins><span class="cx" style="display: block; padding: 0 10px"> 'padding' => '24px',
</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">@@ -660,16 +558,122 @@
</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"> $variables = 'body{--wp--preset--color--grey: grey;--wp--preset--gradient--custom-gradient: linear-gradient(135deg,rgba(0,0,0) 0%,rgb(0,0,0) 100%);--wp--preset--font-size--small: 14px;--wp--preset--font-size--big: 41px;--wp--preset--font-family--arial: Arial, serif;}.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;}';
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $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; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-lef
t: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}body{color: var(--wp--preset--color--grey);}a:where(:not(.wp-element-button)){background-color: #333;color: #111;}.wp-element-button, .wp-block-button__link{box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.66);}.wp-block-cover{min-height: unset;aspect-ratio: 16/9;}.wp-block-group{background: var(--wp--preset--gradient--custom-gradient);border-radius: 10px;padding: 24px;}.wp-block-group a:where(:not(.wp-element-button)){color: #111;}.wp-block-headin
g{color: #123456;}.wp-block-heading a:where(:not(.wp-element-button)){background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a:where(:not(.wp-element-button)){background-color: #777;color: #555;}.wp-block-post-excerpt{column-count: 2;}.wp-block-image{margin-bottom: 30px;}.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder{border-top-left-radius: 10px;border-bottom-right-radius: 1em;}.wp-block-image img, .wp-block-image .components-placeholder{filter: var(--wp--preset--duotone--custom-duotone);}';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $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; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left
: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}body{color: var(--wp--preset--color--grey);}a:where(:not(.wp-element-button)){background-color: #333;color: #111;}.wp-element-button, .wp-block-button__link{box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.66);}.wp-block-cover{min-height: unset;aspect-ratio: 16/9;}.wp-block-group{background: var(--wp--preset--gradient--custom-gradient);border-radius: 10px;min-height: 50vh;padding: 24px;}.wp-block-group a:where(:not(.wp-element-button)){color: #111;}
.wp-block-heading{color: #123456;}.wp-block-heading a:where(:not(.wp-element-button)){background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a:where(:not(.wp-element-button)){background-color: #777;color: #555;}.wp-block-post-excerpt{column-count: 2;}.wp-block-image{margin-bottom: 30px;}.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder{border-top-left-radius: 10px;border-bottom-right-radius: 1em;}.wp-block-image img, .wp-block-image .components-placeholder{filter: var(--wp--preset--duotone--custom-duotone);}';
</ins><span class="cx" style="display: block; padding: 0 10px"> $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-custom-gradient-gradient-background{background: var(--wp--preset--gradient--custom-gradient) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-big-font-size{font-size: var(--wp--preset--font-size--big) !important;}.has-arial-font-family{font-family: var(--wp--preset--font-family--arial) !important;}';
</span><span class="cx" style="display: block; padding: 0 10px"> $all = $variables . $styles . $presets;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $this->assertSame( $all, $theme_json->get_stylesheet() );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ $this->assertSame( $variables, $theme_json->get_stylesheet( array( 'variables' ) ) );
</ins><span class="cx" style="display: block; padding: 0 10px"> $this->assertSame( $styles, $theme_json->get_stylesheet( array( 'styles' ) ) );
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertSame( $presets, $theme_json->get_stylesheet( array( 'presets' ) ) );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $this->assertSame( $variables, $theme_json->get_stylesheet( array( 'variables' ) ) );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $this->assertSame( $all, $theme_json->get_stylesheet() );
</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><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * @ticket 54336
+ * @ticket 58550
+ */
+ public function test_get_stylesheet_support_for_shorthand_and_longhand_values() {
+ $theme_json = new WP_Theme_JSON(
+ array(
+ 'version' => WP_Theme_JSON::LATEST_SCHEMA,
+ 'styles' => array(
+ 'blocks' => array(
+ 'core/group' => array(
+ 'border' => array(
+ 'radius' => '10px',
+ ),
+ 'spacing' => array(
+ 'padding' => '24px',
+ 'margin' => '1em',
+ ),
+ ),
+ 'core/image' => array(
+ 'border' => array(
+ 'radius' => array(
+ 'topLeft' => '10px',
+ 'bottomRight' => '1em',
+ ),
+ ),
+ 'spacing' => array(
+ 'padding' => array(
+ 'top' => '15px',
+ ),
+ 'margin' => array(
+ 'bottom' => '30px',
+ ),
+ ),
+ ),
+ ),
+ ),
+ )
+ );
+
+ $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; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alig
nleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}.wp-block-group{border-radius: 10px;margin: 1em;padding: 24px;}.wp-block-image{margin-bottom: 30px;padding-top: 15px;}.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder{border-top-left-radius: 10px;border-bottom-right-radius: 1em;}';
+ $this->assertSame( $styles, $theme_json->get_stylesheet() );
+ $this->assertSame( $styles, $theme_json->get_stylesheet( array( 'styles' ) ) );
+ }
+
+ /**
+ * @ticket 54336
+ * @ticket 58550
+ */
+ public function test_get_stylesheet_skips_disabled_protected_properties() {
+ $theme_json = new WP_Theme_JSON(
+ array(
+ 'version' => WP_Theme_JSON::LATEST_SCHEMA,
+ 'settings' => array(
+ 'spacing' => array(
+ 'blockGap' => null,
+ ),
+ ),
+ 'styles' => array(
+ 'spacing' => array(
+ 'blockGap' => '1em',
+ ),
+ 'blocks' => array(
+ 'core/columns' => array(
+ 'spacing' => array(
+ 'blockGap' => '24px',
+ ),
+ ),
+ ),
+ ),
+ )
+ );
+
+ $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; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.al
ignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}';
+ $this->assertSame( $expected, $theme_json->get_stylesheet() );
+ $this->assertSame( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) );
+ }
+
+ /**
+ * @ticket 54336
+ * @ticket 58548
+ * @ticket 58550
+ */
+ public function test_get_stylesheet_renders_enabled_protected_properties() {
+ $theme_json = new WP_Theme_JSON(
+ array(
+ 'version' => WP_Theme_JSON::LATEST_SCHEMA,
+ 'settings' => array(
+ 'spacing' => array(
+ 'blockGap' => true,
+ ),
+ ),
+ 'styles' => array(
+ 'spacing' => array(
+ 'blockGap' => '1em',
+ ),
+ ),
+ )
+ );
+
+ $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; }:where(.wp-site-blocks) > * { margin-block-start: 1em; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child:first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child:last-child { margin-block-end: 0; }body { --wp--style--block-gap: 1em; }:where(body .is-layout-flow) > :first-child:first-child{margin-block-start: 0;}:where(body .is-layout-flow) > :last-child:last-child{margin-block-end: 0;}:where(body .is-layout-flow) > *{margin-block-start: 1em;margin-block-end: 0;}:where(body .is-layout-constrained) > :first-child:first-child{margin-block-start: 0;}:where(body .is-layout-constrained) > :last-child:last-child{margin-block-end: 0;}:where(body .is-layout-constrained
) > *{margin-block-start: 1em;margin-block-end: 0;}:where(body .is-layout-flex) {gap: 1em;}:where(body .is-layout-grid) {gap: 1em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width:
var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}';
+ $this->assertSame( $expected, $theme_json->get_stylesheet() );
+ $this->assertSame( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) );
+ }
+
+ /**
</ins><span class="cx" style="display: block; padding: 0 10px"> * @ticket 52991
</span><span class="cx" style="display: block; padding: 0 10px"> * @ticket 54336
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -738,7 +742,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $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; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right:
auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}.wp-block-group{color: red;}';
</span><span class="cx" style="display: block; padding: 0 10px"> $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;}';
</span><span class="cx" style="display: block; padding: 0 10px"> $variables = '.wp-block-group{--wp--preset--color--grey: grey;}';
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $all = $variables . $styles . $presets;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ $all = $variables . $styles . $presets;
+
</ins><span class="cx" style="display: block; padding: 0 10px"> $this->assertSame( $all, $theme_json->get_stylesheet() );
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertSame( $styles, $theme_json->get_stylesheet( array( 'styles' ) ) );
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertSame( $presets, $theme_json->get_stylesheet( array( 'presets' ) ) );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1113,6 +1119,322 @@
</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">+ * @ticket 56467
+ * @ticket 58548
+ * @ticket 58550
+ */
+ public function test_get_stylesheet_generates_layout_styles() {
+ $theme_json = new WP_Theme_JSON(
+ array(
+ 'version' => WP_Theme_JSON::LATEST_SCHEMA,
+ 'settings' => array(
+ 'spacing' => array(
+ 'blockGap' => true,
+ ),
+ ),
+ 'styles' => array(
+ 'spacing' => array(
+ 'blockGap' => '1em',
+ ),
+ ),
+ ),
+ 'default'
+ );
+
+ // Results also include root site blocks styles.
+ $this->assertSame(
+ '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; }:where(.wp-site-blocks) > * { margin-block-start: 1em; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child:first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child:last-child { margin-block-end: 0; }body { --wp--style--block-gap: 1em; }:where(body .is-layout-flow) > :first-child:first-child{margin-block-start: 0;}:where(body .is-layout-flow) > :last-child:last-child{margin-block-end: 0;}:where(body .is-layout-flow) > *{margin-block-start: 1em;margin-block-end: 0;}:where(body .is-layout-constrained) > :first-child:first-child{margin-block-start: 0;}:where(body .is-layout-constrained) > :last-child:last-child{margin-block-end: 0;}:where(body .is-layout-constrained) > *{m
argin-block-start: 1em;margin-block-end: 0;}:where(body .is-layout-flex) {gap: 1em;}:where(body .is-layout-grid) {gap: 1em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--
style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}',
+ $theme_json->get_stylesheet( array( 'styles' ) )
+ );
+ }
+
+ /**
+ * @ticket 56467
+ * @ticket 58548
+ * @ticket 58550
+ */
+ public function test_get_stylesheet_generates_layout_styles_with_spacing_presets() {
+ $theme_json = new WP_Theme_JSON(
+ array(
+ 'version' => WP_Theme_JSON::LATEST_SCHEMA,
+ 'settings' => array(
+ 'spacing' => array(
+ 'blockGap' => true,
+ ),
+ ),
+ 'styles' => array(
+ 'spacing' => array(
+ 'blockGap' => 'var:preset|spacing|60',
+ ),
+ ),
+ ),
+ 'default'
+ );
+
+ // Results also include root site blocks styles.
+ $this->assertSame(
+ '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; }:where(.wp-site-blocks) > * { margin-block-start: var(--wp--preset--spacing--60); margin-block-end: 0; }:where(.wp-site-blocks) > :first-child:first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child:last-child { margin-block-end: 0; }body { --wp--style--block-gap: var(--wp--preset--spacing--60); }:where(body .is-layout-flow) > :first-child:first-child{margin-block-start: 0;}:where(body .is-layout-flow) > :last-child:last-child{margin-block-end: 0;}:where(body .is-layout-flow) > *{margin-block-start: var(--wp--preset--spacing--60);margin-block-end: 0;}:where(body .is-layout-constrained) > :first-child:first-child{margin-block-start: 0;}:where(body .is-layout-constrained) > :last-ch
ild:last-child{margin-block-end: 0;}:where(body .is-layout-constrained) > *{margin-block-start: var(--wp--preset--spacing--60);margin-block-end: 0;}:where(body .is-layout-flex) {gap: var(--wp--preset--spacing--60);}:where(body .is-layout-grid) {gap: var(--wp--preset--spacing--60);}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: va
r(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}',
+ $theme_json->get_stylesheet( array( 'styles' ) )
+ );
+ }
+
+ /**
+ * @ticket 56467
+ * @ticket 58550
+ */
+ public function test_get_stylesheet_generates_fallback_gap_layout_styles() {
+ $theme_json = new WP_Theme_JSON(
+ array(
+ 'version' => WP_Theme_JSON::LATEST_SCHEMA,
+ 'settings' => array(
+ 'spacing' => array(
+ 'blockGap' => null,
+ ),
+ ),
+ 'styles' => array(
+ 'spacing' => array(
+ 'blockGap' => '1em',
+ ),
+ ),
+ ),
+ 'default'
+ );
+ $stylesheet = $theme_json->get_stylesheet( array( 'styles' ) );
+
+ // Results also include root site blocks styles.
+ $this->assertSame(
+ '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; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):no
t(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}',
+ $stylesheet
+ );
+ }
+
+ /**
+ * @ticket 56467
+ * @ticket 58550
+ */
+ public function test_get_stylesheet_generates_base_fallback_gap_layout_styles() {
+ $theme_json = new WP_Theme_JSON(
+ array(
+ 'version' => WP_Theme_JSON::LATEST_SCHEMA,
+ 'settings' => array(
+ 'spacing' => array(
+ 'blockGap' => null,
+ ),
+ ),
+ ),
+ 'default'
+ );
+ $stylesheet = $theme_json->get_stylesheet( array( 'base-layout-styles' ) );
+
+ // Note the `base-layout-styles` includes a fallback gap for the Columns block for backwards compatibility.
+ $this->assertSame(
+ ':where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{
display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}',
+ $stylesheet
+ );
+ }
+
+ /**
+ * @ticket 56467
+ * @ticket 58550
+ */
+ public function test_get_stylesheet_skips_layout_styles() {
+ add_theme_support( 'disable-layout-styles' );
+ $theme_json = new WP_Theme_JSON(
+ array(
+ 'version' => WP_Theme_JSON::LATEST_SCHEMA,
+ 'settings' => array(
+ 'spacing' => array(
+ 'blockGap' => null,
+ ),
+ ),
+ ),
+ 'default'
+ );
+ $stylesheet = $theme_json->get_stylesheet( array( 'base-layout-styles' ) );
+ remove_theme_support( 'disable-layout-styles' );
+
+ // All Layout styles should be skipped.
+ $this->assertSame(
+ '',
+ $stylesheet
+ );
+ }
+
+ /**
+ * @ticket 56467
+ * @ticket 58550
+ */
+ public function test_get_stylesheet_generates_valid_block_gap_values_and_skips_null_or_false_values() {
+ $theme_json = new WP_Theme_JSON(
+ array(
+ 'version' => WP_Theme_JSON::LATEST_SCHEMA,
+ 'settings' => array(
+ 'spacing' => array(
+ 'blockGap' => true,
+ ),
+ ),
+ 'styles' => array(
+ 'spacing' => array(
+ 'blockGap' => '1rem',
+ ),
+ 'blocks' => array(
+ 'core/post-content' => array(
+ 'color' => array(
+ 'text' => 'gray', // This value should not render block layout styles.
+ ),
+ ),
+ 'core/social-links' => array(
+ 'spacing' => array(
+ 'blockGap' => '0', // This value should render block layout gap as zero.
+ ),
+ ),
+ 'core/buttons' => array(
+ 'spacing' => array(
+ 'blockGap' => 0, // This value should render block layout gap as zero.
+ ),
+ ),
+ 'core/columns' => array(
+ 'spacing' => array(
+ 'blockGap' => false, // This value should be ignored. The block will use the global layout value.
+ ),
+ ),
+ ),
+ ),
+ ),
+ 'default'
+ );
+
+ $this->assertSame(
+ '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; }:where(.wp-site-blocks) > * { margin-block-start: 1rem; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child:first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child:last-child { margin-block-end: 0; }body { --wp--style--block-gap: 1rem; }:where(body .is-layout-flow) > :first-child:first-child{margin-block-start: 0;}:where(body .is-layout-flow) > :last-child:last-child{margin-block-end: 0;}:where(body .is-layout-flow) > *{margin-block-start: 1rem;margin-block-end: 0;}:where(body .is-layout-constrained) > :first-child:first-child{margin-block-start: 0;}:where(body .is-layout-constrained) > :last-child:last-child{margin-block-end: 0;}:where(body .is-layout-constrained) >
*{margin-block-start: 1rem;margin-block-end: 0;}:where(body .is-layout-flex) {gap: 1rem;}:where(body .is-layout-grid) {gap: 1rem;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(
--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}.wp-block-post-content{color: gray;}.wp-block-social-links-is-layout-flow > :first-child:first-child{margin-block-start: 0;}.wp-block-social-links-is-layout-flow > :last-child:last-child{margin-block-end: 0;}.wp-block-social-links-is-layout-flow > *{margin-block-start: 0;margin-block-end: 0;}.wp-block-social-links-is-layout-constrained > :first-child:first-child{margin-block-start: 0;}.wp-block-social-links-is-layout-constrained > :last-child:last-child{margin-block-end: 0;}.wp-block-social-links-is-layout-constrained > *{margin-block-start: 0;margin-block-end: 0;}.wp-block-social-links-is-layout-flex{gap: 0;}.wp-block-social-links-is-layout-grid{gap: 0;}.wp-block-buttons-is-layout-flow > :first-child:first-child{margin-block
-start: 0;}.wp-block-buttons-is-layout-flow > :last-child:last-child{margin-block-end: 0;}.wp-block-buttons-is-layout-flow > *{margin-block-start: 0;margin-block-end: 0;}.wp-block-buttons-is-layout-constrained > :first-child:first-child{margin-block-start: 0;}.wp-block-buttons-is-layout-constrained > :last-child:last-child{margin-block-end: 0;}.wp-block-buttons-is-layout-constrained > *{margin-block-start: 0;margin-block-end: 0;}.wp-block-buttons-is-layout-flex{gap: 0;}.wp-block-buttons-is-layout-grid{gap: 0;}',
+ $theme_json->get_stylesheet()
+ );
+ }
+
+ /**
+ * @ticket 57354
+ * @ticket 58550
+ */
+ public function test_get_stylesheet_returns_outline_styles() {
+ $theme_json = new WP_Theme_JSON(
+ array(
+ 'version' => WP_Theme_JSON::LATEST_SCHEMA,
+ 'styles' => array(
+ 'elements' => array(
+ 'button' => array(
+ 'outline' => array(
+ 'offset' => '3px',
+ 'width' => '3px',
+ 'style' => 'dashed',
+ 'color' => 'red',
+ ),
+ ':hover' => array(
+ 'outline' => array(
+ 'offset' => '3px',
+ 'width' => '3px',
+ 'style' => 'solid',
+ 'color' => 'blue',
+ ),
+ ),
+ ),
+ ),
+ ),
+ )
+ );
+
+ $base_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; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(
.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}';
+
+ $element_styles = '.wp-element-button, .wp-block-button__link{outline-color: red;outline-offset: 3px;outline-style: dashed;outline-width: 3px;}.wp-element-button:hover, .wp-block-button__link:hover{outline-color: blue;outline-offset: 3px;outline-style: solid;outline-width: 3px;}';
+
+ $expected = $base_styles . $element_styles;
+ $this->assertSame( $expected, $theme_json->get_stylesheet() );
+ }
+
+ /**
+ * Tests that a custom root selector is correctly applied when generating a stylesheet.
+ *
+ * @ticket 60343
+ */
+ public function test_get_stylesheet_custom_root_selector() {
+ $theme_json = new WP_Theme_JSON(
+ array(
+ 'version' => WP_Theme_JSON::LATEST_SCHEMA,
+ 'styles' => array(
+ 'color' => array(
+ 'text' => 'teal',
+ ),
+ ),
+ ),
+ 'default'
+ );
+
+ $options = array( 'root_selector' => '.custom' );
+ $actual = $theme_json->get_stylesheet( array( 'styles' ), null, $options );
+
+ // Results also include root site blocks styles which hard code
+ // `body { margin: 0; }`.
+ $this->assertSame(
+ '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; }.custom{color: teal;}',
+ $actual
+ );
+ }
+
+ public function test_allow_indirect_properties() {
+ $actual = WP_Theme_JSON::remove_insecure_properties(
+ array(
+ 'version' => WP_Theme_JSON::LATEST_SCHEMA,
+ 'styles' => array(
+ 'blocks' => array(
+ 'core/social-links' => array(
+ 'spacing' => array(
+ 'blockGap' => array(
+ 'top' => '1em',
+ 'left' => '2em',
+ ),
+ ),
+ ),
+ ),
+ 'spacing' => array(
+ 'blockGap' => '3em',
+ ),
+ ),
+ 'settings' => array(
+ 'layout' => array(
+ 'contentSize' => '800px',
+ 'wideSize' => '1000px',
+ ),
+ ),
+ )
+ );
+
+ $expected = array(
+ 'version' => WP_Theme_JSON::LATEST_SCHEMA,
+ 'styles' => array(
+ 'blocks' => array(
+ 'core/social-links' => array(
+ 'spacing' => array(
+ 'blockGap' => array(
+ 'top' => '1em',
+ 'left' => '2em',
+ ),
+ ),
+ ),
+ ),
+ 'spacing' => array(
+ 'blockGap' => '3em',
+ ),
+ ),
+ 'settings' => array(
+ 'layout' => array(
+ 'contentSize' => '800px',
+ 'wideSize' => '1000px',
+ ),
+ ),
+ );
+
+ $this->assertEqualSetsWithIndex( $expected, $actual );
+ }
+
+ /**
</ins><span class="cx" style="display: block; padding: 0 10px"> * @ticket 52991
</span><span class="cx" style="display: block; padding: 0 10px"> * @ticket 54336
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2554,6 +2876,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 'background' => 'blue',
</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">+ ':seen' => array(
+ 'color' => array(
+ 'background' => 'ivory',
+ ),
+ ),
</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">@@ -2840,49 +3167,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">- * @ticket 54487
- */
- public function test_sanitization() {
- $theme_json = new WP_Theme_JSON(
- array(
- 'version' => 2,
- 'styles' => array(
- 'spacing' => array(
- 'blockGap' => 'valid value',
- ),
- 'blocks' => array(
- 'core/group' => array(
- 'spacing' => array(
- 'margin' => 'valid value',
- 'display' => 'none',
- ),
- ),
- ),
- ),
- )
- );
-
- $actual = $theme_json->get_raw_data();
- $expected = array(
- 'version' => 2,
- 'styles' => array(
- 'spacing' => array(
- 'blockGap' => 'valid value',
- ),
- 'blocks' => array(
- 'core/group' => array(
- 'spacing' => array(
- 'margin' => 'valid value',
- ),
- ),
- ),
- ),
- );
-
- $this->assertEqualSetsWithIndex( $expected, $actual );
- }
-
- /**
</del><span class="cx" style="display: block; padding: 0 10px"> * @ticket 55505
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> public function test_export_data() {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3154,7 +3438,52 @@
</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">+ public function test_remove_invalid_font_family_settings() {
+ $actual = WP_Theme_JSON::remove_insecure_properties(
+ array(
+ 'version' => WP_Theme_JSON::LATEST_SCHEMA,
+ 'settings' => array(
+ 'typography' => array(
+ 'fontFamilies' => array(
+ 'custom' => array(
+ array(
+ 'name' => 'Open Sans',
+ 'slug' => 'open-sans',
+ 'fontFamily' => '"Open Sans", sans-serif</style><script>alert("xss")</script>',
+ ),
+ array(
+ 'name' => 'Arial',
+ 'slug' => 'arial',
+ 'fontFamily' => 'Arial, serif',
+ ),
+ ),
+ ),
+ ),
+ ),
+ ),
+ true
+ );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $expected = array(
+ 'version' => WP_Theme_JSON::LATEST_SCHEMA,
+ 'settings' => array(
+ 'typography' => array(
+ 'fontFamilies' => array(
+ 'custom' => array(
+ array(
+ 'name' => 'Arial',
+ 'slug' => 'arial',
+ 'fontFamily' => 'Arial, serif',
+ ),
+ ),
+ ),
+ ),
+ ),
+ );
+
+ $this->assertEqualSetsWithIndex( $expected, $actual );
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * @ticket 56467
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3203,7 +3532,9 @@
</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">- $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; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left
: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}body{background-color: #ffffff;color: #000000;}.wp-element-button, .wp-block-button__link{background-color: #000000;color: #ffffff;}';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $base_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; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-l
eft: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}';
+ $color_styles = 'body{background-color: #ffffff;color: #000000;}.wp-element-button, .wp-block-button__link{background-color: #000000;color: #ffffff;}';
+ $expected = $base_styles . $color_styles;
</ins><span class="cx" style="display: block; padding: 0 10px"> $this->assertSame( $expected, $theme_json->get_stylesheet() );
</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">@@ -3255,7 +3586,8 @@
</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">- * Testing that dynamic properties in theme.json that refer to other dynamic properties in a loop
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Testing that dynamic properties in theme.json that
+ * refer to other dynamic properties in a loop
</ins><span class="cx" style="display: block; padding: 0 10px"> * should be left untouched.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @ticket 56467
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3283,12 +3615,15 @@
</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">- $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; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left
: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}body{background-color: #ffffff;}.wp-element-button, .wp-block-button__link{color: #ffffff;}';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $base_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; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-l
eft: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}';
+ $color_styles = 'body{background-color: #ffffff;}.wp-element-button, .wp-block-button__link{color: #ffffff;}';
+ $expected = $base_styles . $color_styles;
</ins><span class="cx" style="display: block; padding: 0 10px"> $this->assertSame( $expected, $theme_json->get_stylesheet() );
</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">- * Testing that dynamic properties in theme.json that refer to other dynamic properties
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Testing that dynamic properties in theme.json that
+ * refer to other dynamic properties
</ins><span class="cx" style="display: block; padding: 0 10px"> * should be left unprocessed.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @ticket 56467
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3316,13 +3651,15 @@
</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">- $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; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left
: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}body{background-color: #ffffff;color: #ffffff;}.wp-element-button, .wp-block-button__link{color: #ffffff;}';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $base_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; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-l
eft: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}';
+ $color_styles = 'body{background-color: #ffffff;color: #ffffff;}.wp-element-button, .wp-block-button__link{color: #ffffff;}';
+ $expected = $base_styles . $color_styles;
</ins><span class="cx" style="display: block; padding: 0 10px"> $this->assertSame( $expected, $theme_json->get_stylesheet() );
</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">- * Testing that dynamic properties in theme.json that refer to themselves
- * should be left unprocessed.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Testing that dynamic properties in theme.json that
+ * refer to themselves should be left unprocessed.
</ins><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @ticket 56467
</span><span class="cx" style="display: block; padding: 0 10px"> * @ticket 58550
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3341,206 +3678,16 @@
</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">- $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; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left
: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}body{background-color: #ffffff;}';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $base_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; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-l
eft: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}';
+ $color_styles = 'body{background-color: #ffffff;}';
+ $expected = $base_styles . $color_styles;
</ins><span class="cx" style="display: block; padding: 0 10px"> $this->assertSame( $expected, $theme_json->get_stylesheet() );
</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><span class="cx" style="display: block; padding: 0 10px"> * @ticket 56467
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * @ticket 58548
</del><span class="cx" style="display: block; padding: 0 10px"> * @ticket 58550
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- public function test_get_stylesheet_generates_layout_styles() {
- $theme_json = new WP_Theme_JSON(
- array(
- 'version' => WP_Theme_JSON::LATEST_SCHEMA,
- 'settings' => array(
- 'spacing' => array(
- 'blockGap' => true,
- ),
- ),
- 'styles' => array(
- 'spacing' => array(
- 'blockGap' => '1em',
- ),
- ),
- ),
- 'default'
- );
-
- // Results also include root site blocks styles.
- $this->assertSame(
- '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; }:where(.wp-site-blocks) > * { margin-block-start: 1em; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child:first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child:last-child { margin-block-end: 0; }body { --wp--style--block-gap: 1em; }:where(body .is-layout-flow) > :first-child:first-child{margin-block-start: 0;}:where(body .is-layout-flow) > :last-child:last-child{margin-block-end: 0;}:where(body .is-layout-flow) > *{margin-block-start: 1em;margin-block-end: 0;}:where(body .is-layout-constrained) > :first-child:first-child{margin-block-start: 0;}:where(body .is-layout-constrained) > :last-child:last-child{margin-block-end: 0;}:where(body .is-layout-constrained) > *{m
argin-block-start: 1em;margin-block-end: 0;}:where(body .is-layout-flex) {gap: 1em;}:where(body .is-layout-grid) {gap: 1em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--
style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}',
- $theme_json->get_stylesheet( array( 'styles' ) )
- );
- }
-
- /**
- * @ticket 56467
- * @ticket 58548
- * @ticket 58550
- */
- public function test_get_stylesheet_generates_layout_styles_with_spacing_presets() {
- $theme_json = new WP_Theme_JSON(
- array(
- 'version' => WP_Theme_JSON::LATEST_SCHEMA,
- 'settings' => array(
- 'spacing' => array(
- 'blockGap' => true,
- ),
- ),
- 'styles' => array(
- 'spacing' => array(
- 'blockGap' => 'var:preset|spacing|60',
- ),
- ),
- ),
- 'default'
- );
-
- // Results also include root site blocks styles.
- $this->assertSame(
- '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; }:where(.wp-site-blocks) > * { margin-block-start: var(--wp--preset--spacing--60); margin-block-end: 0; }:where(.wp-site-blocks) > :first-child:first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child:last-child { margin-block-end: 0; }body { --wp--style--block-gap: var(--wp--preset--spacing--60); }:where(body .is-layout-flow) > :first-child:first-child{margin-block-start: 0;}:where(body .is-layout-flow) > :last-child:last-child{margin-block-end: 0;}:where(body .is-layout-flow) > *{margin-block-start: var(--wp--preset--spacing--60);margin-block-end: 0;}:where(body .is-layout-constrained) > :first-child:first-child{margin-block-start: 0;}:where(body .is-layout-constrained) > :last-ch
ild:last-child{margin-block-end: 0;}:where(body .is-layout-constrained) > *{margin-block-start: var(--wp--preset--spacing--60);margin-block-end: 0;}:where(body .is-layout-flex) {gap: var(--wp--preset--spacing--60);}:where(body .is-layout-grid) {gap: var(--wp--preset--spacing--60);}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: va
r(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}',
- $theme_json->get_stylesheet( array( 'styles' ) )
- );
- }
-
- /**
- * @ticket 56467
- * @ticket 58550
- */
- public function test_get_stylesheet_generates_fallback_gap_layout_styles() {
- $theme_json = new WP_Theme_JSON(
- array(
- 'version' => WP_Theme_JSON::LATEST_SCHEMA,
- 'settings' => array(
- 'spacing' => array(
- 'blockGap' => null,
- ),
- ),
- 'styles' => array(
- 'spacing' => array(
- 'blockGap' => '1em',
- ),
- ),
- ),
- 'default'
- );
- $stylesheet = $theme_json->get_stylesheet( array( 'styles' ) );
-
- // Results also include root site blocks styles.
- $this->assertSame(
- '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; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):no
t(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}',
- $stylesheet
- );
- }
-
- /**
- * @ticket 56467
- * @ticket 58550
- */
- public function test_get_stylesheet_generates_base_fallback_gap_layout_styles() {
- $theme_json = new WP_Theme_JSON(
- array(
- 'version' => WP_Theme_JSON::LATEST_SCHEMA,
- 'settings' => array(
- 'spacing' => array(
- 'blockGap' => null,
- ),
- ),
- ),
- 'default'
- );
- $stylesheet = $theme_json->get_stylesheet( array( 'base-layout-styles' ) );
-
- // Note the `base-layout-styles` includes a fallback gap for the Columns block for backwards compatibility.
- $this->assertSame(
- ':where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{
display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}',
- $stylesheet
- );
- }
-
- /**
- * @ticket 56467
- * @ticket 58550
- */
- public function test_get_stylesheet_skips_layout_styles() {
- add_theme_support( 'disable-layout-styles' );
- $theme_json = new WP_Theme_JSON(
- array(
- 'version' => WP_Theme_JSON::LATEST_SCHEMA,
- 'settings' => array(
- 'spacing' => array(
- 'blockGap' => null,
- ),
- ),
- ),
- 'default'
- );
- $stylesheet = $theme_json->get_stylesheet( array( 'base-layout-styles' ) );
- remove_theme_support( 'disable-layout-styles' );
-
- // All Layout styles should be skipped.
- $this->assertSame(
- '',
- $stylesheet
- );
- }
-
- /**
- * @ticket 56467
- * @ticket 58550
- */
- public function test_get_stylesheet_generates_valid_block_gap_values_and_skips_null_or_false_values() {
- $theme_json = new WP_Theme_JSON(
- array(
- 'version' => WP_Theme_JSON::LATEST_SCHEMA,
- 'settings' => array(
- 'spacing' => array(
- 'blockGap' => true,
- ),
- ),
- 'styles' => array(
- 'spacing' => array(
- 'blockGap' => '1rem',
- ),
- 'blocks' => array(
- 'core/post-content' => array(
- 'color' => array(
- 'text' => 'gray', // This value should not render block layout styles.
- ),
- ),
- 'core/social-links' => array(
- 'spacing' => array(
- 'blockGap' => '0', // This value should render block layout gap as zero.
- ),
- ),
- 'core/buttons' => array(
- 'spacing' => array(
- 'blockGap' => 0, // This value should render block layout gap as zero.
- ),
- ),
- 'core/columns' => array(
- 'spacing' => array(
- 'blockGap' => false, // This value should be ignored. The block will use the global layout value.
- ),
- ),
- ),
- ),
- ),
- 'default'
- );
-
- $this->assertSame(
- '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; }:where(.wp-site-blocks) > * { margin-block-start: 1rem; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child:first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child:last-child { margin-block-end: 0; }body { --wp--style--block-gap: 1rem; }:where(body .is-layout-flow) > :first-child:first-child{margin-block-start: 0;}:where(body .is-layout-flow) > :last-child:last-child{margin-block-end: 0;}:where(body .is-layout-flow) > *{margin-block-start: 1rem;margin-block-end: 0;}:where(body .is-layout-constrained) > :first-child:first-child{margin-block-start: 0;}:where(body .is-layout-constrained) > :last-child:last-child{margin-block-end: 0;}:where(body .is-layout-constrained) >
*{margin-block-start: 1rem;margin-block-end: 0;}:where(body .is-layout-flex) {gap: 1rem;}:where(body .is-layout-grid) {gap: 1rem;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(
--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}.wp-block-post-content{color: gray;}.wp-block-social-links-is-layout-flow > :first-child:first-child{margin-block-start: 0;}.wp-block-social-links-is-layout-flow > :last-child:last-child{margin-block-end: 0;}.wp-block-social-links-is-layout-flow > *{margin-block-start: 0;margin-block-end: 0;}.wp-block-social-links-is-layout-constrained > :first-child:first-child{margin-block-start: 0;}.wp-block-social-links-is-layout-constrained > :last-child:last-child{margin-block-end: 0;}.wp-block-social-links-is-layout-constrained > *{margin-block-start: 0;margin-block-end: 0;}.wp-block-social-links-is-layout-flex{gap: 0;}.wp-block-social-links-is-layout-grid{gap: 0;}.wp-block-buttons-is-layout-flow > :first-child:first-child{margin-block
-start: 0;}.wp-block-buttons-is-layout-flow > :last-child:last-child{margin-block-end: 0;}.wp-block-buttons-is-layout-flow > *{margin-block-start: 0;margin-block-end: 0;}.wp-block-buttons-is-layout-constrained > :first-child:first-child{margin-block-start: 0;}.wp-block-buttons-is-layout-constrained > :last-child:last-child{margin-block-end: 0;}.wp-block-buttons-is-layout-constrained > *{margin-block-start: 0;margin-block-end: 0;}.wp-block-buttons-is-layout-flex{gap: 0;}.wp-block-buttons-is-layout-grid{gap: 0;}',
- $theme_json->get_stylesheet()
- );
- }
-
- /**
- * @ticket 56467
- * @ticket 58550
- */
</del><span class="cx" style="display: block; padding: 0 10px"> public function test_get_styles_for_block_with_padding_aware_alignments() {
</span><span class="cx" style="display: block; padding: 0 10px"> $theme_json = new WP_Theme_JSON(
</span><span class="cx" style="display: block; padding: 0 10px"> array(
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3632,6 +3779,74 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertSame( $expected, $root_rules . $style_rules );
</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">+ /**
+ * @ticket 56611
+ * @ticket 58548
+ * @ticket 58550
+ */
+ public function test_get_styles_with_appearance_tools() {
+ $theme_json = new WP_Theme_JSON(
+ array(
+ 'version' => 2,
+ 'settings' => array(
+ 'appearanceTools' => true,
+ ),
+ )
+ );
+
+ $metadata = array(
+ 'path' => array( 'settings' ),
+ 'selector' => 'body',
+ );
+
+ $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; }:where(.wp-site-blocks) > * { margin-block-start: ; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child:first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child:last-child { margin-block-end: 0; }body { --wp--style--block-gap: ; }:where(body .is-layout-flow) > :first-child:first-child{margin-block-start: 0;}:where(body .is-layout-flow) > :last-child:last-child{margin-block-end: 0;}:where(body .is-layout-flow) > *{margin-block-start: 1;margin-block-end: 0;}:where(body .is-layout-constrained) > :first-child:first-child{margin-block-start: 0;}:where(body .is-layout-constrained) > :last-child:last-child{margin-block-end: 0;}:where(body .is-layout-constrained) >
; *{margin-block-start: 1;margin-block-end: 0;}:where(body .is-layout-flex) {gap: 1;}:where(body .is-layout-grid) {gap: 1;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--s
tyle--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}';
+ $root_rules = $theme_json->get_root_layout_rules( WP_Theme_JSON::ROOT_BLOCK_SELECTOR, $metadata );
+ $this->assertSame( $expected, $root_rules );
+ }
+
+ /**
+ * @ticket 54487
+ */
+ public function test_sanitization() {
+ $theme_json = new WP_Theme_JSON(
+ array(
+ 'version' => 2,
+ 'styles' => array(
+ 'spacing' => array(
+ 'blockGap' => 'valid value',
+ ),
+ 'blocks' => array(
+ 'core/group' => array(
+ 'spacing' => array(
+ 'margin' => 'valid value',
+ 'display' => 'none',
+ ),
+ ),
+ ),
+ ),
+ )
+ );
+
+ $actual = $theme_json->get_raw_data();
+ $expected = array(
+ 'version' => 2,
+ 'styles' => array(
+ 'spacing' => array(
+ 'blockGap' => 'valid value',
+ ),
+ 'blocks' => array(
+ 'core/group' => array(
+ 'spacing' => array(
+ 'margin' => 'valid value',
+ ),
+ ),
+ ),
+ ),
+ );
+
+ $this->assertEqualSetsWithIndex( $expected, $actual );
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /*
</span><span class="cx" style="display: block; padding: 0 10px"> * @ticket 58462
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3768,6 +3983,141 @@
</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">+ * Tests that invalid properties are removed from the theme.json inside indexed arrays as settings.typography.fontFamilies.
+ *
+ * @ticket 60360
+ */
+ public function test_sanitize_indexed_arrays() {
+ $theme_json = new WP_Theme_JSON(
+ array(
+ 'version' => '2',
+ 'badKey2' => 'I am Evil!',
+ 'settings' => array(
+ 'badKey3' => 'I am Evil!',
+ 'typography' => array(
+ 'badKey4' => 'I am Evil!',
+ 'fontFamilies' => array(
+ 'custom' => array(
+ array(
+ 'badKey4' => 'I am Evil!',
+ 'name' => 'Arial',
+ 'slug' => 'arial',
+ 'fontFamily' => 'Arial, sans-serif',
+ ),
+ ),
+ 'theme' => array(
+ array(
+ 'badKey5' => 'I am Evil!',
+ 'name' => 'Piazzolla',
+ 'slug' => 'piazzolla',
+ 'fontFamily' => 'Piazzolla',
+ 'fontFace' => array(
+ array(
+ 'badKey6' => 'I am Evil!',
+ 'fontFamily' => 'Piazzolla',
+ 'fontStyle' => 'italic',
+ 'fontWeight' => '400',
+ 'src' => 'https://example.com/font.ttf',
+ ),
+ array(
+ 'badKey7' => 'I am Evil!',
+ 'fontFamily' => 'Piazzolla',
+ 'fontStyle' => 'italic',
+ 'fontWeight' => '400',
+ 'src' => 'https://example.com/font.ttf',
+ ),
+ ),
+ ),
+ array(
+ 'badKey8' => 'I am Evil!',
+ 'name' => 'Inter',
+ 'slug' => 'Inter',
+ 'fontFamily' => 'Inter',
+ 'fontFace' => array(
+ array(
+ 'badKey9' => 'I am Evil!',
+ 'fontFamily' => 'Inter',
+ 'fontStyle' => 'italic',
+ 'fontWeight' => '400',
+ 'src' => 'https://example.com/font.ttf',
+ ),
+ array(
+ 'badKey10' => 'I am Evil!',
+ 'fontFamily' => 'Inter',
+ 'fontStyle' => 'italic',
+ 'fontWeight' => '400',
+ 'src' => 'https://example.com/font.ttf',
+ ),
+ ),
+ ),
+ ),
+ ),
+ ),
+ ),
+ )
+ );
+
+ $expected_sanitized = array(
+ 'version' => '2',
+ 'settings' => array(
+ 'typography' => array(
+ 'fontFamilies' => array(
+ 'custom' => array(
+ array(
+ 'name' => 'Arial',
+ 'slug' => 'arial',
+ 'fontFamily' => 'Arial, sans-serif',
+ ),
+ ),
+ 'theme' => array(
+ array(
+ 'name' => 'Piazzolla',
+ 'slug' => 'piazzolla',
+ 'fontFamily' => 'Piazzolla',
+ 'fontFace' => array(
+ array(
+ 'fontFamily' => 'Piazzolla',
+ 'fontStyle' => 'italic',
+ 'fontWeight' => '400',
+ 'src' => 'https://example.com/font.ttf',
+ ),
+ array(
+ 'fontFamily' => 'Piazzolla',
+ 'fontStyle' => 'italic',
+ 'fontWeight' => '400',
+ 'src' => 'https://example.com/font.ttf',
+ ),
+ ),
+ ),
+ array(
+ 'name' => 'Inter',
+ 'slug' => 'Inter',
+ 'fontFamily' => 'Inter',
+ 'fontFace' => array(
+ array(
+ 'fontFamily' => 'Inter',
+ 'fontStyle' => 'italic',
+ 'fontWeight' => '400',
+ 'src' => 'https://example.com/font.ttf',
+ ),
+ array(
+ 'fontFamily' => 'Inter',
+ 'fontStyle' => 'italic',
+ 'fontWeight' => '400',
+ 'src' => 'https://example.com/font.ttf',
+ ),
+ ),
+ ),
+ ),
+ ),
+ ),
+ ),
+ );
+ $sanitized_theme_json = $theme_json->get_raw_data();
+ $this->assertSameSetsWithIndex( $expected_sanitized, $sanitized_theme_json, 'Sanitized theme.json does not match' );
+ }
+
+ /**
</ins><span class="cx" style="display: block; padding: 0 10px"> * @ticket 57583
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @dataProvider data_sanitize_with_invalid_style_variation
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3969,41 +4319,13 @@
</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">- * @ticket 56611
- * @ticket 58548
- * @ticket 58550
- */
- public function test_get_styles_with_appearance_tools() {
- $theme_json = new WP_Theme_JSON(
- array(
- 'version' => 2,
- 'settings' => array(
- 'appearanceTools' => true,
- ),
- )
- );
-
- $metadata = array(
- 'path' => array( 'settings' ),
- 'selector' => 'body',
- );
-
- $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; }:where(.wp-site-blocks) > * { margin-block-start: ; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child:first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child:last-child { margin-block-end: 0; }body { --wp--style--block-gap: ; }:where(body .is-layout-flow) > :first-child:first-child{margin-block-start: 0;}:where(body .is-layout-flow) > :last-child:last-child{margin-block-end: 0;}:where(body .is-layout-flow) > *{margin-block-start: 1;margin-block-end: 0;}:where(body .is-layout-constrained) > :first-child:first-child{margin-block-start: 0;}:where(body .is-layout-constrained) > :last-child:last-child{margin-block-end: 0;}:where(body .is-layout-constrained) >
; *{margin-block-start: 1;margin-block-end: 0;}:where(body .is-layout-flex) {gap: 1;}:where(body .is-layout-grid) {gap: 1;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--s
tyle--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}';
- $root_rules = $theme_json->get_root_layout_rules( WP_Theme_JSON::ROOT_BLOCK_SELECTOR, $metadata );
- $this->assertSame( $expected, $root_rules );
- }
-
- /**
</del><span class="cx" style="display: block; padding: 0 10px"> * Tests generating the spacing presets array based on the spacing scale provided.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @ticket 56467
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * @dataProvider data_generate_spacing_scale_fixtures
- *
- * @param array $spacing_scale Example spacing scale definitions from the data provider.
- * @param array $expected_output Expected output from data provider.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * @dataProvider data_set_spacing_sizes
</ins><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- public function test_should_set_spacing_sizes( $spacing_scale, $expected_output ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ public function test_set_spacing_sizes( $spacing_scale, $expected_output ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> $theme_json = new WP_Theme_JSON(
</span><span class="cx" style="display: block; padding: 0 10px"> array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'version' => 2,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4026,7 +4348,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><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">- public function data_generate_spacing_scale_fixtures() {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ public function data_set_spacing_sizes() {
</ins><span class="cx" style="display: block; padding: 0 10px"> return array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'only one value when single step in spacing scale' => array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'spacing_scale' => array(
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4294,7 +4616,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @param array $spacing_scale Example spacing scale definitions from the data provider.
</span><span class="cx" style="display: block; padding: 0 10px"> * @param array $expected_output Expected output from data provider.
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- public function test_set_spacing_sizes_should_detect_invalid_spacing_scale( $spacing_scale, $expected_output ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ public function test_set_spacing_sizes_when_invalid( $spacing_scale, $expected_output ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> $this->expectException( Exception::class );
</span><span class="cx" style="display: block; padding: 0 10px"> $this->expectExceptionMessage( 'Some of the theme.json settings.spacing.spacingScale values are invalid' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4480,45 +4802,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">- * @ticket 57354
- * @ticket 58550
- */
- public function test_get_stylesheet_returns_outline_styles() {
- $theme_json = new WP_Theme_JSON(
- array(
- 'version' => WP_Theme_JSON::LATEST_SCHEMA,
- 'styles' => array(
- 'elements' => array(
- 'button' => array(
- 'outline' => array(
- 'offset' => '3px',
- 'width' => '3px',
- 'style' => 'dashed',
- 'color' => 'red',
- ),
- ':hover' => array(
- 'outline' => array(
- 'offset' => '3px',
- 'width' => '3px',
- 'style' => 'solid',
- 'color' => 'blue',
- ),
- ),
- ),
- ),
- ),
- )
- );
-
- $base_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; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(
.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}';
-
- $element_styles = '.wp-element-button, .wp-block-button__link{outline-color: red;outline-offset: 3px;outline-style: dashed;outline-width: 3px;}.wp-element-button:hover, .wp-block-button__link:hover{outline-color: blue;outline-offset: 3px;outline-style: solid;outline-width: 3px;}';
-
- $expected = $base_styles . $element_styles;
- $this->assertSame( $expected, $theme_json->get_stylesheet() );
- }
-
- /**
</del><span class="cx" style="display: block; padding: 0 10px"> * @ticket 57559
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> public function test_shadow_preset_styles() {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4586,7 +4869,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $global_styles = 'body{--wp--preset--shadow--natural: 5px 5px 0 0 black;}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; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained
> .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}';
</span><span class="cx" style="display: block; padding: 0 10px"> $element_styles = 'a:where(:not(.wp-element-button)){box-shadow: var(--wp--preset--shadow--natural);}.wp-element-button, .wp-block-button__link{box-shadow: var(--wp--preset--shadow--natural);}p{box-shadow: var(--wp--preset--shadow--natural);}';
</span><span class="cx" style="display: block; padding: 0 10px"> $expected_styles = $global_styles . $element_styles;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
</del><span class="cx" style="display: block; padding: 0 10px"> $this->assertSame( $expected_styles, $theme_json->get_stylesheet() );
</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">@@ -4598,11 +4880,17 @@
</span><span class="cx" style="display: block; padding: 0 10px"> array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'version' => WP_Theme_JSON::LATEST_SCHEMA,
</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">- 'css' => 'body { color:purple; }',
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'css' => 'body {color:purple;}',
+ 'blocks' => array(
+ 'core/paragraph' => array(
+ 'css' => 'color:red;',
+ ),
+ ),
</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><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $custom_css = 'body { color:purple; }';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ $custom_css = 'body {color:purple;}p{color:red;}';
</ins><span class="cx" style="display: block; padding: 0 10px"> $this->assertSame( $custom_css, $theme_json->get_custom_css() );
</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">@@ -4958,170 +5246,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">- * Tests that a custom root selector is correctly applied when generating a stylesheet.
- *
- * @ticket 60343
- */
- public function test_get_stylesheet_custom_root_selector() {
- $theme_json = new WP_Theme_JSON(
- array(
- 'version' => WP_Theme_JSON::LATEST_SCHEMA,
- 'styles' => array(
- 'color' => array(
- 'text' => 'teal',
- ),
- ),
- ),
- 'default'
- );
-
- $options = array( 'root_selector' => '.custom' );
- $actual = $theme_json->get_stylesheet( array( 'styles' ), null, $options );
-
- // Results also include root site blocks styles which hard code
- // `body { margin: 0;}`.
- $this->assertEquals(
- '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; }.custom{color: teal;}',
- $actual
- );
- }
-
- /**
- * Tests that invalid properties are removed from the theme.json inside indexed arrays as settings.typography.fontFamilies.
- *
- * @ticket 60360
- */
- public function test_sanitize_indexed_arrays() {
- $theme_json = new WP_Theme_JSON(
- array(
- 'version' => '2',
- 'badKey2' => 'I am Evil!',
- 'settings' => array(
- 'badKey3' => 'I am Evil!',
- 'typography' => array(
- 'badKey4' => 'I am Evil!',
- 'fontFamilies' => array(
- 'custom' => array(
- array(
- 'badKey4' => 'I am Evil!',
- 'name' => 'Arial',
- 'slug' => 'arial',
- 'fontFamily' => 'Arial, sans-serif',
- ),
- ),
- 'theme' => array(
- array(
- 'badKey5' => 'I am Evil!',
- 'name' => 'Piazzolla',
- 'slug' => 'piazzolla',
- 'fontFamily' => 'Piazzolla',
- 'fontFace' => array(
- array(
- 'badKey6' => 'I am Evil!',
- 'fontFamily' => 'Piazzolla',
- 'fontStyle' => 'italic',
- 'fontWeight' => '400',
- 'src' => 'https://example.com/font.ttf',
- ),
- array(
- 'badKey7' => 'I am Evil!',
- 'fontFamily' => 'Piazzolla',
- 'fontStyle' => 'italic',
- 'fontWeight' => '400',
- 'src' => 'https://example.com/font.ttf',
- ),
- ),
- ),
- array(
- 'badKey8' => 'I am Evil!',
- 'name' => 'Inter',
- 'slug' => 'Inter',
- 'fontFamily' => 'Inter',
- 'fontFace' => array(
- array(
- 'badKey9' => 'I am Evil!',
- 'fontFamily' => 'Inter',
- 'fontStyle' => 'italic',
- 'fontWeight' => '400',
- 'src' => 'https://example.com/font.ttf',
- ),
- array(
- 'badKey10' => 'I am Evil!',
- 'fontFamily' => 'Inter',
- 'fontStyle' => 'italic',
- 'fontWeight' => '400',
- 'src' => 'https://example.com/font.ttf',
- ),
- ),
- ),
- ),
- ),
- ),
- ),
- )
- );
-
- $expected_sanitized = array(
- 'version' => '2',
- 'settings' => array(
- 'typography' => array(
- 'fontFamilies' => array(
- 'custom' => array(
- array(
- 'name' => 'Arial',
- 'slug' => 'arial',
- 'fontFamily' => 'Arial, sans-serif',
- ),
- ),
- 'theme' => array(
- array(
- 'name' => 'Piazzolla',
- 'slug' => 'piazzolla',
- 'fontFamily' => 'Piazzolla',
- 'fontFace' => array(
- array(
- 'fontFamily' => 'Piazzolla',
- 'fontStyle' => 'italic',
- 'fontWeight' => '400',
- 'src' => 'https://example.com/font.ttf',
- ),
- array(
- 'fontFamily' => 'Piazzolla',
- 'fontStyle' => 'italic',
- 'fontWeight' => '400',
- 'src' => 'https://example.com/font.ttf',
- ),
- ),
- ),
- array(
- 'name' => 'Inter',
- 'slug' => 'Inter',
- 'fontFamily' => 'Inter',
- 'fontFace' => array(
- array(
- 'fontFamily' => 'Inter',
- 'fontStyle' => 'italic',
- 'fontWeight' => '400',
- 'src' => 'https://example.com/font.ttf',
- ),
- array(
- 'fontFamily' => 'Inter',
- 'fontStyle' => 'italic',
- 'fontWeight' => '400',
- 'src' => 'https://example.com/font.ttf',
- ),
- ),
- ),
- ),
- ),
- ),
- ),
- );
- $sanitized_theme_json = $theme_json->get_raw_data();
- $this->assertSameSetsWithIndex( $expected_sanitized, $sanitized_theme_json, 'Sanitized theme.json does not match' );
- }
-
- /**
</del><span class="cx" style="display: block; padding: 0 10px"> * Tests the correct application of a block style variation's selector to
</span><span class="cx" style="display: block; padding: 0 10px"> * a block's selector.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span></span></pre></div>
<a id="trunktestsphpunitteststhemewpThemeJsonResolverphp"></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/wpThemeJsonResolver.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/phpunit/tests/theme/wpThemeJsonResolver.php 2024-02-20 09:41:48 UTC (rev 57661)
+++ trunk/tests/phpunit/tests/theme/wpThemeJsonResolver.php 2024-02-20 09:53:11 UTC (rev 57662)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -20,20 +20,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> protected static $administrator_id;
</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">- * Theme root directory.
- *
- * @var string
- */
- private $theme_root;
-
- /**
- * Original theme directory.
- *
- * @var string
- */
- private $orig_theme_dir;
-
- /**
</del><span class="cx" style="display: block; padding: 0 10px"> * WP_Theme_JSON_Resolver::$blocks_cache property.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @var ReflectionProperty
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -61,6 +47,25 @@
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> private static $property_core_orig_value;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * Theme root directory.
+ *
+ * @var string|null
+ */
+ private $theme_root;
+
+ /**
+ * Original theme directory.
+ *
+ * @var array|null
+ */
+ private $orig_theme_dir;
+
+ /**
+ * @var array|null
+ */
+ private $queries;
+
</ins><span class="cx" style="display: block; padding: 0 10px"> public static function set_up_before_class() {
</span><span class="cx" style="display: block; padding: 0 10px"> parent::set_up_before_class();
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -98,7 +103,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> add_filter( 'theme_root', array( $this, 'filter_set_theme_root' ) );
</span><span class="cx" style="display: block; padding: 0 10px"> add_filter( 'stylesheet_root', array( $this, 'filter_set_theme_root' ) );
</span><span class="cx" style="display: block; padding: 0 10px"> add_filter( 'template_root', array( $this, 'filter_set_theme_root' ) );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $this->queries = array();
</ins><span class="cx" style="display: block; padding: 0 10px"> // Clear caches.
</span><span class="cx" style="display: block; padding: 0 10px"> wp_clean_themes_cache();
</span><span class="cx" style="display: block; padding: 0 10px"> unset( $GLOBALS['wp_themes'] );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -140,7 +145,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertSame( 'block-theme', wp_get_theme()->get( 'TextDomain' ) );
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertSame( 'Motyw blokowy', $theme_data->get_data()['title'] );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $this->assertSameSets(
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $this->assertSame(
</ins><span class="cx" style="display: block; padding: 0 10px"> array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'color' => array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'custom' => false,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -218,12 +223,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $custom_templates = $theme_data->get_custom_templates();
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertArrayHasKey( 'page-home', $custom_templates );
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertSame(
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $custom_templates['page-home'],
</del><span class="cx" style="display: block; padding: 0 10px"> array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'title' => 'Szablon strony głównej',
</span><span class="cx" style="display: block; padding: 0 10px"> 'postTypes' => array( 'page' ),
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- )
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ ),
+ $custom_templates['page-home']
</ins><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"> $this->assertSameSets(
</span><span class="cx" style="display: block; padding: 0 10px"> array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'small-header' => array(
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -233,9 +239,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> ),
</span><span class="cx" style="display: block; padding: 0 10px"> $theme_data->get_template_parts()
</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"> $this->assertSame(
</span><span class="cx" style="display: block; padding: 0 10px"> 'Wariant motywu blokowego',
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $style_variations[1]['title']
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $style_variations[2]['title']
</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">@@ -257,8 +264,8 @@
</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">- * Tests when WP_Theme_JSON_Resolver::$blocks_cache is empty or does not match
- * the all registered blocks.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Tests when WP_Theme_JSON_Resolver::$blocks_cache is empty or
+ * does not match the all registered blocks.
</ins><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * Though this is a non-public method, it is vital to other functionality.
</span><span class="cx" style="display: block; padding: 0 10px"> * Therefore, tests are provided to validate it functions as expected.
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -331,8 +338,8 @@
</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">- * Tests when WP_Theme_JSON_Resolver::$blocks_cache is empty or does not match
- * the all registered blocks.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Tests when WP_Theme_JSON_Resolver::$blocks_cache is empty or
+ * does not match the all registered blocks.
</ins><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * Though this is a non-public method, it is vital to other functionality.
</span><span class="cx" style="display: block; padding: 0 10px"> * Therefore, tests are provided to validate it functions as expected.
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -596,7 +603,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"> $this->assertSame(
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- WP_Theme_JSON_Resolver::get_theme_data()->get_custom_templates(),
</del><span class="cx" style="display: block; padding: 0 10px"> array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'page-home' => array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'title' => 'Homepage',
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -606,7 +612,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 'title' => 'Custom Single Post template',
</span><span class="cx" style="display: block; padding: 0 10px"> 'postTypes' => array( 'post' ),
</span><span class="cx" style="display: block; padding: 0 10px"> ),
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- )
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ ),
+ WP_Theme_JSON_Resolver::get_theme_data()->get_custom_templates()
</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">@@ -749,6 +756,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @covers WP_Theme_JSON_Resolver::get_theme_data
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> public function test_get_theme_data_theme_supports_overrides_theme_json() {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ switch_theme( 'default' );
+
</ins><span class="cx" style="display: block; padding: 0 10px"> // Test that get_theme_data() returns a WP_Theme_JSON object.
</span><span class="cx" style="display: block; padding: 0 10px"> $theme_json_resolver = new WP_Theme_JSON_Resolver();
</span><span class="cx" style="display: block; padding: 0 10px"> $theme_json_resolver->get_merged_data();
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -762,10 +771,12 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $previous_settings = $theme_data->get_settings();
</span><span class="cx" style="display: block; padding: 0 10px"> $previous_line_height = $previous_settings['typography']['lineHeight'];
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertFalse( $previous_line_height, 'lineHeight setting from theme.json should be false.' );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
</ins><span class="cx" style="display: block; padding: 0 10px"> add_theme_support( 'custom-line-height' );
</span><span class="cx" style="display: block; padding: 0 10px"> $current_settings = $theme_json_resolver->get_theme_data()->get_settings();
</span><span class="cx" style="display: block; padding: 0 10px"> $line_height = $current_settings['typography']['lineHeight'];
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertTrue( $line_height, 'lineHeight setting after add_theme_support() should be true.' );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ remove_theme_support( 'custom-line-height' );
</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">@@ -809,8 +820,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @param string $block_styles_text Message.
</span><span class="cx" style="display: block; padding: 0 10px"> * @param bool $theme_palette Whether the theme palette is present.
</span><span class="cx" style="display: block; padding: 0 10px"> * @param string $theme_palette_text Message.
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * @param bool $user_palette Whether the user palette is present.
- * @param string $user_palette_text Message.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * @param bool $user_palette Whether the user palette is present.
+ * @param string $user_palette_text Message.
</ins><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> public function test_get_merged_data_returns_origin( $origin, $core_palette, $core_palette_text, $block_styles, $block_styles_text, $theme_palette, $theme_palette_text, $user_palette, $user_palette_text ) {
</span><span class="cx" style="display: block; padding: 0 10px"> // Make sure there is data from the blocks origin.
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -817,7 +828,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> register_block_type(
</span><span class="cx" style="display: block; padding: 0 10px"> 'my/block-with-styles',
</span><span class="cx" style="display: block; padding: 0 10px"> array(
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 'api_version' => 2,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'api_version' => 3,
</ins><span class="cx" style="display: block; padding: 0 10px"> 'attributes' => array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'borderColor' => array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'type' => 'string',
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -877,7 +888,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @ticket 57824
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @covers WP_Theme_JSON_Resolver::get_merged_data
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- *
</del><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> public function test_get_merged_data_returns_origin_proper() {
</span><span class="cx" style="display: block; padding: 0 10px"> // Make sure the theme has a theme.json
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -914,7 +924,7 @@
</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">- * Data provider.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Data provider for test_get_merged_data_returns_origin.
</ins><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @return array[]
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -983,7 +993,28 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $actual_settings = WP_Theme_JSON_Resolver::get_style_variations();
</span><span class="cx" style="display: block; padding: 0 10px"> $expected_settings = array(
</span><span class="cx" style="display: block; padding: 0 10px"> array(
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 'version' => 2,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'version' => WP_Theme_JSON::LATEST_SCHEMA,
+ 'title' => 'variation-a',
+ 'settings' => array(
+ 'blocks' => array(
+ 'core/paragraph' => array(
+ 'color' => array(
+ 'palette' => array(
+ 'theme' => array(
+ array(
+ 'slug' => 'dark',
+ 'name' => 'Dark',
+ 'color' => '#010101',
+ ),
+ ),
+ ),
+ ),
+ ),
+ ),
+ ),
+ ),
+ array(
+ 'version' => WP_Theme_JSON::LATEST_SCHEMA,
</ins><span class="cx" style="display: block; padding: 0 10px"> 'title' => 'variation-b',
</span><span class="cx" style="display: block; padding: 0 10px"> 'settings' => array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'blocks' => array(
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1004,7 +1035,7 @@
</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"> array(
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 'version' => 2,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'version' => WP_Theme_JSON::LATEST_SCHEMA,
</ins><span class="cx" style="display: block; padding: 0 10px"> 'title' => 'Block theme variation',
</span><span class="cx" style="display: block; padding: 0 10px"> 'settings' => array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'color' => array(
</span></span></pre></div>
<a id="trunktestsphpunitteststhemewpThemeJsonSchemaphp"></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/wpThemeJsonSchema.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/phpunit/tests/theme/wpThemeJsonSchema.php 2024-02-20 09:41:48 UTC (rev 57661)
+++ trunk/tests/phpunit/tests/theme/wpThemeJsonSchema.php 2024-02-20 09:53:11 UTC (rev 57662)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12,14 +12,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> class Tests_Theme_wpThemeJsonSchema extends WP_UnitTestCase {
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * The current theme.json schema version.
- */
- const LATEST_SCHEMA_VERSION = WP_Theme_JSON::LATEST_SCHEMA;
-
- /**
</del><span class="cx" style="display: block; padding: 0 10px"> * @ticket 54336
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- public function test_migrate_v1_to_v2() {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ public function test_migrate_v1_to_latest() {
</ins><span class="cx" style="display: block; padding: 0 10px"> $theme_json_v1 = array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'version' => 1,
</span><span class="cx" style="display: block; padding: 0 10px"> 'settings' => array(
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -106,7 +101,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $actual = WP_Theme_JSON_Schema::migrate( $theme_json_v1 );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $expected = array(
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 'version' => self::LATEST_SCHEMA_VERSION,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'version' => WP_Theme_JSON::LATEST_SCHEMA,
</ins><span class="cx" style="display: block; padding: 0 10px"> 'settings' => array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'color' => array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'palette' => array(
</span></span></pre>
</div>
</div>
</body>
</html>