close
Skip to content

Commit d92585f

Browse files
ellatrixellatrix
committed
Gutenberg PHP merge: block level custom CSS.
Merges/syncs PHP changes from WordPress/gutenberg#73959. Developed in #10777. Props glendaviesnz, shailu25, scruffian, aaronrobertshaw, mamaduka, shimotomoki. Fixes #64544. git-svn-id: https://develop.svn.wordpress.org/trunk@61678 602fd350-edb4-49c9-b593-d223f7449a82
1 parent 8301c96 commit d92585f

7 files changed

Lines changed: 541 additions & 2 deletions

File tree

‎src/wp-includes/block-editor.php‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -658,6 +658,8 @@ function get_block_editor_settings( array $custom_settings, $block_editor_contex
658658
$editor_settings = apply_filters_deprecated( 'block_editor_settings', array( $editor_settings, $post ), '5.8.0', 'block_editor_settings_all' );
659659
}
660660

661+
$editor_settings['canEditCSS'] = current_user_can( 'edit_css' );
662+
661663
return $editor_settings;
662664
}
663665

‎src/wp-includes/block-supports/custom-css.php‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
<?php
2+
/**
3+
* Custom CSS block support.
4+
*
5+
* @package WordPress
6+
*/
7+
8+
/**
9+
* Render the custom CSS stylesheet and add class name to block as required.
10+
*
11+
* @since 7.0.0
12+
*
13+
* @param array $parsed_block The parsed block.
14+
* @return array The same parsed block with custom CSS class name added if appropriate.
15+
*/
16+
function wp_render_custom_css_support_styles( $parsed_block ) {
17+
$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $parsed_block['blockName'] );
18+
19+
if ( ! block_has_support( $block_type, 'customCSS', true ) ) {
20+
return $parsed_block;
21+
}
22+
23+
$custom_css = trim( $parsed_block['attrs']['style']['css'] ?? '' );
24+
25+
if ( empty( $custom_css ) ) {
26+
return $parsed_block;
27+
}
28+
29+
// Validate CSS doesn't contain HTML markup (same validation as global styles REST API).
30+
if ( preg_match( '#</?\w+#', $custom_css ) ) {
31+
return $parsed_block;
32+
}
33+
34+
// Generate a unique class name for this block instance.
35+
$class_name = wp_unique_id_from_values( $parsed_block, 'wp-custom-css-' );
36+
$updated_class_name = isset( $parsed_block['attrs']['className'] )
37+
? $parsed_block['attrs']['className'] . " $class_name"
38+
: $class_name;
39+
40+
_wp_array_set( $parsed_block, array( 'attrs', 'className' ), $updated_class_name );
41+
42+
// Process the custom CSS using the same method as global styles.
43+
$selector = '.' . $class_name;
44+
$processed_css = WP_Theme_JSON::process_blocks_custom_css( $custom_css, $selector );
45+
46+
if ( ! empty( $processed_css ) ) {
47+
/*
48+
* Register and add inline style for block custom CSS.
49+
* The style depends on global-styles to ensure custom CSS loads after
50+
* and can override global styles.
51+
*/
52+
wp_register_style( 'wp-block-custom-css', false, array( 'global-styles' ) );
53+
wp_add_inline_style( 'wp-block-custom-css', $processed_css );
54+
}
55+
56+
return $parsed_block;
57+
}
58+
59+
/**
60+
* Enqueues the block custom CSS styles.
61+
*
62+
* @since 7.0.0
63+
*/
64+
function wp_enqueue_block_custom_css() {
65+
wp_enqueue_style( 'wp-block-custom-css' );
66+
}
67+
68+
/**
69+
* Applies the custom CSS class name to the block's rendered HTML.
70+
*
71+
* The class name is generated in `wp_render_custom_css_support_styles`
72+
* and stored in block attributes. This filter adds it to the actual markup.
73+
*
74+
* @since 7.0.0
75+
*
76+
* @param string $block_content Rendered block content.
77+
* @param array $block Block object.
78+
* @return string Filtered block content.
79+
*/
80+
function wp_render_custom_css_class_name( $block_content, $block ) {
81+
$class_string = $block['attrs']['className'] ?? '';
82+
preg_match( '/\bwp-custom-css-\S+\b/', $class_string, $matches );
83+
84+
if ( empty( $matches ) ) {
85+
return $block_content;
86+
}
87+
88+
$tags = new WP_HTML_Tag_Processor( $block_content );
89+
90+
if ( $tags->next_tag() ) {
91+
$tags->add_class( 'has-custom-css' );
92+
$tags->add_class( $matches[0] );
93+
}
94+
95+
return $tags->get_updated_html();
96+
}
97+
98+
add_filter( 'render_block', 'wp_render_custom_css_class_name', 10, 2 );
99+
add_filter( 'render_block_data', 'wp_render_custom_css_support_styles', 10, 1 );
100+
add_action( 'wp_enqueue_scripts', 'wp_enqueue_block_custom_css', 1 );
101+
102+
/**
103+
* Registers the style block attribute for block types that support it.
104+
*
105+
* @param WP_Block_Type $block_type Block Type.
106+
*/
107+
function wp_register_custom_css_support( $block_type ) {
108+
// Setup attributes and styles within that if needed.
109+
if ( ! $block_type->attributes ) {
110+
$block_type->attributes = array();
111+
}
112+
113+
// Check for existing style attribute definition e.g. from block.json.
114+
if ( array_key_exists( 'style', $block_type->attributes ) ) {
115+
return;
116+
}
117+
118+
$has_custom_css_support = block_has_support( $block_type, array( 'customCSS' ), true );
119+
120+
if ( $has_custom_css_support ) {
121+
$block_type->attributes['style'] = array(
122+
'type' => 'object',
123+
);
124+
}
125+
}
126+
127+
// Register the block support.
128+
WP_Block_Supports::get_instance()->register(
129+
'custom-css',
130+
array(
131+
'register_attribute' => 'wp_register_custom_css_support',
132+
)
133+
);

‎src/wp-includes/class-wp-theme-json.php‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1520,12 +1520,13 @@ public function get_stylesheet( $types = array( 'variables', 'styles', 'presets'
15201520
*
15211521
* @since 6.2.0
15221522
* @since 6.6.0 Enforced 0-1-0 specificity for block custom CSS selectors.
1523+
* @since 7.0.0 Made public for use in custom-css block support.
15231524
*
15241525
* @param string $css The CSS to process.
15251526
* @param string $selector The selector to nest.
15261527
* @return string The processed CSS.
15271528
*/
1528-
protected function process_blocks_custom_css( $css, $selector ) {
1529+
public static function process_blocks_custom_css( $css, $selector ) {
15291530
$processed_css = '';
15301531

15311532
if ( empty( $css ) ) {

‎src/wp-settings.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -415,6 +415,7 @@
415415
require ABSPATH . WPINC . '/block-supports/aria-label.php';
416416
require ABSPATH . WPINC . '/block-supports/anchor.php';
417417
require ABSPATH . WPINC . '/block-supports/block-visibility.php';
418+
require ABSPATH . WPINC . '/block-supports/custom-css.php';
418419
require ABSPATH . WPINC . '/style-engine.php';
419420
require ABSPATH . WPINC . '/style-engine/class-wp-style-engine.php';
420421
require ABSPATH . WPINC . '/style-engine/class-wp-style-engine-css-declarations.php';

‎tests/phpunit/tests/block-supports/wpRenderCustomCssClassName.php‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
<?php
2+
3+
/**
4+
* @group block-supports
5+
*
6+
* @covers ::wp_render_custom_css_class_name
7+
*/
8+
class Tests_Block_Supports_WpRenderCustomCssClassName extends WP_UnitTestCase {
9+
10+
/**
11+
* Tests that the custom CSS class name is applied to block content.
12+
*
13+
* @ticket 64544
14+
*
15+
* @covers ::wp_render_custom_css_class_name
16+
*
17+
* @dataProvider data_adds_class_to_content
18+
*
19+
* @param string $block_content The rendered block content.
20+
* @param array $block The block data.
21+
* @param string $expected_class The expected class in the output.
22+
*/
23+
public function test_adds_class_to_content( $block_content, $block, $expected_class ) {
24+
$result = wp_render_custom_css_class_name( $block_content, $block );
25+
26+
$this->assertStringContainsString( $expected_class, $result, 'Custom CSS class should be present in the output.' );
27+
}
28+
29+
/**
30+
* Data provider.
31+
*
32+
* @return array
33+
*/
34+
public function data_adds_class_to_content() {
35+
return array(
36+
'class is added to block content' => array(
37+
'block_content' => '<div class="wp-block-paragraph">Test content</div>',
38+
'block' => array(
39+
'blockName' => 'core/paragraph',
40+
'attrs' => array(
41+
'className' => 'wp-custom-css-123abc',
42+
),
43+
),
44+
'expected_class' => 'wp-custom-css-123abc',
45+
),
46+
'class is extracted from mixed class names' => array(
47+
'block_content' => '<p>Test content</p>',
48+
'block' => array(
49+
'blockName' => 'core/paragraph',
50+
'attrs' => array(
51+
'className' => 'my-class wp-custom-css-mixed123 another-class',
52+
),
53+
),
54+
'expected_class' => 'wp-custom-css-mixed123',
55+
),
56+
);
57+
}
58+
59+
/**
60+
* Tests that existing classes are preserved when the custom CSS class is added.
61+
*
62+
* @ticket 64544
63+
*
64+
* @covers ::wp_render_custom_css_class_name
65+
*/
66+
public function test_preserves_existing_classes() {
67+
$block_content = '<div class="existing-class another-class">Test content</div>';
68+
$block = array(
69+
'blockName' => 'core/paragraph',
70+
'attrs' => array(
71+
'className' => 'wp-custom-css-456def',
72+
),
73+
);
74+
75+
$result = wp_render_custom_css_class_name( $block_content, $block );
76+
77+
$this->assertStringContainsString( 'existing-class', $result, 'Existing classes should be preserved.' );
78+
$this->assertStringContainsString( 'another-class', $result, 'All existing classes should be preserved.' );
79+
$this->assertStringContainsString( 'wp-custom-css-456def', $result, 'Custom CSS class should be added.' );
80+
}
81+
82+
/**
83+
* Tests that block content is returned unchanged when no custom CSS class should be applied.
84+
*
85+
* @ticket 64544
86+
*
87+
* @covers ::wp_render_custom_css_class_name
88+
*
89+
* @dataProvider data_returns_unchanged_content
90+
*
91+
* @param string $block_content The rendered block content.
92+
* @param array $block The block data.
93+
*/
94+
public function test_returns_unchanged_content( $block_content, $block ) {
95+
$result = wp_render_custom_css_class_name( $block_content, $block );
96+
97+
$this->assertSame( $block_content, $result, 'Block content should remain unchanged.' );
98+
}
99+
100+
/**
101+
* Data provider.
102+
*
103+
* @return array
104+
*/
105+
public function data_returns_unchanged_content() {
106+
return array(
107+
'no custom CSS class in attrs' => array(
108+
'block_content' => '<div class="wp-block-paragraph">Test content</div>',
109+
'block' => array(
110+
'blockName' => 'core/paragraph',
111+
'attrs' => array(
112+
'className' => 'some-other-class',
113+
),
114+
),
115+
),
116+
'className is not set in attrs' => array(
117+
'block_content' => '<div class="wp-block-paragraph">Test content</div>',
118+
'block' => array(
119+
'blockName' => 'core/paragraph',
120+
'attrs' => array(),
121+
),
122+
),
123+
'block content is empty' => array(
124+
'block_content' => '',
125+
'block' => array(
126+
'blockName' => 'core/paragraph',
127+
'attrs' => array(
128+
'className' => 'wp-custom-css-789ghi',
129+
),
130+
),
131+
),
132+
);
133+
}
134+
}

0 commit comments

Comments
 (0)