vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-06-28 22:30:04 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Editor: add background image support.

Browse Source 
Adds a new background block support with the ability to set a background image on blocks that opt into it.

Props andrewserong, mukesh27.
Fixes #59357.


git-svn-id: https://develop.svn.wordpress.org/trunk@56614 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Isabel Brison
2023-09-19 01:27:43 +00:00
parent d4cf682716
commit 1327f172cd
7 changed files with 385 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
src/wp-includes/block-supports/background.php Normal file
View File

@@ -0,0 +1,112 @@
<?php
/**
* Background block support flag.
*
* @package WordPress
* @since 6.4.0
*/
/**
* Registers the style block attribute for block types that support it.
*
* @since 6.4.0
* @access private
*
* @param WP_Block_Type $block_type Block Type.
*/
function wp_register_background_support( $block_type ) {
// Setup attributes and styles within that if needed.
if ( ! $block_type->attributes ) {
$block_type->attributes = array();
}
// Check for existing style attribute definition e.g. from block.json.
if ( array_key_exists( 'style', $block_type->attributes ) ) {
return;
}
$has_background_support = block_has_support( $block_type, array( 'background' ), false );
if ( $has_background_support ) {
$block_type->attributes['style'] = array(
'type' => 'object',
);
}
}
/**
* Renders the background styles to the block wrapper.
* This block support uses the `render_block` hook to ensure that
* it is also applied to non-server-rendered blocks.
*
* @since 6.4.0
* @access private
*
* @param string $block_content Rendered block content.
* @param array $block Block object.
* @return string Filtered block content.
*/
function wp_render_background_support( $block_content, $block ) {
$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
$block_attributes = $block['attrs'];
$has_background_image_support = block_has_support( $block_type, array( 'background', 'backgroundImage' ), false );
if (
! $has_background_image_support ||
wp_should_skip_block_supports_serialization( $block_type, 'background', 'backgroundImage' )
) {
return $block_content;
}
$background_image_source = _wp_array_get( $block_attributes, array( 'style', 'background', 'backgroundImage', 'source' ), null );
$background_image_url = _wp_array_get( $block_attributes, array( 'style', 'background', 'backgroundImage', 'url' ), null );
$background_size = _wp_array_get( $block_attributes, array( 'style', 'background', 'backgroundSize' ), 'cover' );
$background_block_styles = array();
if (
'file' === $background_image_source &&
$background_image_url
) {
// 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;
}
$styles = wp_style_engine_get_styles( array( 'background' => $background_block_styles ) );
if ( ! empty( $styles['css'] ) ) {
// Inject background styles to the first element, presuming it's the wrapper, if it exists.
$tags = new WP_HTML_Tag_Processor( $block_content );
if ( $tags->next_tag() ) {
$existing_style = $tags->get_attribute( 'style' );
$updated_style = '';
if ( ! empty( $existing_style ) ) {
$updated_style = $existing_style;
if ( ! str_ends_with( $existing_style, ';' ) ) {
$updated_style .= ';';
}
}
$updated_style .= $styles['css'];
$tags->set_attribute( 'style', $updated_style );
}
return $tags->get_updated_html();
}
return $block_content;
}
// Register the block support.
WP_Block_Supports::get_instance()->register(
'background',
array(
'register_attribute' => 'wp_register_background_support',
)
);
add_filter( 'render_block', 'wp_render_background_support', 10, 2 );

9
src/wp-includes/class-wp-theme-json.php
View File

@@ -342,13 +342,16 @@ class WP_Theme_JSON {
* @since 6.2.0 Added `dimensions.minHeight`, 'shadow.presets', 'shadow.defaultPresets',
* `position.fixed` and `position.sticky`.
* @since 6.3.0 Added support for `typography.textColumns`, removed `layout.definitions`.
* @since 6.4.0 Added `layout.allowEditing` and `typography.writingMode`.
*
* @since 6.4.0 Added support for `layout.allowEditing`, `background.backgroundImage`,
* and `typography.writingMode`.
* @var array
*/
const VALID_SETTINGS = array(
'appearanceTools' => null,
'useRootPaddingAwareAlignments' => null,
'background' => array(
'backgroundImage' => null,
),
'border' => array(
'color' => null,
'radius' => null,
@@ -563,9 +566,11 @@ class WP_Theme_JSON {
*
* @since 6.0.0
* @since 6.2.0 Added `dimensions.minHeight` and `position.sticky`.
* @since 6.4.0 Added `background.backgroundImage`.
* @var array
*/
const APPEARANCE_TOOLS_OPT_INS = array(
array( 'background', 'backgroundImage' ),
array( 'border', 'color' ),
array( 'border', 'radius' ),
array( 'border', 'style' ),

52
src/wp-includes/style-engine/class-wp-style-engine.php
View File

@@ -22,6 +22,7 @@
* @access private
* @since 6.1.0
* @since 6.3.0 Added support for text-columns.
* @since 6.4.0 Added support for background.backgroundImage.
*/
#[AllowDynamicProperties]
final class WP_Style_Engine {
@@ -51,6 +52,21 @@ final class WP_Style_Engine {
* @var array
*/
const BLOCK_STYLE_DEFINITIONS_METADATA = array(
'background' => 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(
'property_keys' => array(
'default' => 'background-size',
),
'path' => array( 'background', 'backgroundSize' ),
),
),
'color' => array(
'text' => array(
'property_keys' => array(
@@ -589,6 +605,42 @@ final class WP_Style_Engine {
return $css_declarations;
}
/**
* Style value parser that constructs a CSS definition array comprising a single CSS property and value.
* If the provided value is an array containing a `url` property, the function will return a CSS definition array
* with a single property and value, with `url` escaped and injected into a CSS `url()` function,
* e.g., array( 'background-image' => "url( '...' )" ).
*
* @since 6.4.0
*
* @param array $style_value A single raw style value from $block_styles array.
* @param array $style_definition A single style definition from BLOCK_STYLE_DEFINITIONS_METADATA.
* @return string[] An associative array of CSS definitions, e.g., array( "$property" => "$value", "$property" => "$value" ).
*/
protected static function get_url_or_value_css_declaration( $style_value, $style_definition ) {
if ( empty( $style_value ) ) {
return array();
}
$css_declarations = array();
if ( isset( $style_definition['property_keys']['default'] ) ) {
$value = null;
if ( ! empty( $style_value['url'] ) ) {
$value = "url('" . $style_value['url'] . "')";
} elseif ( is_string( $style_value ) ) {
$value = $style_value;
}
if ( null !== $value ) {
$css_declarations[ $style_definition['property_keys']['default'] ] = $value;
}
}
return $css_declarations;
}
/**
* Returns compiled CSS from CSS declarations.
*

1
src/wp-settings.php
View File

@@ -340,6 +340,7 @@ require ABSPATH . WPINC . '/block-patterns.php';
require ABSPATH . WPINC . '/class-wp-block-supports.php';
require ABSPATH . WPINC . '/block-supports/utils.php';
require ABSPATH . WPINC . '/block-supports/align.php';
require ABSPATH . WPINC . '/block-supports/background.php';
require ABSPATH . WPINC . '/block-supports/border.php';
require ABSPATH . WPINC . '/block-supports/colors.php';
require ABSPATH . WPINC . '/block-supports/custom-classname.php';

188
tests/phpunit/tests/block-supports/wpRenderBackgroundSupport.php Normal file
View File

@@ -0,0 +1,188 @@
<?php
/**
* @group block-supports
*
* @covers ::wp_render_background_support
*/
class Tests_Block_Supports_WpRenderBackgroundSupport extends WP_UnitTestCase {
/**
* @var string|null
*/
private $test_block_name;
/**
* Theme root directory.
*
* @var string
*/
private $theme_root;
/**
* Original theme directory.
*
* @var string
*/
private $orig_theme_dir;
public function set_up() {
parent::set_up();
$this->test_block_name = null;
$this->theme_root = realpath( DIR_TESTDATA . '/themedir1' );
$this->orig_theme_dir = $GLOBALS['wp_theme_directories'];
// /themes is necessary as theme.php functions assume /themes is the root if there is only one root.
$GLOBALS['wp_theme_directories'] = array( WP_CONTENT_DIR . '/themes', $this->theme_root );
add_filter( 'theme_root', array( $this, 'filter_set_theme_root' ) );
add_filter( 'stylesheet_root', array( $this, 'filter_set_theme_root' ) );
add_filter( 'template_root', array( $this, 'filter_set_theme_root' ) );
// Clear caches.
wp_clean_themes_cache();
unset( $GLOBALS['wp_themes'] );
WP_Style_Engine_CSS_Rules_Store::remove_all_stores();
}
public function tear_down() {
$GLOBALS['wp_theme_directories'] = $this->orig_theme_dir;
// Clear up the filters to modify the theme root.
remove_filter( 'theme_root', array( $this, 'filter_set_theme_root' ) );
remove_filter( 'stylesheet_root', array( $this, 'filter_set_theme_root' ) );
remove_filter( 'template_root', array( $this, 'filter_set_theme_root' ) );
wp_clean_themes_cache();
unset( $GLOBALS['wp_themes'] );
WP_Style_Engine_CSS_Rules_Store::remove_all_stores();
unregister_block_type( $this->test_block_name );
$this->test_block_name = null;
parent::tear_down();
}
public function filter_set_theme_root() {
return $this->theme_root;
}
/**
* Tests that background image block support works as expected.
*
* @ticket 59357
*
* @covers ::wp_render_background_support
*
* @dataProvider data_background_block_support
*
* @param string $theme_name The theme to switch to.
* @param string $block_name The test block name to register.
* @param mixed $background_settings The background block support settings.
* @param mixed $background_style The background styles within the block attributes.
* @param string $expected_wrapper Expected markup for the block wrapper.
* @param string $wrapper Existing markup for the block wrapper.
*/
public function test_background_block_support( $theme_name, $block_name, $background_settings, $background_style, $expected_wrapper, $wrapper ) {
switch_theme( $theme_name );
$this->test_block_name = $block_name;
register_block_type(
$this->test_block_name,
array(
'api_version' => 2,
'attributes' => array(
'style' => array(
'type' => 'object',
),
),
'supports' => array(
'background' => $background_settings,
),
)
);
$block = array(
'blockName' => $block_name,
'attrs' => array(
'style' => array(
'background' => $background_style,
),
),
);
$actual = wp_render_background_support( $wrapper, $block );
$this->assertEquals(
$expected_wrapper,
$actual,
'Background block wrapper markup should be correct'
);
}
/**
* Data provider.
*
* @return array
*/
public function data_background_block_support() {
return array(
'background image style 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',
),
),
'expected_wrapper' => '<div style="background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
'wrapper' => '<div>Content</div>',
),
'background image style is appended if a style attribute already exists' => 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',
),
),
'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>',
),
'background image style is appended if a style attribute containing multiple styles already exists' => 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',
),
),
'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>',
),
'background image style is not applied if the block does not support background image' => array(
'theme_name' => 'block-theme-child-with-fluid-typography',
'block_name' => 'test/background-rules-are-not-output',
'background_settings' => array(
'backgroundImage' => false,
),
'background_style' => array(
'backgroundImage' => array(
'url' => 'https://example.com/image.jpg',
'source' => 'file',
),
),
'expected_wrapper' => '<div>Content</div>',
'wrapper' => '<div>Content</div>',
),
);
}
}

19
tests/phpunit/tests/style-engine/styleEngine.php
View File

@@ -509,6 +509,25 @@ class Tests_wpStyleEngine extends WP_UnitTestCase {
),
),
),
'inline_background_image_url_with_background_size' => array(
'block_styles' => array(
'background' => array(
'backgroundImage' => array(
'url' => 'https://example.com/image.jpg',
),
'backgroundSize' => 'cover',
),
),
'options' => array(),
'expected_output' => array(
'css' => "background-image:url('https://example.com/image.jpg');background-size:cover;",
'declarations' => array(
'background-image' => "url('https://example.com/image.jpg')",
'background-size' => 'cover',
),
),
),
);
}

6
tests/phpunit/tests/theme/wpThemeJson.php
View File

@@ -262,6 +262,9 @@ class Tests_Theme_wpThemeJson extends WP_UnitTestCase {
$actual = $theme_json->get_settings();
$expected = array(
'background' => array(
'backgroundImage' => true,
),
'border' => array(
'width' => true,
'style' => true,
@@ -295,6 +298,9 @@ class Tests_Theme_wpThemeJson extends WP_UnitTestCase {
),
),
'core/group' => array(
'background' => array(
'backgroundImage' => true,
),
'border' => array(
'width' => true,
'style' => true,