From 20aa7f60e4c34e4961b0346ebd1222e821768f0d Mon Sep 17 00:00:00 2001 From: ramon Date: Fri, 5 Jul 2024 11:38:40 +1000 Subject: [PATCH 1/9] Merge with control panel. --- lib/block-supports/background.php | 12 +++++----- lib/class-wp-theme-json-gutenberg.php | 10 +++++---- .../global-styles/background-panel.js | 22 ++++++++++++++++++- .../style-engine/class-wp-style-engine.php | 14 ++++++++---- .../src/styles/background/index.ts | 13 +++++++++++ packages/style-engine/src/test/index.js | 6 +++++ phpunit/block-supports/background-test.php | 9 ++++---- phpunit/class-wp-theme-json-test.php | 22 ++++++++++--------- 8 files changed, 79 insertions(+), 29 deletions(-) diff --git a/lib/block-supports/background.php b/lib/block-supports/background.php index 57b8d75f03d35..811608127f47e 100644 --- a/lib/block-supports/background.php +++ b/lib/block-supports/background.php @@ -52,12 +52,12 @@ function gutenberg_render_background_support( $block_content, $block ) { return $block_content; } - $background_styles = array(); - $background_styles['backgroundImage'] = $block_attributes['style']['background']['backgroundImage'] ?? null; - $background_styles['backgroundSize'] = $block_attributes['style']['background']['backgroundSize'] ?? null; - $background_styles['backgroundPosition'] = $block_attributes['style']['background']['backgroundPosition'] ?? null; - $background_styles['backgroundRepeat'] = $block_attributes['style']['background']['backgroundRepeat'] ?? null; - + $background_styles = array(); + $background_styles['backgroundImage'] = $block_attributes['style']['background']['backgroundImage'] ?? null; + $background_styles['backgroundSize'] = $block_attributes['style']['background']['backgroundSize'] ?? null; + $background_styles['backgroundPosition'] = $block_attributes['style']['background']['backgroundPosition'] ?? null; + $background_styles['backgroundRepeat'] = $block_attributes['style']['background']['backgroundRepeat'] ?? null; + $background_styles['backgroundAttachment'] = $block_attributes['style']['background']['backgroundAttachment'] ?? null; if ( ! empty( $background_styles['backgroundImage'] ) ) { $background_styles['backgroundSize'] = $background_styles['backgroundSize'] ?? 'cover'; // If the background size is set to `contain` and no position is set, set the position to `center`. diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 15dbb14896ec1..6d1b768c79376 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -234,6 +234,7 @@ class WP_Theme_JSON_Gutenberg { 'background-position' => array( 'background', 'backgroundPosition' ), 'background-repeat' => array( 'background', 'backgroundRepeat' ), 'background-size' => array( 'background', 'backgroundSize' ), + 'background-attachment' => array( 'background', 'backgroundAttachment' ), 'border-radius' => array( 'border', 'radius' ), 'border-top-left-radius' => array( 'border', 'radius', 'topLeft' ), 'border-top-right-radius' => array( 'border', 'radius', 'topRight' ), @@ -503,10 +504,11 @@ class WP_Theme_JSON_Gutenberg { */ const VALID_STYLES = array( 'background' => array( - 'backgroundImage' => null, - 'backgroundPosition' => null, - 'backgroundRepeat' => null, - 'backgroundSize' => null, + 'backgroundImage' => null, + 'backgroundAttachment' => null, + 'backgroundPosition' => null, + 'backgroundRepeat' => null, + 'backgroundSize' => null, ), 'border' => array( 'color' => null, diff --git a/packages/block-editor/src/components/global-styles/background-panel.js b/packages/block-editor/src/components/global-styles/background-panel.js index 18ecc26b002d0..e0f6edf4e2cbf 100644 --- a/packages/block-editor/src/components/global-styles/background-panel.js +++ b/packages/block-editor/src/components/global-styles/background-panel.js @@ -451,6 +451,9 @@ function BackgroundSizeControls( { const positionValue = style?.background?.backgroundPosition || inheritedValue?.background?.backgroundPosition; + const attachmentValue = style?.background?.backgroundAttachment || { + ...inheritedValue?.background?.backgroundAttachment, + }; /* * An `undefined` value is replaced with any supplied @@ -546,8 +549,17 @@ function BackgroundSizeControls( { ) ); + const toggleScrollWithPage = () => + onChange( + setImmutably( + style, + [ 'background', 'backgroundAttachment' ], + attachmentValue === 'fixed' ? 'scroll' : 'fixed' + ) + ); + return ( - + + array( - 'backgroundImage' => array( + 'backgroundImage' => array( 'property_keys' => array( 'default' => 'background-image', ), 'value_func' => array( self::class, 'get_url_or_value_css_declaration' ), 'path' => array( 'background', 'backgroundImage' ), ), - 'backgroundPosition' => array( + 'backgroundPosition' => array( 'property_keys' => array( 'default' => 'background-position', ), 'path' => array( 'background', 'backgroundPosition' ), ), - 'backgroundRepeat' => array( + 'backgroundRepeat' => array( 'property_keys' => array( 'default' => 'background-repeat', ), 'path' => array( 'background', 'backgroundRepeat' ), ), - 'backgroundSize' => array( + 'backgroundSize' => array( 'property_keys' => array( 'default' => 'background-size', ), 'path' => array( 'background', 'backgroundSize' ), ), + 'backgroundAttachment' => array( + 'property_keys' => array( + 'default' => 'background-attachment', + ), + 'path' => array( 'background', 'backgroundAttachment' ), + ), ), 'color' => array( 'text' => array( diff --git a/packages/style-engine/src/styles/background/index.ts b/packages/style-engine/src/styles/background/index.ts index 6e79636cfda12..211b97343d89c 100644 --- a/packages/style-engine/src/styles/background/index.ts +++ b/packages/style-engine/src/styles/background/index.ts @@ -74,9 +74,22 @@ const backgroundSize = { }, }; +const backgroundAttachment = { + name: 'backgroundAttachment', + generate: ( style: Style, options: StyleOptions ) => { + return generateRule( + style, + options, + [ 'background', 'backgroundAttachment' ], + 'backgroundAttachment' + ); + }, +}; + export default [ backgroundImage, backgroundPosition, backgroundRepeat, backgroundSize, + backgroundAttachment, ]; diff --git a/packages/style-engine/src/test/index.js b/packages/style-engine/src/test/index.js index fbccc8c48bc92..f7960e19187a2 100644 --- a/packages/style-engine/src/test/index.js +++ b/packages/style-engine/src/test/index.js @@ -231,6 +231,7 @@ describe( 'getCSSRules', () => { backgroundPosition: '50% 50%', backgroundRepeat: 'no-repeat', backgroundSize: '300px', + backgroundAttachment: 'fixed', }, color: { text: '#dddddd', @@ -399,6 +400,11 @@ describe( 'getCSSRules', () => { key: 'backgroundSize', value: '300px', }, + { + selector: '.some-selector', + key: 'backgroundAttachment', + value: 'fixed', + }, ] ); } ); diff --git a/phpunit/block-supports/background-test.php b/phpunit/block-supports/background-test.php index 165a65204793d..c0b87cc988e43 100644 --- a/phpunit/block-supports/background-test.php +++ b/phpunit/block-supports/background-test.php @@ -149,7 +149,7 @@ public function data_background_block_support() { 'expected_wrapper' => '
Content
', 'wrapper' => '
Content
', ), - 'background image style with contain, position, and repeat is applied' => array( + 'background image style with contain, position, attachment, and repeat is applied' => array( 'theme_name' => 'block-theme-child-with-fluid-typography', 'block_name' => 'test/background-rules-are-output', 'background_settings' => array( @@ -160,10 +160,11 @@ public function data_background_block_support() { 'url' => 'https://example.com/image.jpg', 'source' => 'file', ), - 'backgroundRepeat' => 'no-repeat', - 'backgroundSize' => 'contain', + 'backgroundRepeat' => 'no-repeat', + 'backgroundSize' => 'contain', + 'backgroundAttachment' => 'fixed', ), - 'expected_wrapper' => '
Content
', + 'expected_wrapper' => '
Content
', 'wrapper' => '
Content
', ), 'background image style is appended if a style attribute already exists' => array( diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index 81abefc4ad15b..8ac4b95fc4025 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -4765,12 +4765,13 @@ public function test_get_top_level_background_image_styles() { 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, 'styles' => array( 'background' => array( - 'backgroundImage' => array( + 'backgroundImage' => array( 'url' => 'http://example.org/image.png', ), - 'backgroundSize' => 'contain', - 'backgroundRepeat' => 'no-repeat', - 'backgroundPosition' => 'center center', + 'backgroundSize' => 'contain', + 'backgroundRepeat' => 'no-repeat', + 'backgroundPosition' => 'center center', + 'backgroundAttachment' => 'fixed', ), ), ) @@ -4781,7 +4782,7 @@ public function test_get_top_level_background_image_styles() { 'selector' => 'body', ); - $expected_styles = "html{min-height: calc(100% - var(--wp-admin--admin-bar--height, 0px));}:root :where(body){background-image: url('http://example.org/image.png');background-position: center center;background-repeat: no-repeat;background-size: contain;}"; + $expected_styles = "html{min-height: calc(100% - var(--wp-admin--admin-bar--height, 0px));}:root :where(body){background-image: url('http://example.org/image.png');background-position: center center;background-repeat: no-repeat;background-size: contain;background-attachment: fixed;}"; $this->assertSame( $expected_styles, $theme_json->get_styles_for_block( $body_node ), 'Styles returned from "::get_styles_for_block()" with top-level background styles do not match expectations' ); $theme_json = new WP_Theme_JSON_Gutenberg( @@ -4789,16 +4790,17 @@ public function test_get_top_level_background_image_styles() { 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, 'styles' => array( 'background' => array( - 'backgroundImage' => "url('http://example.org/image.png')", - 'backgroundSize' => 'contain', - 'backgroundRepeat' => 'no-repeat', - 'backgroundPosition' => 'center center', + 'backgroundImage' => "url('http://example.org/image.png')", + 'backgroundSize' => 'contain', + 'backgroundRepeat' => 'no-repeat', + 'backgroundPosition' => 'center center', + 'backgroundAttachment' => 'fixed', ), ), ) ); - $expected_styles = "html{min-height: calc(100% - var(--wp-admin--admin-bar--height, 0px));}:root :where(body){background-image: url('http://example.org/image.png');background-position: center center;background-repeat: no-repeat;background-size: contain;}"; + $expected_styles = "html{min-height: calc(100% - var(--wp-admin--admin-bar--height, 0px));}:root :where(body){background-image: url('http://example.org/image.png');background-position: center center;background-repeat: no-repeat;background-size: contain;background-attachment: fixed;}"; $this->assertSame( $expected_styles, $theme_json->get_styles_for_block( $body_node ), 'Styles returned from "::get_styles_for_block()" with top-level background image as string type do not match expectations' ); } From 49d17a1c9472a99634edf198eccf63faf6b455e8 Mon Sep 17 00:00:00 2001 From: ramon Date: Fri, 5 Jul 2024 11:51:49 +1000 Subject: [PATCH 2/9] LINTY --- phpunit/block-supports/background-test.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/phpunit/block-supports/background-test.php b/phpunit/block-supports/background-test.php index c0b87cc988e43..33e72e9b07010 100644 --- a/phpunit/block-supports/background-test.php +++ b/phpunit/block-supports/background-test.php @@ -156,7 +156,7 @@ public function data_background_block_support() { 'backgroundImage' => true, ), 'background_style' => array( - 'backgroundImage' => array( + 'backgroundImage' => array( 'url' => 'https://example.com/image.jpg', 'source' => 'file', ), From 4f2f6c59f66982abbceeac64f5eb03da2c56a5ed Mon Sep 17 00:00:00 2001 From: ramon Date: Mon, 8 Jul 2024 11:26:27 +1000 Subject: [PATCH 3/9] Change the background attachment toggle label to "Fixed background" and flip the checked condition --- .../src/components/global-styles/background-panel.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/background-panel.js b/packages/block-editor/src/components/global-styles/background-panel.js index e0f6edf4e2cbf..f9bfc5f8da2fb 100644 --- a/packages/block-editor/src/components/global-styles/background-panel.js +++ b/packages/block-editor/src/components/global-styles/background-panel.js @@ -569,8 +569,8 @@ function BackgroundSizeControls( { onChange={ updateBackgroundPosition } /> Date: Mon, 8 Jul 2024 11:44:54 +1000 Subject: [PATCH 4/9] Add background attachment block test in theme json --- phpunit/class-wp-theme-json-test.php | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index 8ac4b95fc4025..e6c8bfe9bf12b 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -4812,10 +4812,11 @@ public function test_get_block_background_image_styles() { 'blocks' => array( 'core/group' => array( 'background' => array( - 'backgroundImage' => "url('http://example.org/group.png')", - 'backgroundSize' => 'cover', - 'backgroundRepeat' => 'no-repeat', - 'backgroundPosition' => 'center center', + 'backgroundImage' => "url('http://example.org/group.png')", + 'backgroundSize' => 'cover', + 'backgroundRepeat' => 'no-repeat', + 'backgroundPosition' => 'center center', + 'backgroundAttachment' => 'fixed', ), ), 'core/quote' => array( @@ -4854,7 +4855,7 @@ public function test_get_block_background_image_styles() { ), ); - $group_styles = ":root :where(.wp-block-group){background-image: url('http://example.org/group.png');background-position: center center;background-repeat: no-repeat;background-size: cover;}"; + $group_styles = ":root :where(.wp-block-group){background-image: url('http://example.org/group.png');background-position: center center;background-repeat: no-repeat;background-size: cover;background-attachment: fixed;}"; $this->assertSame( $group_styles, $theme_json->get_styles_for_block( $group_node ), 'Styles returned from "::get_styles_for_block()" with block-level background styles as string type do not match expectations' ); } From 65c3bd748de835b3a15f7e2d2da2a0aaaf5a340a Mon Sep 17 00:00:00 2001 From: ramon Date: Mon, 8 Jul 2024 12:32:56 +1000 Subject: [PATCH 5/9] LINTY McLINTFACE --- lib/class-wp-theme-json-gutenberg.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 6d1b768c79376..9a4bf40c7467c 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -505,7 +505,7 @@ class WP_Theme_JSON_Gutenberg { const VALID_STYLES = array( 'background' => array( 'backgroundImage' => null, - 'backgroundAttachment' => null, + 'backgroundAttachment' => null, 'backgroundPosition' => null, 'backgroundRepeat' => null, 'backgroundSize' => null, From 6a1f2cb92d1764cc4f87db9e57fc4768b91fed75 Mon Sep 17 00:00:00 2001 From: ramon Date: Mon, 8 Jul 2024 13:17:08 +1000 Subject: [PATCH 6/9] Add backport changelog --- backport-changelog/6.7/6991.md | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 backport-changelog/6.7/6991.md diff --git a/backport-changelog/6.7/6991.md b/backport-changelog/6.7/6991.md new file mode 100644 index 0000000000000..4d5f1f85ec768 --- /dev/null +++ b/backport-changelog/6.7/6991.md @@ -0,0 +1,3 @@ +https://github.com/WordPress/wordpress-develop/pull/6991 + +* https://github.com/WordPress/gutenberg/pull/61382 From 439da173e80b411d2671cdca383ee6b281543071 Mon Sep 17 00:00:00 2001 From: ramon Date: Mon, 8 Jul 2024 13:18:17 +1000 Subject: [PATCH 7/9] Add style engine test Add style engine test --- phpunit/style-engine/style-engine-test.php | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/phpunit/style-engine/style-engine-test.php b/phpunit/style-engine/style-engine-test.php index 63e5b3c1c7f7f..fdf5ccebabef9 100644 --- a/phpunit/style-engine/style-engine-test.php +++ b/phpunit/style-engine/style-engine-test.php @@ -506,22 +506,24 @@ public function data_wp_style_engine_get_styles() { 'inline_background_image_url_with_background_size' => array( 'block_styles' => array( 'background' => array( - 'backgroundImage' => array( + 'backgroundImage' => array( 'url' => 'https://example.com/image.jpg', ), - 'backgroundPosition' => 'center', - 'backgroundRepeat' => 'no-repeat', - 'backgroundSize' => 'cover', + 'backgroundPosition' => 'center', + 'backgroundRepeat' => 'no-repeat', + 'backgroundSize' => 'cover', + 'backgroundAttachment' => 'fixed', ), ), 'options' => array(), 'expected_output' => array( - 'css' => "background-image:url('https://example.com/image.jpg');background-position:center;background-repeat:no-repeat;background-size:cover;", + 'css' => "background-image:url('https://example.com/image.jpg');background-position:center;background-repeat:no-repeat;background-size:cover;background-attachment:fixed;", 'declarations' => array( - 'background-image' => "url('https://example.com/image.jpg')", - 'background-position' => 'center', - 'background-repeat' => 'no-repeat', - 'background-size' => 'cover', + 'background-image' => "url('https://example.com/image.jpg')", + 'background-position' => 'center', + 'background-repeat' => 'no-repeat', + 'background-size' => 'cover', + 'background-attachment' => 'fixed', ), ), ), From ed59b9a046aebe0e115b429a2f0897101e595199 Mon Sep 17 00:00:00 2001 From: ramon Date: Wed, 10 Jul 2024 19:34:41 +1000 Subject: [PATCH 8/9] update theme.json schema fix wrong value assignment --- .../theme-json-reference/theme-json-living.md | 1 + .../src/components/global-styles/background-panel.js | 6 +++--- schemas/json/theme.json | 11 +++++++++++ 3 files changed, 15 insertions(+), 3 deletions(-) diff --git a/docs/reference-guides/theme-json-reference/theme-json-living.md b/docs/reference-guides/theme-json-reference/theme-json-living.md index cf9ea9bc39113..d3f0b111d994d 100644 --- a/docs/reference-guides/theme-json-reference/theme-json-living.md +++ b/docs/reference-guides/theme-json-reference/theme-json-living.md @@ -216,6 +216,7 @@ Background styles. | backgroundPosition | string, object | | | backgroundRepeat | string, object | | | backgroundSize | string, object | | +| backgroundAttachment | string, object | | --- diff --git a/packages/block-editor/src/components/global-styles/background-panel.js b/packages/block-editor/src/components/global-styles/background-panel.js index f9bfc5f8da2fb..25ff5887eb5e6 100644 --- a/packages/block-editor/src/components/global-styles/background-panel.js +++ b/packages/block-editor/src/components/global-styles/background-panel.js @@ -451,9 +451,9 @@ function BackgroundSizeControls( { const positionValue = style?.background?.backgroundPosition || inheritedValue?.background?.backgroundPosition; - const attachmentValue = style?.background?.backgroundAttachment || { - ...inheritedValue?.background?.backgroundAttachment, - }; + const attachmentValue = + style?.background?.backgroundAttachment || + inheritedValue?.background?.backgroundAttachment; /* * An `undefined` value is replaced with any supplied diff --git a/schemas/json/theme.json b/schemas/json/theme.json index f1666253e3de3..607228d65b80e 100644 --- a/schemas/json/theme.json +++ b/schemas/json/theme.json @@ -1220,6 +1220,17 @@ "$ref": "#/definitions/refComplete" } ] + }, + "backgroundAttachment": { + "description": "Sets the `background-attachment` CSS property.", + "oneOf": [ + { + "type": "string" + }, + { + "$ref": "#/definitions/refComplete" + } + ] } }, "additionalProperties": false From ef75e14b3efc502d5bc36234857752b2793365e1 Mon Sep 17 00:00:00 2001 From: ramon Date: Wed, 10 Jul 2024 19:45:57 +1000 Subject: [PATCH 9/9] Pass resolved links to the component --- .../edit-site/src/components/global-styles/screen-block.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/screen-block.js b/packages/edit-site/src/components/global-styles/screen-block.js index fd71cdfa63068..a5358388e89c7 100644 --- a/packages/edit-site/src/components/global-styles/screen-block.js +++ b/packages/edit-site/src/components/global-styles/screen-block.js @@ -84,6 +84,7 @@ const { FiltersPanel: StylesFiltersPanel, ImageSettingsPanel, AdvancedPanel: StylesAdvancedPanel, + useGlobalStyleLinks, } = unlock( blockEditorPrivateApis ); function ScreenBlock( { name, variation } ) { @@ -103,6 +104,7 @@ function ScreenBlock( { name, variation } ) { const [ rawSettings, setSettings ] = useGlobalSetting( '', name ); const settings = useSettingsForBlockElement( rawSettings, name ); const blockType = getBlockType( name ); + const _links = useGlobalStyleLinks(); // Only allow `blockGap` support if serialization has not been skipped, to be sure global spacing can be applied. if ( @@ -311,10 +313,7 @@ function ScreenBlock( { name, variation } ) { onChange={ setStyle } settings={ settings } defaultValues={ BACKGROUND_BLOCK_DEFAULT_VALUES } - defaultControls={ - blockType?.supports?.background - ?.__experimentalDefaultControls - } + themeFileURIs={ _links?.[ 'wp:theme-file' ] } /> ) }