WordPress.org
Get WordPress

Make WordPress Core

Changeset 51501 for trunk


Ignore:
Timestamp:
07/28/2021 10:05:01 AM (5 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.