Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Backport background size and repeat block support features from Gutenberg #5828

Closed
wants to merge 9 commits into from
Closed

Backport background size and repeat block support features from Gutenberg #5828

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
6423a57
Backport background size and repeat block support features from Guten…
andrewserong Jan 2, 2024
977cfaf
Fix linting issue
andrewserong Jan 2, 2024
d9f0819
Update reference to trac ticket
andrewserong Jan 2, 2024
5f80467
Fix linting issue
andrewserong Jan 2, 2024
6b4dca4
Update src/wp-includes/style-engine/class-wp-style-engine.php
andrewserong Jan 2, 2024
db08860
Update comment for background output
andrewserong Jan 3, 2024
bf5bed8
Add has-background classname output
andrewserong Jan 7, 2024
185ee76
Empty commit to re-run tests
andrewserong Jan 8, 2024
c2982a3
Return early if there's no source and url
andrewserong Jan 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 22 additions & 2 deletions src/wp-includes/block-supports/background.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ function wp_register_background_support( $block_type ) {
* it is also applied to non-server-rendered blocks.
*
* @since 6.4.0
* @since 6.5.0 Added support for `backgroundPosition` and `backgroundRepeat` output.
* @access private
*
* @param string $block_content Rendered block content.
Expand All @@ -64,9 +65,20 @@ function wp_render_background_support( $block_content, $block ) {
$background_image_url = isset( $block_attributes['style']['background']['backgroundImage']['url'] )
? $block_attributes['style']['background']['backgroundImage']['url']
: null;

if ( ! $background_image_source && ! $background_image_url ) {
return $block_content;
}

$background_size = isset( $block_attributes['style']['background']['backgroundSize'] )
? $block_attributes['style']['background']['backgroundSize']
: 'cover';
$background_position = isset( $block_attributes['style']['background']['backgroundPosition'] )
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we check if a background image url exists as part of the condition that checks for block support above? That way we could return early if there is no image. Or are there reasons to still go through this logic in the absence of a url?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could do an early return. It was mostly laid out like it currently is to support subsequent updates where we might have a range of different values for the background image source. I.e.

  • 'featured_image' === $background_image_source
  • 'id' === $background_image_source (for referencing a media library item directly), etc

So we could do an early return just before we define $background_size, something like:

if ( ! $background_image_source && ! $background_image_url ) {
  return $block_content;
}

Would that be worth doing, do you think?

Copy link
Contributor

@tellthemachines tellthemachines Jan 9, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wouldn't those sources still require defining a URL though? We always need the URL in order to output the styles. But yeah I guess in any case, in subsequent updates we can add to the condition if that changes.

Edit: to be clear, I do think it's worth returning as early as possible 😄

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okie-doke! I'll update with an early return 👍

For the featured_image case we won't have a url in the block attributes, as that would get generated at render time. But that could happen anywhere we like in the function, so we could always put that logic before this $background_position line and do an early return if we don't have a featured image, either. Let's take a look at that part when we go to implement the feature 🙂

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added an early return in c2982a3 — let me know if you'd like me to tweak it!

? $block_attributes['style']['background']['backgroundPosition']
: null;
$background_repeat = isset( $block_attributes['style']['background']['backgroundRepeat'] )
? $block_attributes['style']['background']['backgroundRepeat']
: null;

$background_block_styles = array();

Expand All @@ -76,8 +88,15 @@ function wp_render_background_support( $block_content, $block ) {
) {
// Set file based background URL.
$background_block_styles['backgroundImage']['url'] = $background_image_url;
// Only output the background size when an image url is set.
$background_block_styles['backgroundSize'] = $background_size;
// Only output the background size and repeat when an image url is set.
$background_block_styles['backgroundSize'] = $background_size;
$background_block_styles['backgroundRepeat'] = $background_repeat;
$background_block_styles['backgroundPosition'] = $background_position;

// If the background size is set to `contain` and no position is set, set the position to `center`.
if ( 'contain' === $background_size && ! isset( $background_position ) ) {
$background_block_styles['backgroundPosition'] = 'center';
}
}

$styles = wp_style_engine_get_styles( array( 'background' => $background_block_styles ) );
Expand All @@ -99,6 +118,7 @@ function wp_render_background_support( $block_content, $block ) {

$updated_style .= $styles['css'];
$tags->set_attribute( 'style', $updated_style );
$tags->add_class( 'has-background' );
}

return $tags->get_updated_html();
Expand Down
6 changes: 5 additions & 1 deletion src/wp-includes/class-wp-theme-json.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -344,14 +344,16 @@ class WP_Theme_JSON {
* @since 6.3.0 Added support for `typography.textColumns`, removed `layout.definitions`.
* @since 6.4.0 Added support for `layout.allowEditing`, `background.backgroundImage`,
* `typography.writingMode`, `lightbox.enabled` and `lightbox.allowEditing`.
* @since 6.5.0 Added support for `layout.allowCustomContentAndWideSize`.
* @since 6.5.0 Added support for `layout.allowCustomContentAndWideSize` and
* `background.backgroundSize`.
* @var array
*/
const VALID_SETTINGS = array(
'appearanceTools' => null,
'useRootPaddingAwareAlignments' => null,
'background' => array(
'backgroundImage' => null,
'backgroundSize' => null,
),
'border' => array(
'color' => null,
Expand Down Expand Up @@ -573,10 +575,12 @@ public static function get_element_class_name( $element ) {
* @since 6.0.0
* @since 6.2.0 Added `dimensions.minHeight` and `position.sticky`.
* @since 6.4.0 Added `background.backgroundImage`.
* @since 6.5.0 Added `background.backgroundSize`.
* @var array
*/
const APPEARANCE_TOOLS_OPT_INS = array(
array( 'background', 'backgroundImage' ),
array( 'background', 'backgroundSize' ),
array( 'border', 'color' ),
array( 'border', 'radius' ),
array( 'border', 'style' ),
Expand Down
17 changes: 15 additions & 2 deletions src/wp-includes/style-engine/class-wp-style-engine.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
* @since 6.1.0
* @since 6.3.0 Added support for text-columns.
* @since 6.4.0 Added support for background.backgroundImage.
* @since 6.5.0 Added support for background.backgroundPosition and background.backgroundRepeat.
*/
#[AllowDynamicProperties]
final class WP_Style_Engine {
Expand All @@ -48,14 +49,26 @@ final class WP_Style_Engine {
*/
const BLOCK_STYLE_DEFINITIONS_METADATA = array(
'background' => 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' ),
),
'backgroundSize' => array(
'backgroundPosition' => array(
'property_keys' => array(
'default' => 'background-position',
),
'path' => array( 'background', 'backgroundPosition' ),
),
'backgroundRepeat' => array(
'property_keys' => array(
'default' => 'background-repeat',
),
'path' => array( 'background', 'backgroundRepeat' ),
),
'backgroundSize' => array(
'property_keys' => array(
'default' => 'background-size',
),
Expand Down
28 changes: 23 additions & 5 deletions tests/phpunit/tests/block-supports/wpRenderBackgroundSupport.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ public function filter_set_theme_root() {
* Tests that background image block support works as expected.
*
* @ticket 59357
* @ticket 60175
*
* @covers ::wp_render_background_support
*
Expand Down Expand Up @@ -135,7 +136,24 @@ public function data_background_block_support() {
'source' => 'file',
),
),
'expected_wrapper' => '<div style="background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
'expected_wrapper' => '<div class="has-background" style="background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
'wrapper' => '<div>Content</div>',
),
'background image style with contain, position, and repeat is applied' => array(
'theme_name' => 'block-theme-child-with-fluid-typography',
'block_name' => 'test/background-rules-are-output',
'background_settings' => array(
'backgroundImage' => true,
),
'background_style' => array(
'backgroundImage' => array(
'url' => 'https://example.com/image.jpg',
'source' => 'file',
),
'backgroundRepeat' => 'no-repeat',
'backgroundSize' => 'contain',
),
'expected_wrapper' => '<div class="has-background" style="background-image:url(&#039;https://example.com/image.jpg&#039;);background-position:center;background-repeat:no-repeat;background-size:contain;">Content</div>',
'wrapper' => '<div>Content</div>',
),
'background image style is appended if a style attribute already exists' => array(
Expand All @@ -150,8 +168,8 @@ public function data_background_block_support() {
'source' => 'file',
),
),
'expected_wrapper' => '<div classname="wp-block-test" style="color: red;background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
'wrapper' => '<div classname="wp-block-test" style="color: red">Content</div>',
'expected_wrapper' => '<div class="wp-block-test has-background" style="color: red;background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
'wrapper' => '<div class="wp-block-test" style="color: red">Content</div>',
),
'background image style is appended if a style attribute containing multiple styles already exists' => array(
'theme_name' => 'block-theme-child-with-fluid-typography',
Expand All @@ -165,8 +183,8 @@ public function data_background_block_support() {
'source' => 'file',
),
),
'expected_wrapper' => '<div classname="wp-block-test" style="color: red;font-size: 15px;background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
'wrapper' => '<div classname="wp-block-test" style="color: red;font-size: 15px;">Content</div>',
'expected_wrapper' => '<div class="wp-block-test has-background" style="color: red;font-size: 15px;background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
'wrapper' => '<div class="wp-block-test" style="color: red;font-size: 15px;">Content</div>',
),
'background image style is not applied if the block does not support background image' => array(
'theme_name' => 'block-theme-child-with-fluid-typography',
Expand Down
15 changes: 10 additions & 5 deletions tests/phpunit/tests/style-engine/styleEngine.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ public function tear_down() {
* @ticket 56467
* @ticket 58549
* @ticket 58590
* @ticket 60175
*
* @covers ::wp_style_engine_get_styles
*
Expand Down Expand Up @@ -513,18 +514,22 @@ 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',
),
'backgroundSize' => 'cover',
'backgroundPosition' => 'center',
'backgroundRepeat' => 'no-repeat',
'backgroundSize' => 'cover',
),
),
'options' => array(),
'expected_output' => array(
'css' => "background-image:url('https://example.com/image.jpg');background-size:cover;",
'css' => "background-image:url('https://example.com/image.jpg');background-position:center;background-repeat:no-repeat;background-size:cover;",
'declarations' => array(
'background-image' => "url('https://example.com/image.jpg')",
'background-size' => 'cover',
'background-image' => "url('https://example.com/image.jpg')",
'background-position' => 'center',
'background-repeat' => 'no-repeat',
'background-size' => 'cover',
),
),
),
Expand Down
2 changes: 2 additions & 0 deletions tests/phpunit/tests/theme/wpThemeJson.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -264,6 +264,7 @@ public function test_get_settings_appearance_true_opts_in() {
$expected = array(
'background' => array(
'backgroundImage' => true,
'backgroundSize' => true,
),
'border' => array(
'width' => true,
Expand Down Expand Up @@ -300,6 +301,7 @@ public function test_get_settings_appearance_true_opts_in() {
'core/group' => array(
'background' => array(
'backgroundImage' => true,
'backgroundSize' => true,
),
'border' => array(
'width' => true,
Expand Down
Loading