Add editor only selectors to block type

WordPress · Mar 16, 2023 · 59033a6 · 59033a6
1 parent 7876305
commit 59033a6
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 19 deletions.
diff --git a/src/wp-admin/includes/post.php b/src/wp-admin/includes/post.php
@@ -2193,6 +2193,7 @@ function get_block_editor_server_block_settings() {
 		'provides_context' => 'providesContext',
 		'uses_context'     => 'usesContext',
 		'selectors'        => 'selectors',
+		'editor_selectors' => 'editorSelectors',
 		'supports'         => 'supports',
 		'category'         => 'category',
 		'styles'           => 'styles',

diff --git a/src/wp-includes/blocks.php b/src/wp-includes/blocks.php
@@ -383,6 +383,7 @@ function register_block_type_from_metadata( $file_or_folder, $args = array() ) {
 		'providesContext' => 'provides_context',
 		'usesContext'     => 'uses_context',
 		'selectors'       => 'selectors',
+		'editorSelectors' => 'editor_selectors',
 		'supports'        => 'supports',
 		'styles'          => 'styles',
 		'variations'      => 'variations',

diff --git a/src/wp-includes/class-wp-block-type.php b/src/wp-includes/class-wp-block-type.php
@@ -117,6 +117,14 @@ class WP_Block_Type {
 	 */
 	public $variations = array();
 
+	/**
+	 * Editor-only custom CSS selectors for theme.json style generation.
+	 *
+	 * @since 6.3.0
+	 * @var array
+	 */
+	public $editor_selectors = array();
+
 	/**
 	 * Custom CSS selectors for theme.json style generation.
 	 *
@@ -253,7 +261,7 @@ class WP_Block_Type {
 	 * @since 6.1.0 Added the `editor_script_handles`, `script_handles`, `view_script_handles,
 	 *              `editor_style_handles`, and `style_handles` properties.
 	 *              Deprecated the `editor_script`, `script`, `view_script`, `editor_style`, and `style` properties.
-	 * @since 6.3.0 Added the `selectors` property.
+	 * @since 6.3.0 Added the `selectors` and `editor_selectors` property.
 	 *
 	 * @see register_block_type()
 	 *
@@ -278,6 +286,7 @@ class WP_Block_Type {
 	 *     @type array[]       $styles                   Alternative block styles.
 	 *     @type array[]       $variations               Block variations.
 	 *     @type array         $selectors                Custom CSS selectors for theme.json style generation.
+	 *     @type array         $editor_selectors         Editor-only custom CSS selectors for theme.json style generation.
 	 *     @type array|null    $supports                 Supported features.
 	 *     @type array|null    $example                  Structured data for the block preview.
 	 *     @type callable|null $render_callback          Block type render callback.

diff --git a/src/wp-includes/rest-api/endpoints/class-wp-rest-block-types-controller.php b/src/wp-includes/rest-api/endpoints/class-wp-rest-block-types-controller.php
@@ -279,6 +279,7 @@ public function prepare_item_for_response( $item, $request ) {
 				'provides_context',
 				'uses_context',
 				'selectors',
+				'editor_selectors',
 				'supports',
 				'styles',
 				'textdomain',
@@ -527,6 +528,14 @@ public function get_item_schema() {
 					'context'     => array( 'embed', 'view', 'edit' ),
 					'readonly'    => true,
 				),
+				'editor_selectors'      => array(
+					'description' => __( 'Editor-only custom CSS selectors.' ),
+					'type'        => 'object',
+					'default'     => array(),
+					'properties'  => array(),
+					'context'     => array( 'embed', 'view', 'edit' ),
+					'readonly'    => true,
+				),
 				'supports'              => array(
 					'description' => __( 'Block supports.' ),
 					'type'        => 'object',

diff --git a/tests/phpunit/data/blocks/notice/block.json b/tests/phpunit/data/blocks/notice/block.json
@@ -27,6 +27,9 @@
 			"type": "string"
 		}
 	},
+	"editorSelectors": {
+		"root": ".editor-only.wp-block-notice"
+	},
 	"selectors": {
 		"root": ".wp-block-notice"
 	},

diff --git a/tests/phpunit/tests/admin/includesPost.php b/tests/phpunit/tests/admin/includesPost.php
@@ -822,11 +822,12 @@ public function test_post_exists_should_match_nonempty_title_content_and_date()
 	public function test_get_block_editor_server_block_settings() {
 		$name     = 'core/test';
 		$settings = array(
-			'icon'            => 'text',
-			'category'        => 'common',
-			'render_callback' => 'foo',
-			'ancestor'        => array( 'core/test-ancestor' ),
-			'selectors'       => array( 'root' => '.wp-block-test' ),
+			'icon'             => 'text',
+			'category'         => 'common',
+			'render_callback'  => 'foo',
+			'ancestor'         => array( 'core/test-ancestor' ),
+			'editor_selectors' => array( 'root' => '.editor-only.wp-block-test' ),
+			'selectors'        => array( 'root' => '.wp-block-test' ),
 		);
 
 		register_block_type( $name, $settings );
@@ -838,20 +839,21 @@ public function test_get_block_editor_server_block_settings() {
 		$this->assertArrayHasKey( $name, $blocks );
 		$this->assertSame(
 			array(
-				'apiVersion'  => 1,
-				'title'       => '',
-				'description' => '',
-				'icon'        => 'text',
-				'attributes'  => array(
+				'apiVersion'      => 1,
+				'title'           => '',
+				'description'     => '',
+				'icon'            => 'text',
+				'attributes'      => array(
 					'lock' => array( 'type' => 'object' ),
 				),
-				'usesContext' => array(),
-				'selectors'   => array( 'root' => '.wp-block-test' ),
-				'category'    => 'common',
-				'styles'      => array(),
-				'ancestor'    => array( 'core/test-ancestor' ),
-				'keywords'    => array(),
-				'variations'  => array(),
+				'usesContext'     => array(),
+				'editorSelectors' => array( 'root' => '.editor-only.wp-block-test' ),
+				'selectors'       => array( 'root' => '.wp-block-test' ),
+				'category'        => 'common',
+				'styles'          => array(),
+				'ancestor'        => array( 'core/test-ancestor' ),
+				'keywords'        => array(),
+				'variations'      => array(),
 			),
 			$blocks[ $name ]
 		);

diff --git a/tests/phpunit/tests/blocks/register.php b/tests/phpunit/tests/blocks/register.php
@@ -515,6 +515,10 @@ public function test_block_registers_with_metadata_fixture() {
 			$result->provides_context
 		);
 		$this->assertSameSets( array( 'groupId' ), $result->uses_context );
+		$this->assertSame(
+			array( 'root' => '.editor-only.wp-block-notice' ),
+			$result->editor_selectors
+		);
 		$this->assertSame(
 			array( 'root' => '.wp-block-notice' ),
 			$result->selectors

diff --git a/tests/phpunit/tests/rest-api/rest-block-type-controller.php b/tests/phpunit/tests/rest-api/rest-block-type-controller.php
@@ -216,6 +216,7 @@ public function test_get_item_invalid() {
 			'example'          => 'invalid_example',
 			'parent'           => 'invalid_parent',
 			'ancestor'         => 'invalid_ancestor',
+			'editor_selectors' => 'invalid_editor_selectors',
 			'selectors'        => 'invalid_selectors',
 			'supports'         => 'invalid_supports',
 			'styles'           => array(),
@@ -248,6 +249,7 @@ public function test_get_item_invalid() {
 		$this->assertSameSets( array( 'invalid_keywords' ), $data['keywords'] );
 		$this->assertSameSets( array( 'invalid_parent' ), $data['parent'] );
 		$this->assertSameSets( array( 'invalid_ancestor' ), $data['ancestor'] );
+		$this->assertSameSets( array(), $data['editor_selectors'] );
 		$this->assertSameSets( array(), $data['selectors'] );
 		$this->assertSameSets( array(), $data['supports'] );
 		$this->assertSameSets( array(), $data['styles'] );
@@ -286,6 +288,7 @@ public function test_get_item_defaults() {
 			'keywords'         => false,
 			'parent'           => false,
 			'ancestor'         => false,
+			'editor_selectors' => false,
 			'selectors'        => false,
 			'supports'         => false,
 			'styles'           => false,
@@ -319,6 +322,7 @@ public function test_get_item_defaults() {
 		$this->assertSameSets( array(), $data['keywords'] );
 		$this->assertSameSets( array(), $data['parent'] );
 		$this->assertSameSets( array(), $data['ancestor'] );
+		$this->assertSameSets( array(), $data['editor_selectors'] );
 		$this->assertSameSets( array(), $data['selectors'] );
 		$this->assertSameSets( array(), $data['supports'] );
 		$this->assertSameSets( array(), $data['styles'] );
@@ -545,7 +549,7 @@ public function test_get_item_schema() {
 		$response   = rest_get_server()->dispatch( $request );
 		$data       = $response->get_data();
 		$properties = $data['schema']['properties'];
-		$this->assertCount( 29, $properties );
+		$this->assertCount( 30, $properties );
 		$this->assertArrayHasKey( 'api_version', $properties );
 		$this->assertArrayHasKey( 'title', $properties );
 		$this->assertArrayHasKey( 'icon', $properties );
@@ -555,6 +559,7 @@ public function test_get_item_schema() {
 		$this->assertArrayHasKey( 'textdomain', $properties );
 		$this->assertArrayHasKey( 'name', $properties );
 		$this->assertArrayHasKey( 'attributes', $properties );
+		$this->assertArrayHasKey( 'editor_selectors', $properties );
 		$this->assertArrayHasKey( 'selectors', $properties );
 		$this->assertArrayHasKey( 'supports', $properties );
 		$this->assertArrayHasKey( 'category', $properties );