Skip to content

Commit

Permalink
Build: Split packages and blocks to their webpack configs.
Browse files Browse the repository at this point in the history
This also adds support for the viewScript for blocks fixing 
the PDF preview for file blocks.

Props desrosj, gziolo.
See #53397.


git-svn-id: https://develop.svn.wordpress.org/trunk@51259 602fd350-edb4-49c9-b593-d223f7449a82
  • Loading branch information
youknowriad committed Jun 29, 2021
1 parent da88164 commit 51cbe7e
Show file tree
Hide file tree
Showing 9 changed files with 267 additions and 124 deletions.
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,9 @@ wp-tests-config.php
/src/wp-includes/css/*.min.css
/src/wp-includes/css/*-rtl.css
/src/wp-includes/blocks/**/*.css
/src/wp-includes/blocks/**/*.js
/src/wp-includes/blocks/**/*.js.map
/src/wp-includes/blocks/**/*.asset.php
/packagehash.txt
/artifacts

Expand Down
1 change: 1 addition & 0 deletions Gruntfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -996,6 +996,7 @@ module.exports = function(grunt) {
WORKING_DIR + 'wp-{admin,includes}/**/*.js',
WORKING_DIR + 'wp-content/themes/twenty*/**/*.js',
'!' + WORKING_DIR + 'wp-content/themes/twenty*/node_modules/**/*.js',
'!' + WORKING_DIR + 'wp-includes/blocks/**/*.js',
'!' + WORKING_DIR + 'wp-includes/js/dist/**/*.js',
]
}
Expand Down
28 changes: 22 additions & 6 deletions src/wp-includes/blocks.php
Original file line number Diff line number Diff line change
Expand Up @@ -42,12 +42,16 @@ function generate_block_asset_handle( $block_name, $field_name ) {
if ( 0 === strpos( $field_name, 'editor' ) ) {
$asset_handle .= '-editor';
}
if ( 0 === strpos( $field_name, 'view' ) ) {
$asset_handle .= '-view';
}
return $asset_handle;
}

$field_mappings = array(
'editorScript' => 'editor-script',
'script' => 'script',
'viewScript' => 'view-script',
'editorStyle' => 'editor-style',
'style' => 'style',
);
Expand Down Expand Up @@ -96,18 +100,23 @@ function register_block_script_handle( $metadata, $field_name ) {
);
return false;
}
$script_asset = require $script_asset_path;
$result = wp_register_script(
$is_core_block = isset( $metadata['file'] ) && 0 === strpos( $metadata['file'], ABSPATH . WPINC );
$script_uri = $is_core_block ?
includes_url( str_replace( ABSPATH . WPINC, '', realpath( dirname( $metadata['file'] ) . '/' . $script_path ) ) ) :
plugins_url( $script_path, $metadata['file'] );
$script_asset = require $script_asset_path;
$script_dependencies = isset( $script_asset['dependencies'] ) ? $script_asset['dependencies'] : array();
$result = wp_register_script(
$script_handle,
plugins_url( $script_path, $metadata['file'] ),
$script_asset['dependencies'],
$script_asset['version']
$script_uri,
$script_dependencies,
isset( $script_asset['version'] ) ? $script_asset['version'] : false
);
if ( ! $result ) {
return false;
}

if ( ! empty( $metadata['textdomain'] ) ) {
if ( ! empty( $metadata['textdomain'] ) && in_array( 'wp-i18n', $script_dependencies ) ) {
wp_set_script_translations( $script_handle, $metadata['textdomain'] );
}

Expand Down Expand Up @@ -306,6 +315,13 @@ function register_block_type_from_metadata( $file_or_folder, $args = array() ) {
);
}

if ( ! empty( $metadata['viewScript'] ) ) {
$settings['view_script'] = register_block_script_handle(
$metadata,
'viewScript'
);
}

if ( ! empty( $metadata['editorStyle'] ) ) {
$settings['editor_style'] = register_block_style_handle(
$metadata,
Expand Down
25 changes: 17 additions & 8 deletions src/wp-includes/class-wp-block-type.php
Original file line number Diff line number Diff line change
Expand Up @@ -156,31 +156,39 @@ class WP_Block_Type {
public $provides_context = null;

/**
* Block type editor script handle.
* Block type editor only script handle.
*
* @since 5.0.0
* @var string|null
*/
public $editor_script = null;

/**
* Block type front end script handle.
* Block type front end and editor script handle.
*
* @since 5.0.0
* @var string|null
*/
public $script = null;

/**
* Block type editor style handle.
* Block type front end only script handle.
*
* @since 5.0.0
* @var string|null
*/
public $view_script = null;

/**
* Block type editor only style handle.
*
* @since 5.0.0
* @var string|null
*/
public $editor_style = null;

/**
* Block type front end style handle.
* Block type front end and editor style handle.
*
* @since 5.0.0
* @var string|null
Expand Down Expand Up @@ -225,10 +233,11 @@ class WP_Block_Type {
* @type array|null $attributes Block type attributes property schemas.
* @type array $uses_context Context values inherited by blocks of this type.
* @type array|null $provides_context Context provided by blocks of this type.
* @type string|null $editor_script Block type editor script handle.
* @type string|null $script Block type front end script handle.
* @type string|null $editor_style Block type editor style handle.
* @type string|null $style Block type front end style handle.
* @type string|null $editor_script Block type editor only script handle.
* @type string|null $script Block type front end and editor script handle.
* @type string|null $view_script Block type front end only script handle.
* @type string|null $editor_style Block type editor only style handle.
* @type string|null $style Block type front end and editor style handle.
* }
*/
public function __construct( $block_type, $args = array() ) {
Expand Down
1 change: 1 addition & 0 deletions tests/phpunit/data/blocks/notice/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@
},
"editorScript": "tests-notice-editor-script",
"script": "tests-notice-script",
"viewScript": "tests-notice-view-script",
"editorStyle": "tests-notice-editor-style",
"style": "tests-notice-style"
}
9 changes: 9 additions & 0 deletions tests/phpunit/tests/blocks/register.php
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,10 @@ function test_generate_block_asset_handle() {
'unit-tests-my-block-script',
generate_block_asset_handle( $block_name, 'script' )
);
$this->assertSame(
'unit-tests-my-block-view-script',
generate_block_asset_handle( $block_name, 'viewScript' )
);
$this->assertSame(
'unit-tests-my-block-editor-style',
generate_block_asset_handle( $block_name, 'editorStyle' )
Expand All @@ -156,6 +160,10 @@ function test_generate_block_asset_handle_core_block() {
'wp-block-paragraph',
generate_block_asset_handle( $block_name, 'script' )
);
$this->assertSame(
'wp-block-paragraph-view',
generate_block_asset_handle( $block_name, 'viewScript' )
);
$this->assertSame(
'wp-block-paragraph-editor',
generate_block_asset_handle( $block_name, 'editorStyle' )
Expand Down Expand Up @@ -372,6 +380,7 @@ function test_block_registers_with_metadata_fixture() {
);
$this->assertSame( 'tests-notice-editor-script', $result->editor_script );
$this->assertSame( 'tests-notice-script', $result->script );
$this->assertSame( 'tests-notice-view-script', $result->view_script );
$this->assertSame( 'tests-notice-editor-style', $result->editor_style );
$this->assertSame( 'tests-notice-style', $result->style );

Expand Down
212 changes: 212 additions & 0 deletions tools/webpack/blocks.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,212 @@
/**
* External dependencies
*/
const { DefinePlugin } = require( 'webpack' );
const CopyWebpackPlugin = require( 'copy-webpack-plugin' );
const postcss = require( 'postcss' );
const UglifyJS = require( 'uglify-js' );

const { join, basename } = require( 'path' );
const { get } = require( 'lodash' );

/**
* WordPress dependencies
*/
const DependencyExtractionPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' );

const baseDir = join( __dirname, '../../' );

module.exports = function( env = { environment: 'production', watch: false, buildTarget: false } ) {
const mode = env.environment;
const suffix = mode === 'production' ? '.min' : '';
let buildTarget = env.buildTarget ? env.buildTarget : ( mode === 'production' ? 'build' : 'src' );
buildTarget = buildTarget + '/wp-includes';

const dynamicBlockFolders = [
'archives',
'block',
'calendar',
'categories',
'file',
'latest-comments',
'latest-posts',
'loginout',
'page-list',
'post-content',
'post-date',
'post-excerpt',
'post-featured-image',
'post-terms',
'post-title',
'post-template',
'query',
'query-pagination',
'query-pagination-next',
'query-pagination-numbers',
'query-pagination-previous',
'query-title',
'rss',
'search',
'shortcode',
'site-logo',
'site-tagline',
'site-title',
'social-link',
'tag-cloud',
];
const blockFolders = [
'audio',
'button',
'buttons',
'code',
'column',
'columns',
'cover',
'embed',
'freeform',
'gallery',
'group',
'heading',
'html',
'image',
'list',
'media-text',
'missing',
'more',
'nextpage',
'paragraph',
'preformatted',
'pullquote',
'quote',
'separator',
'social-links',
'spacer',
'table',
'text-columns',
'verse',
'video',
...dynamicBlockFolders,
];
const blockPHPFiles = {
'widgets/src/blocks/legacy-widget/index.php': 'wp-includes/blocks/legacy-widget.php',
...dynamicBlockFolders.reduce( ( files, blockName ) => {
files[ `block-library/src/${ blockName }/index.php` ] = `wp-includes/blocks/${ blockName }.php`;
return files;
} , {} ),
};
const blockMetadataFiles = {
'widgets/src/blocks/legacy-widget/block.json': 'wp-includes/blocks/legacy-widget/block.json',
...blockFolders.reduce( ( files, blockName ) => {
files[ `block-library/src/${ blockName }/block.json` ] = `wp-includes/blocks/${ blockName }/block.json`;
return files;
} , {} ),
};

const blockPHPCopies = Object.keys( blockPHPFiles ).map( ( filename ) => ( {
from: join( baseDir, `node_modules/@wordpress/${ filename }` ),
to: join( baseDir, `src/${ blockPHPFiles[ filename ] }` ),
} ) );

const blockMetadataCopies = Object.keys( blockMetadataFiles ).map( ( filename ) => ( {
from: join( baseDir, `node_modules/@wordpress/${ filename }` ),
to: join( baseDir, `src/${ blockMetadataFiles[ filename ] }` ),
} ) );

const blockStylesheetCopies = blockFolders.map( ( blockName ) => ( {
from: join( baseDir, `node_modules/@wordpress/block-library/build-style/${ blockName }/*.css` ),
to: join( baseDir, `${ buildTarget }/blocks/${ blockName }/` ),
flatten: true,
transform: ( content ) => {
if ( mode === 'production' ) {
return postcss( [
require( 'cssnano' )( {
preset: 'default',
} ),
] )
.process( content, { from: 'src/app.css', to: 'dest/app.css' } )
.then( ( result ) => result.css );
}

return content;
},
transformPath: ( targetPath, sourcePath ) => {
if ( mode === 'production' ) {
return targetPath.replace( /\.css$/, '.min.css' );
}

return targetPath;
}
} ) );

const config = {
mode,
entry: {
'file/view': join( baseDir, `node_modules/@wordpress/block-library/build-module/file/view` ),
},
output: {
devtoolNamespace: 'wp',
filename: `[name]${ suffix }.js`,
path: join( baseDir, `${ buildTarget }/blocks` ),
},
resolve: {
modules: [
baseDir,
'node_modules',
],
alias: {
'lodash-es': 'lodash',
},
},
module: {
rules: [
{
test: /\.js$/,
use: [ 'source-map-loader' ],
enforce: 'pre',
},
],
},
optimization: {
moduleIds: mode === 'production' ? 'hashed' : 'named',
},
plugins: [
new DefinePlugin( {
// Inject the `GUTENBERG_PHASE` global, used for feature flagging.
'process.env.GUTENBERG_PHASE': 1,
'process.env.FORCE_REDUCED_MOTION': JSON.stringify(
process.env.FORCE_REDUCED_MOTION
),
} ),
new DependencyExtractionPlugin( {
injectPolyfill: true,
} ),
new CopyWebpackPlugin(
[
...blockPHPCopies,
...blockMetadataCopies,
...blockStylesheetCopies,
],
),
],
stats: {
children: false,
},

watch: env.watch,
};

if ( config.mode !== 'production' ) {
config.devtool = process.env.SOURCEMAP || 'source-map';
}

if ( mode === 'development' && env.buildTarget === 'build/' ) {
delete config.devtool;
config.mode = 'production';
config.optimization = {
minimize: false,
moduleIds: 'hashed',
};
}

return config;
};
Loading

0 comments on commit 51cbe7e

Please sign in to comment.