Make WordPress Core


Ignore:
Timestamp:
09/08/2022 04:43:01 PM (18 months 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:

Follow-up to [50973].

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

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/class-wp-theme-json.php

    r53302 r54105  
    348348     *
    349349     * @since 5.8.0
     350     * @since 6.1.0 Added `heading`, `button`, and `caption` to the elements.
    350351     * @var string[]
    351352     */
    352353    const ELEMENTS = array(
    353         'link' => 'a',
    354         'h1'   => 'h1',
    355         'h2'   => 'h2',
    356         'h3'   => 'h3',
    357         'h4'   => 'h4',
    358         'h5'   => 'h5',
    359         'h6'   => 'h6',
     354        'link'    => 'a',
     355        'heading' => 'h1, h2, h3, h4, h5, h6',
     356        'h1'      => 'h1',
     357        'h2'      => 'h2',
     358        'h3'      => 'h3',
     359        'h4'      => 'h4',
     360        'h5'      => 'h5',
     361        'h6'      => 'h6',
     362        // We have the .wp-block-button__link class so that this will target older buttons that have been serialized.
     363        'button'  => '.wp-element-button, .wp-block-button__link',
     364        // The block classes are necessary to target older content that won't use the new class names.
     365        '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',
    360366    );
    361367
     
    14771483
    14781484        if ( isset( $theme_json['styles']['elements'] ) ) {
    1479             foreach ( $theme_json['styles']['elements'] as $element => $node ) {
     1485            foreach ( self::ELEMENTS as $element => $selector ) {
     1486                if ( ! isset( $theme_json['styles']['elements'][ $element ] ) ) {
     1487                    continue;
     1488                }
    14801489                $nodes[] = array(
    14811490                    'path'     => array( 'styles', 'elements', $element ),
Note: See TracChangeset for help on using the changeset viewer.