Changeset 58222 for trunk/tests/phpunit/tests/theme/wpThemeJson.php

Timestamp:

05/28/2024 06:04:37 AM (2 years ago)

Author:

noisysocks

Message:

Block Themes: Allow setting site-wide background images in theme.json

Syncs the necessary changes from Gutenberg to allow setting site-wide
background images using the top-level styles.background key in theme.json.

Props ramonopoly.
Fixes #61123.

File:

• trunk/tests/phpunit/tests/theme/wpThemeJson.php (modified) (1 diff)

trunk/tests/phpunit/tests/theme/wpThemeJson.php

@@ -4986 +4986 @@
 
         /**
+         * Tests that theme background image styles are correctly generated.
+         *
+         * @ticket 61123
+         */
+        public function test_get_top_level_background_image_styles() {
+                $theme_json = new WP_Theme_JSON(
+                        array(
+                                'version' => WP_Theme_JSON::LATEST_SCHEMA,
+                                'styles'  => array(
+                                        'background' => array(
+                                                'backgroundImage'    => array(
+                                                        'url' => 'http://example.org/image.png',
+                                                ),
+                                                'backgroundSize'     => 'contain',
+                                                'backgroundRepeat'   => 'no-repeat',
+                                                'backgroundPosition' => 'center center',
+                                        ),
+                                        'blocks'     => array(
+                                                'core/paragraph' => array(
+                                                        'background' => array(
+                                                                'backgroundImage'    => array(
+                                                                        'url' => 'http://example.org/image.png',
+                                                                ),
+                                                                'backgroundSize'     => 'cover',
+                                                                'backgroundRepeat'   => 'no-repeat',
+                                                                'backgroundPosition' => 'center center',
+                                                        ),
+                                                ),
+                                        ),
+                                        'elements'   => array(
+                                                'button' => array(
+                                                        'background' => array(
+                                                                'backgroundImage'    => array(
+                                                                        'url' => 'http://example.org/image.png',
+                                                                ),
+                                                                'backgroundSize'     => 'cover',
+                                                                'backgroundRepeat'   => 'no-repeat',
+                                                                'backgroundPosition' => 'center center',
+                                                        ),
+                                                ),
+                                        ),
+                                ),
+                        )
+                );
+
+                $expected_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)){margin-left: auto !important;margin-right: auto !important;}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;}html{min-height: calc(100% - var(--wp-admin--admin-bar--height, 0px));}body{background-image: url('http://example.org/image.png');background-position: center center;background-repeat: no-repeat;background-size: contain;}";
+                $this->assertSame( $expected_styles, $theme_json->get_stylesheet(), 'Styles returned from "::get_stylesheet()" with top-level background styles type does not match expectations' );
+
+                $theme_json = new WP_Theme_JSON(
+                        array(
+                                'version' => WP_Theme_JSON::LATEST_SCHEMA,
+                                'styles'  => array(
+                                        'background' => array(
+                                                'backgroundImage'    => "url('http://example.org/image.png')",
+                                                'backgroundSize'     => 'contain',
+                                                'backgroundRepeat'   => 'no-repeat',
+                                                'backgroundPosition' => 'center center',
+                                        ),
+                                ),
+                        )
+                );
+
+                $expected_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)){margin-left: auto !important;margin-right: auto !important;}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;}html{min-height: calc(100% - var(--wp-admin--admin-bar--height, 0px));}body{background-image: url('http://example.org/image.png');background-position: center center;background-repeat: no-repeat;background-size: contain;}";
+                $this->assertSame( $expected_styles, $theme_json->get_stylesheet(), 'Styles returned from "::get_stylesheet()" with top-level background image as string type does not match expectations' );
+        }
+
+        /**
          * @ticket 57536
          */