Make WordPress Core

Changeset 57493


Ignore:
Timestamp:
01/31/2024 09:09:22 AM (4 weeks ago)
Author:
gziolo
Message:

Editor: Add viewStyle property to block.json for frontend-only block styles

Related issue in Gutenberg: https://github.com/WordPress/gutenberg/issues/54491.

For block scripts there was already script, viewScript and editorScript. For block styles there was only style and editorStyle. This brings the parity.

Props gaambo.
Fixes #59673.

Location:
trunk
Files:
1 added
7 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/blocks.php

    r57372 r57493  
    6565        'editorStyle'  => 'editor-style',
    6666        'style'        => 'style',
     67        'viewStyle'    => 'view-style',
    6768    );
    6869    $asset_handle   = str_replace( '/', '-', $block_name ) .
     
    327328 * @since 6.3.0 Added `selectors` field.
    328329 * @since 6.4.0 Added support for `blockHooks` field.
     330 * @since 6.5.0 Added support for `viewStyle` field.
    329331 *
    330332 * @param string $file_or_folder Path to the JSON file with metadata definition for
     
    504506        'editorStyle' => 'editor_style_handles',
    505507        'style'       => 'style_handles',
     508        'viewStyle'   => 'view_style_handles',
    506509    );
    507510    foreach ( $style_fields as $metadata_field_name => $settings_field_name ) {
  • trunk/src/wp-includes/class-wp-block-type.php

    r57315 r57493  
    234234     */
    235235    public $style_handles = array();
     236
     237    /**
     238     * Block type front end only style handles.
     239     *
     240     * @since 6.5.0
     241     * @var string[]
     242     */
     243    public $view_style_handles = array();
    236244
    237245    /**
     
    279287     * @since 6.3.0 Added the `selectors` property.
    280288     * @since 6.4.0 Added the `block_hooks` property.
     289     * @since 6.5.0 Added the `view_style_handles` property.
    281290     *
    282291     * @see register_block_type()
     
    316325     *     @type string[]      $editor_style_handles     Block type editor only style handles.
    317326     *     @type string[]      $style_handles            Block type front end and editor style handles.
     327     *     @type string[]      $view_style_handles       Block type front end only style handles.
    318328     * }
    319329     */
  • trunk/src/wp-includes/class-wp-block.php

    r56549 r57493  
    281281        }
    282282
     283        if ( ( ! empty( $this->block_type->view_style_handles ) ) ) {
     284            foreach ( $this->block_type->view_style_handles as $view_style_handle ) {
     285                wp_enqueue_style( $view_style_handle );
     286            }
     287        }
     288
    283289        /**
    284290         * Filters the content of a single block.
  • trunk/src/wp-includes/rest-api/endpoints/class-wp-rest-block-types-controller.php

    r56676 r57493  
    293293                'editor_style_handles',
    294294                'style_handles',
     295                'view_style_handles',
    295296                'variations',
    296297                'block_hooks',
     
    603604                    'readonly'    => true,
    604605                ),
     606                'view_style_handles'    => array(
     607                    'description' => __( 'Public facing style handles.' ),
     608                    'type'        => array( 'array' ),
     609                    'default'     => array(),
     610                    'items'       => array(
     611                        'type' => 'string',
     612                    ),
     613                    'context'     => array( 'embed', 'view', 'edit' ),
     614                    'readonly'    => true,
     615                ),
    605616                'styles'                => array(
    606617                    'description' => __( 'Block style variations.' ),
  • trunk/tests/phpunit/data/blocks/notice/block.json

    r57336 r57493  
    7171    "editorStyle": "tests-notice-editor-style",
    7272    "style": [ "tests-notice-style", "tests-notice-style-2" ],
     73    "viewStyle": [ "tests-notice-view-style" ],
    7374    "render": "file:./render.php"
    7475}
  • trunk/tests/phpunit/tests/blocks/register.php

    r57068 r57493  
    157157            generate_block_asset_handle( $block_name, 'style' )
    158158        );
     159        // @ticket 59673
     160        $this->assertSame(
     161            'unit-tests-my-block-view-style',
     162            generate_block_asset_handle( $block_name, 'viewStyle' ),
     163            'asset handle for viewStyle is not generated correctly'
     164        );
    159165    }
    160166
     
    440446    public function test_success_register_block_style_handle() {
    441447        $metadata = array(
    442             'file'  => DIR_TESTDATA . '/blocks/notice/block.json',
    443             'name'  => 'unit-tests/test-block',
    444             'style' => 'file:./block.css',
     448            'file'      => DIR_TESTDATA . '/blocks/notice/block.json',
     449            'name'      => 'unit-tests/test-block',
     450            'style'     => 'file:./block.css',
     451            'viewStyle' => 'file:./block-view.css',
    445452        );
    446453        $result   = register_block_style_handle( $metadata, 'style' );
     
    453460            wp_normalize_path( realpath( DIR_TESTDATA . '/blocks/notice/block.css' ) ),
    454461            wp_normalize_path( wp_styles()->get_data( 'unit-tests-test-block-style', 'path' ) )
     462        );
     463
     464        // Test viewStyle property
     465        $result = register_block_style_handle( $metadata, 'viewStyle' );
     466        $this->assertSame( 'unit-tests-test-block-view-style', $result );
     467
     468        // @ticket 59673
     469        $this->assertSame(
     470            wp_normalize_path( realpath( DIR_TESTDATA . '/blocks/notice/block-view.css' ) ),
     471            wp_normalize_path( wp_styles()->get_data( 'unit-tests-test-block-view-style', 'path' ) ),
     472            'viewStyle asset path is not correct'
    455473        );
    456474
     
    838856            $result->style_handles
    839857        );
     858        // @ticket 59673
     859        $this->assertSameSets(
     860            array( 'tests-notice-view-style' ),
     861            $result->view_style_handles,
     862            'parsed view_style_handles is not correct'
     863        );
    840864
    841865        // @ticket 50328
     
    843867            wp_normalize_path( realpath( DIR_TESTDATA . '/blocks/notice/block.css' ) ),
    844868            wp_normalize_path( wp_styles()->get_data( 'unit-tests-test-block-style', 'path' ) )
     869        );
     870
     871        // @ticket 59673
     872        $this->assertSame(
     873            wp_normalize_path( realpath( DIR_TESTDATA . '/blocks/notice/block-view.css' ) ),
     874            wp_normalize_path( wp_styles()->get_data( 'unit-tests-test-block-view-style', 'path' ) ),
     875            'viewStyle asset path is not correct'
    845876        );
    846877
  • trunk/tests/phpunit/tests/rest-api/rest-block-type-controller.php

    r57315 r57493  
    558558        $data       = $response->get_data();
    559559        $properties = $data['schema']['properties'];
    560         $this->assertCount( 30, $properties );
     560        $this->assertCount( 31, $properties );
    561561        $this->assertArrayHasKey( 'api_version', $properties );
    562562        $this->assertArrayHasKey( 'name', $properties );
     
    583583        $this->assertArrayHasKey( 'editor_style_handles', $properties );
    584584        $this->assertArrayHasKey( 'style_handles', $properties );
     585        $this->assertArrayHasKey( 'view_style_handles', $properties, 'schema must contain view_style_handles' );
    585586        $this->assertArrayHasKey( 'is_dynamic', $properties );
    586587        // Deprecated properties.
Note: See TracChangeset for help on using the changeset viewer.