Changeset 54105 for trunk/src/wp-includes/class-wp-theme-json.php

Timestamp:

09/08/2022 04:43:01 PM (2 years ago)

Author:

SergeyBiryukov

Message:

Global Styles: Add support for heading, button, and caption elements.

This enables themes to:

• Set style rules for all heading elements together rather than having to do it individually.
• Style captions in theme.json by adding this into your theme.json file:

  {
  	"styles": {
  		"elements": {
  			"caption": {
  				"color": {
  					"background": "red",
  					"text": "yellow"
  				}
  			}
  		}
  	}
  }
  

This commit backports the original PRs from Gutenberg repository:

• ​#41981: Global Styles: Add support for heading elements
• ​#41140: Global Styles: Add support for caption elements

Follow-up to [50973].

Props cbravobernal, scruffian, madhudollu, mikachan, zieladam, bph, poena, andraganescu, ndiego, bgardner.
See #56467.

File:

• trunk/src/wp-includes/class-wp-theme-json.php (modified) (2 diffs)

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

@@ -348 +348 @@
      *
      * @since 5.8.0
+     * @since 6.1.0 Added `heading`, `button`, and `caption` to the elements.
      * @var string[]
      */
     const ELEMENTS = array(
-        'link' => 'a',
-        'h1'   => 'h1',
-        'h2'   => 'h2',
-        'h3'   => 'h3',
-        'h4'   => 'h4',
-        'h5'   => 'h5',
-        'h6'   => 'h6',
+        'link'    => 'a',
+        'heading' => 'h1, h2, h3, h4, h5, h6',
+        'h1'      => 'h1',
+        'h2'      => 'h2',
+        'h3'      => 'h3',
+        'h4'      => 'h4',
+        'h5'      => 'h5',
+        'h6'      => 'h6',
+        // We have the .wp-block-button__link class so that this will target older buttons that have been serialized.
+        'button'  => '.wp-element-button, .wp-block-button__link',
+        // The block classes are necessary to target older content that won't use the new class names.
+        'caption' => '.wp-element-caption, .wp-block-audio figcaption, .wp-block-embed figcaption, .wp-block-gallery figcaption, .wp-block-image figcaption, .wp-block-table figcaption, .wp-block-video figcaption',
     );
 
@@ -1477 +1483 @@
 
         if ( isset( $theme_json['styles']['elements'] ) ) {
-            foreach ( $theme_json['styles']['elements'] as $element => $node ) {
+            foreach ( self::ELEMENTS as $element => $selector ) {
+                if ( ! isset( $theme_json['styles']['elements'][ $element ] ) ) {
+                    continue;
+                }
                 $nodes[] = array(
                     'path'     => array( 'styles', 'elements', $element ),