WordPress.org
Get WordPress

Make WordPress Core

Changeset 51501


Ignore:
Timestamp:
07/28/2021 10:05:01 AM (3 years ago)
Author:
gziolo
Message:

Build: Split packages and blocks to their webpack configs

It aligns with the changes proposed added in Gutenberg: ​https://github.com/WordPress/gutenberg/pull/33293.

The idea here is to split the growing webpack config into two parts: blocks and packages.

We need to add handling for JavaScript files that are going to be used with blocks on the frontend. They didn't work quite well with the current setup for entry points created for packages.

As part of the effort, it adds support for viewScript in block.json metadata file that is later translated to $view_script in WP_Block_Type class and exposed as view_script from the REST API endpoint for block types.

Props youknowriad, desrosj, aristath.
Fixes #53690.

Location:
trunk
Files:
3 added
12 edited

Legend:

Unmodified
Added
Removed

  • trunk/.gitignore

    r51268 r51501  
    3030/src/wp-includes/css/*-rtl.css
    3131/src/wp-includes/blocks/**/*.css
     32/src/wp-includes/blocks/**/*.js
     33/src/wp-includes/blocks/**/*.js.map
    3234/packagehash.txt
    3335/artifacts

  • trunk/Gruntfile.js

    r51355 r51501  
    998998                        WORKING_DIR + 'wp-content/themes/twenty*/**/*.js',
    999999                        '!' + WORKING_DIR + 'wp-content/themes/twenty*/node_modules/**/*.js',
     1000                        '!' + WORKING_DIR + 'wp-includes/blocks/**/*.js',
    10001001                        '!' + WORKING_DIR + 'wp-includes/js/dist/**/*.js',
    10011002                    ]

  • trunk/src/wp-includes/blocks.php

    r51477 r51501  
    4343            $asset_handle .= '-editor';
    4444        }
     45        if ( 0 === strpos( $field_name, 'view' ) ) {
     46            $asset_handle .= '-view';
     47        }
    4548        return $asset_handle;
    4649    }
    … …  
    4952        'editorScript' => 'editor-script',
    5053        'script'       => 'script',
     54        'viewScript'   => 'view-script',
    5155        'editorStyle'  => 'editor-style',
    5256        'style'        => 'style',
    … …  
    97101        return false;
    98102    }
    99     $script_asset = require $script_asset_path;
    100     $result       = wp_register_script(
     103    $is_core_block       = isset( $metadata['file'] ) && 0 === strpos( $metadata['file'], ABSPATH . WPINC );
     104    $script_uri          = $is_core_block ?
     105        includes_url( str_replace( ABSPATH . WPINC, '', realpath( dirname( $metadata['file'] ) . '/' . $script_path ) ) ) :
     106        plugins_url( $script_path, $metadata['file'] );
     107    $script_asset        = require $script_asset_path;
     108    $script_dependencies = isset( $script_asset['dependencies'] ) ? $script_asset['dependencies'] : array();
     109    $result              = wp_register_script(
    101110        $script_handle,
    102         plugins_url( $script_path, $metadata['file'] ),
    103         $script_asset['dependencies'],
    104         $script_asset['version']
     111        $script_uri,
     112        $script_dependencies,
     113        isset( $script_asset['version'] ) ? $script_asset['version'] : false
    105114    );
    106115    if ( ! $result ) {
    … …  
    108117    }
    109118
    110     if ( ! empty( $metadata['textdomain'] ) ) {
     119    if ( ! empty( $metadata['textdomain'] ) && in_array( 'wp-i18n', $script_dependencies ) ) {
    111120        wp_set_script_translations( $script_handle, $metadata['textdomain'] );
    112121    }
    … …  
    183192 *
    184193 * @since 5.5.0
     194 * @since 5.9.0 Added support for the `viewScript` field.
    185195 *
    186196 * @param string $file_or_folder Path to the JSON file with metadata definition for
    … …  
    305315    }
    306316
     317    if ( ! empty( $metadata['viewScript'] ) ) {
     318        $settings['view_script'] = register_block_script_handle(
     319            $metadata,
     320            'viewScript'
     321        );
     322    }
     323
    307324    if ( ! empty( $metadata['editorStyle'] ) ) {
    308325        $settings['editor_style'] = register_block_style_handle(

  • trunk/src/wp-includes/blocks/file

    • Property svn:ignore

      •  

        old new  
        11*.css
         2*.js
         3*.js.map

  • trunk/src/wp-includes/class-wp-block-type.php

    r51268 r51501  
    157157
    158158    /**
    159      * Block type editor script handle.
     159     * Block type editor only script handle.
    160160     *
    161161     * @since 5.0.0
    … …  
    165165
    166166    /**
    167      * Block type front end script handle.
     167     * Block type front end and editor script handle.
    168168     *
    169169     * @since 5.0.0
    … …  
    173173
    174174    /**
    175      * Block type editor style handle.
     175     * Block type front end only script handle.
     176     *
     177     * @since 5.9.0
     178     * @var string|null
     179     */
     180    public $view_script = null;
     181
     182    /**
     183     * Block type editor only style handle.
    176184     *
    177185     * @since 5.0.0
    … …  
    181189
    182190    /**
    183      * Block type front end style handle.
     191     * Block type front end and editor style handle.
    184192     *
    185193     * @since 5.0.0
    … …  
    199207     * @since 5.6.0 Added the `api_version` property.
    200208     * @since 5.8.0 Added the `variations` property.
     209     * @since 5.9.0 Added the `view_script` property.
    201210     *
    202211     * @see register_block_type()
    … …  
    226235     *     @type array         $uses_context     Context values inherited by blocks of this type.
    227236     *     @type array|null    $provides_context Context provided by blocks of this type.
    228      *     @type string|null   $editor_script    Block type editor script handle.
    229      *     @type string|null   $script           Block type front end script handle.
    230      *     @type string|null   $editor_style     Block type editor style handle.
    231      *     @type string|null   $style            Block type front end style handle.
     237     *     @type string|null   $editor_script    Block type editor only script handle.
     238     *     @type string|null   $script           Block type front end and editor script handle.
     239     *     @type string|null   $view_script      Block type front end only script handle.
     240     *     @type string|null   $editor_style     Block type editor only style handle.
     241     *     @type string|null   $style            Block type front end and editor style handle.
    232242     * }
    233243     */

  • trunk/src/wp-includes/class-wp-block.php

    r51298 r51501  
    230230        }
    231231
     232        if ( ! empty( $this->block_type->view_script ) && empty( $this->block_type->render_callback ) ) {
     233            wp_enqueue_script( $this->block_type->view_script );
     234        }
     235
    232236        if ( ! empty( $this->block_type->style ) ) {
    233237            wp_enqueue_style( $this->block_type->style );

  • trunk/src/wp-includes/rest-api/endpoints/class-wp-rest-block-types-controller.php

    r51000 r51501  
    273273            'editor_script',
    274274            'script',
     275            'view_script',
    275276            'editor_style',
    276277            'style',
    … …  
    518519                ),
    519520                'script'           => array(
     521                    'description' => __( 'Public facing and editor script handle.' ),
     522                    'type'        => array( 'string', 'null' ),
     523                    'default'     => null,
     524                    'context'     => array( 'embed', 'view', 'edit' ),
     525                    'readonly'    => true,
     526                ),
     527                'view_script'    => array(
    520528                    'description' => __( 'Public facing script handle.' ),
    521529                    'type'        => array( 'string', 'null' ),
    … …  
    532540                ),
    533541                'style'            => array(
    534                     'description' => __( 'Public facing style handle.' ),
     542                    'description' => __( 'Public facing and editor style handle.' ),
    535543                    'type'        => array( 'string', 'null' ),
    536544                    'default'     => null,

  • trunk/tests/phpunit/data/blocks/notice/block.json

    r51268 r51501  
    4949    "editorScript": "tests-notice-editor-script",
    5050    "script": "tests-notice-script",
     51    "viewScript": "tests-notice-view-script",
    5152    "editorStyle": "tests-notice-editor-style",
    5253    "style": "tests-notice-style"

  • trunk/tests/phpunit/tests/blocks/register.php

    r51491 r51501  
    134134        );
    135135        $this->assertSame(
     136            'unit-tests-my-block-view-script',
     137            generate_block_asset_handle( $block_name, 'viewScript' )
     138        );
     139        $this->assertSame(
    136140            'unit-tests-my-block-editor-style',
    137141            generate_block_asset_handle( $block_name, 'editorStyle' )
    … …  
    156160            'wp-block-paragraph',
    157161            generate_block_asset_handle( $block_name, 'script' )
     162        );
     163        $this->assertSame(
     164            'wp-block-paragraph-view',
     165            generate_block_asset_handle( $block_name, 'viewScript' )
    158166        );
    159167        $this->assertSame(
    … …  
    373381        $this->assertSame( 'tests-notice-editor-script', $result->editor_script );
    374382        $this->assertSame( 'tests-notice-script', $result->script );
     383        $this->assertSame( 'tests-notice-view-script', $result->view_script );
    375384        $this->assertSame( 'tests-notice-editor-style', $result->editor_style );
    376385        $this->assertSame( 'tests-notice-style', $result->style );

  • trunk/tests/phpunit/tests/rest-api/rest-block-type-controller.php

    r51367 r51501  
    216216            'editor_script'    => true,
    217217            'script'           => true,
     218            'view_script'      => true,
    218219            'editor_style'     => true,
    219220            'style'            => true,
    … …  
    238239        $this->assertNull( $data['editor_script'] );
    239240        $this->assertNull( $data['script'] );
     241        $this->assertNull( $data['view_script'] );
    240242        $this->assertNull( $data['editor_style'] );
    241243        $this->assertNull( $data['style'] );
    … …  
    269271            'editor_script'    => false,
    270272            'script'           => false,
     273            'view_script'      => false,
    271274            'editor_style'     => false,
    272275            'style'            => false,
    … …  
    291294        $this->assertNull( $data['editor_script'] );
    292295        $this->assertNull( $data['script'] );
     296        $this->assertNull( $data['view_script'] );
    293297        $this->assertNull( $data['editor_style'] );
    294298        $this->assertNull( $data['style'] );
    … …  
    375379        $data       = $response->get_data();
    376380        $properties = $data['schema']['properties'];
    377         $this->assertCount( 21, $properties );
     381        $this->assertCount( 22, $properties );
    378382        $this->assertArrayHasKey( 'api_version', $properties );
    379383        $this->assertArrayHasKey( 'title', $properties );
    … …  
    390394        $this->assertArrayHasKey( 'editor_script', $properties );
    391395        $this->assertArrayHasKey( 'script', $properties );
     396        $this->assertArrayHasKey( 'view_script', $properties );
    392397        $this->assertArrayHasKey( 'editor_style', $properties );
    393398        $this->assertArrayHasKey( 'style', $properties );
    … …  
    501506            'editor_script',
    502507            'script',
     508            'view_script',
    503509            'editor_style',
    504510            'style',

  • trunk/tools/webpack/packages.js

    r51268 r51501  
    107107    };
    108108
    109     const dynamicBlockFolders = [
    110         'archives',
    111         'block',
    112         'calendar',
    113         'categories',
    114         'file',
    115         'latest-comments',
    116         'latest-posts',
    117         'loginout',
    118         'page-list',
    119         'post-content',
    120         'post-date',
    121         'post-excerpt',
    122         'post-featured-image',
    123         'post-terms',
    124         'post-title',
    125         'post-template',
    126         'query',
    127         'query-pagination',
    128         'query-pagination-next',
    129         'query-pagination-numbers',
    130         'query-pagination-previous',
    131         'query-title',
    132         'rss',
    133         'search',
    134         'shortcode',
    135         'site-logo',
    136         'site-tagline',
    137         'site-title',
    138         'social-link',
    139         'tag-cloud',
    140     ];
    141     const blockFolders = [
    142         'audio',
    143         'button',
    144         'buttons',
    145         'code',
    146         'column',
    147         'columns',
    148         'cover',
    149         'embed',
    150         'freeform',
    151         'gallery',
    152         'group',
    153         'heading',
    154         'html',
    155         'image',
    156         'list',
    157         'media-text',
    158         'missing',
    159         'more',
    160         'nextpage',
    161         'paragraph',
    162         'preformatted',
    163         'pullquote',
    164         'quote',
    165         'separator',
    166         'social-links',
    167         'spacer',
    168         'table',
    169         'text-columns',
    170         'verse',
    171         'video',
    172         ...dynamicBlockFolders,
    173     ];
    174109    const phpFiles = {
    175110        'block-serialization-default-parser/parser.php': 'wp-includes/class-wp-block-parser.php',
    176         'widgets/src/blocks/legacy-widget/index.php': 'wp-includes/blocks/legacy-widget.php',
    177         ...dynamicBlockFolders.reduce( ( files, blockName ) => {
    178             files[ `block-library/src/${ blockName }/index.php` ] = `wp-includes/blocks/${ blockName }.php`;
    179             return files;
    180         } , {} ),
    181     };
    182     const blockMetadataFiles = {
    183         'widgets/src/blocks/legacy-widget/block.json': 'wp-includes/blocks/legacy-widget/block.json',
    184         ...blockFolders.reduce( ( files, blockName ) => {
    185             files[ `block-library/src/${ blockName }/block.json` ] = `wp-includes/blocks/${ blockName }/block.json`;
    186             return files;
    187         } , {} ),
    188111    };
    189112
    … …  
    230153        from: join( baseDir, `node_modules/@wordpress/${ filename }` ),
    231154        to: join( baseDir, `src/${ phpFiles[ filename ] }` ),
    232     } ) );
    233 
    234     const blockMetadataCopies = Object.keys( blockMetadataFiles ).map( ( filename ) => ( {
    235         from: join( baseDir, `node_modules/@wordpress/${ filename }` ),
    236         to: join( baseDir, `src/${ blockMetadataFiles[ filename ] }` ),
    237     } ) );
    238 
    239     const blockStylesheetCopies = blockFolders.map( ( blockName ) => ( {
    240         from: join( baseDir, `node_modules/@wordpress/block-library/build-style/${ blockName }/*.css` ),
    241         to: join( baseDir, `${ buildTarget }/blocks/${ blockName }/` ),
    242         flatten: true,
    243         transform: ( content ) => {
    244             if ( mode === 'production' ) {
    245                 return postcss( [
    246                     require( 'cssnano' )( {
    247                         preset: 'default',
    248                     } ),
    249                 ] )
    250                     .process( content, { from: 'src/app.css', to: 'dest/app.css' } )
    251                     .then( ( result ) => result.css );
    252             }
    253 
    254             return content;
    255         },
    256         transformPath: ( targetPath, sourcePath ) => {
    257             if ( mode === 'production' ) {
    258                 return targetPath.replace( /\.css$/, '.min.css' );
    259             }
    260 
    261             return targetPath;
    262         }
    263155    } ) );
    264156
    … …  
    353245                    ...cssCopies,
    354246                    ...phpCopies,
    355                     ...blockMetadataCopies,
    356                     ...blockStylesheetCopies,
    357247                ],
    358248            ),

  • trunk/webpack.config.js

    r51268 r51501  
     1const blocksConfig = require( './tools/webpack/blocks' );
    12const mediaConfig = require( './tools/webpack/media' );
    23const packagesConfig = require( './tools/webpack/packages' );
    … …  
    1213
    1314    const config = [
     15        blocksConfig( env ),
    1416        mediaConfig( env ),
    1517        packagesConfig( env ),
Note: See TracChangeset for help on using the changeset viewer.