<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[51501] trunk: Build: Split packages and blocks to their webpack configs</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { white-space: pre-line; overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/51501">51501</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/51501","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>gziolo</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2021-07-28 10:05:01 +0000 (Wed, 28 Jul 2021)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>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 <a href="https://core.trac.wordpress.org/ticket/53690">#53690</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkgitignore">trunk/.gitignore</a></li>
<li><a href="#trunkGruntfilejs">trunk/Gruntfile.js</a></li>
<li><a href="#trunksrcwpincludesblocksphp">trunk/src/wp-includes/blocks.php</a></li>
<li><a href="#trunksrcwpincludesclasswpblocktypephp">trunk/src/wp-includes/class-wp-block-type.php</a></li>
<li><a href="#trunksrcwpincludesclasswpblockphp">trunk/src/wp-includes/class-wp-block.php</a></li>
<li><a href="#trunksrcwpincludesrestapiendpointsclasswprestblocktypescontrollerphp">trunk/src/wp-includes/rest-api/endpoints/class-wp-rest-block-types-controller.php</a></li>
<li><a href="#trunktestsphpunitdatablocksnoticeblockjson">trunk/tests/phpunit/data/blocks/notice/block.json</a></li>
<li><a href="#trunktestsphpunittestsblocksregisterphp">trunk/tests/phpunit/tests/blocks/register.php</a></li>
<li><a href="#trunktestsphpunittestsrestapirestblocktypecontrollerphp">trunk/tests/phpunit/tests/rest-api/rest-block-type-controller.php</a></li>
<li><a href="#trunktoolswebpackpackagesjs">trunk/tools/webpack/packages.js</a></li>
<li><a href="#trunkwebpackconfigjs">trunk/webpack.config.js</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunksrcwpincludesblocksfileviewassetphp">trunk/src/wp-includes/blocks/file/view.asset.php</a></li>
<li><a href="#trunksrcwpincludesblocksfileviewminassetphp">trunk/src/wp-includes/blocks/file/view.min.asset.php</a></li>
<li><a href="#trunktoolswebpackblocksjs">trunk/tools/webpack/blocks.js</a></li>
</ul>
<h3>Property Changed</h3>
<ul>
<li><a href="#trunksrcwpincludesblocksfile">trunk/src/wp-includes/blocks/file/</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkgitignore"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/.gitignore</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/.gitignore 2021-07-28 10:00:51 UTC (rev 51500)
+++ trunk/.gitignore 2021-07-28 10:05:01 UTC (rev 51501)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -29,6 +29,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /src/wp-includes/css/*.min.css
</span><span class="cx" style="display: block; padding: 0 10px"> /src/wp-includes/css/*-rtl.css
</span><span class="cx" style="display: block; padding: 0 10px"> /src/wp-includes/blocks/**/*.css
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/src/wp-includes/blocks/**/*.js
+/src/wp-includes/blocks/**/*.js.map
</ins><span class="cx" style="display: block; padding: 0 10px"> /packagehash.txt
</span><span class="cx" style="display: block; padding: 0 10px"> /artifacts
</span><span class="cx" style="display: block; padding: 0 10px">
</span></span></pre></div>
<a id="trunkGruntfilejs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/Gruntfile.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/Gruntfile.js 2021-07-28 10:00:51 UTC (rev 51500)
+++ trunk/Gruntfile.js 2021-07-28 10:05:01 UTC (rev 51501)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -997,6 +997,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> WORKING_DIR + 'wp-{admin,includes}/**/*.js',
</span><span class="cx" style="display: block; padding: 0 10px"> WORKING_DIR + 'wp-content/themes/twenty*/**/*.js',
</span><span class="cx" style="display: block; padding: 0 10px"> '!' + WORKING_DIR + 'wp-content/themes/twenty*/node_modules/**/*.js',
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ '!' + WORKING_DIR + 'wp-includes/blocks/**/*.js',
</ins><span class="cx" style="display: block; padding: 0 10px"> '!' + WORKING_DIR + 'wp-includes/js/dist/**/*.js',
</span><span class="cx" style="display: block; padding: 0 10px"> ]
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">Index: trunk/src/wp-includes/blocks/file
</span><span class="cx" style="display: block; padding: 0 10px">===================================================================
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">--- trunk/src/wp-includes/blocks/file 2021-07-28 10:00:51 UTC (rev 51500)
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+++ trunk/src/wp-includes/blocks/file 2021-07-28 10:05:01 UTC (rev 51501)
</ins></span></pre></div>
<a id="trunksrcwpincludesblocksfile"></a>
<div class="propset"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Property changes: trunk/src/wp-includes/blocks/file</h4>
<pre class="diff"><span>
</span></pre></div>
<a id="svnignore"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: svn:ignore</h4></div>
<span class="cx" style="display: block; padding: 0 10px"> *.css
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+*.js
+*.js.map
</ins><a id="trunksrcwpincludesblocksfileviewassetphp"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: trunk/src/wp-includes/blocks/file/view.asset.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/blocks/file/view.asset.php (rev 0)
+++ trunk/src/wp-includes/blocks/file/view.asset.php 2021-07-28 10:05:01 UTC (rev 51501)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+<?php return array('dependencies' => array('wp-polyfill'), 'version' => '499eaf2efb98327a07f222e92d742380');
</ins><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of file
</span><span class="cx" style="display: block; padding: 0 10px">Property changes on: trunk/src/wp-includes/blocks/file/view.asset.php
</span><span class="cx" style="display: block; padding: 0 10px">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: svn:eol-style</h4></div>
<ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+native
</ins><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of property
</span><a id="trunksrcwpincludesblocksfileviewminassetphp"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: trunk/src/wp-includes/blocks/file/view.min.asset.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/blocks/file/view.min.asset.php (rev 0)
+++ trunk/src/wp-includes/blocks/file/view.min.asset.php 2021-07-28 10:05:01 UTC (rev 51501)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+<?php return array('dependencies' => array('wp-polyfill'), 'version' => 'e8d668b8e69d9bf1c99dc250d92f2b72');
</ins><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of file
</span><span class="cx" style="display: block; padding: 0 10px">Property changes on: trunk/src/wp-includes/blocks/file/view.min.asset.php
</span><span class="cx" style="display: block; padding: 0 10px">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: svn:eol-style</h4></div>
<ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+native
</ins><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of property
</span><a id="trunksrcwpincludesblocksphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/blocks.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/blocks.php 2021-07-28 10:00:51 UTC (rev 51500)
+++ trunk/src/wp-includes/blocks.php 2021-07-28 10:05:01 UTC (rev 51501)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -42,6 +42,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> if ( 0 === strpos( $field_name, 'editor' ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> $asset_handle .= '-editor';
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( 0 === strpos( $field_name, 'view' ) ) {
+ $asset_handle .= '-view';
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> return $asset_handle;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -48,6 +51,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $field_mappings = array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'editorScript' => 'editor-script',
</span><span class="cx" style="display: block; padding: 0 10px"> 'script' => 'script',
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'viewScript' => 'view-script',
</ins><span class="cx" style="display: block; padding: 0 10px"> 'editorStyle' => 'editor-style',
</span><span class="cx" style="display: block; padding: 0 10px"> 'style' => 'style',
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -96,18 +100,23 @@
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px"> return false;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $script_asset = require $script_asset_path;
- $result = wp_register_script(
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $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(
</ins><span class="cx" style="display: block; padding: 0 10px"> $script_handle,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- plugins_url( $script_path, $metadata['file'] ),
- $script_asset['dependencies'],
- $script_asset['version']
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $script_uri,
+ $script_dependencies,
+ isset( $script_asset['version'] ) ? $script_asset['version'] : false
</ins><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px"> if ( ! $result ) {
</span><span class="cx" style="display: block; padding: 0 10px"> return false;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( ! empty( $metadata['textdomain'] ) ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( ! empty( $metadata['textdomain'] ) && in_array( 'wp-i18n', $script_dependencies ) ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> wp_set_script_translations( $script_handle, $metadata['textdomain'] );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -182,6 +191,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * Registers a block type from the metadata stored in the `block.json` file.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 5.5.0
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * @since 5.9.0 Added support for the `viewScript` field.
</ins><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @param string $file_or_folder Path to the JSON file with metadata definition for
</span><span class="cx" style="display: block; padding: 0 10px"> * the block or path to the folder where the `block.json` file is located.
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -304,6 +314,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( ! empty( $metadata['viewScript'] ) ) {
+ $settings['view_script'] = register_block_script_handle(
+ $metadata,
+ 'viewScript'
+ );
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( ! empty( $metadata['editorStyle'] ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> $settings['editor_style'] = register_block_style_handle(
</span><span class="cx" style="display: block; padding: 0 10px"> $metadata,
</span></span></pre></div>
<a id="trunksrcwpincludesclasswpblocktypephp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/class-wp-block-type.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/class-wp-block-type.php 2021-07-28 10:00:51 UTC (rev 51500)
+++ trunk/src/wp-includes/class-wp-block-type.php 2021-07-28 10:05:01 UTC (rev 51501)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -156,7 +156,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> public $provides_context = null;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * Block type editor script handle.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Block type editor only script handle.
</ins><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 5.0.0
</span><span class="cx" style="display: block; padding: 0 10px"> * @var string|null
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -164,7 +164,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> public $editor_script = null;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * Block type front end script handle.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Block type front end and editor script handle.
</ins><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 5.0.0
</span><span class="cx" style="display: block; padding: 0 10px"> * @var string|null
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -172,8 +172,16 @@
</span><span class="cx" style="display: block; padding: 0 10px"> public $script = null;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * Block type editor style handle.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Block type front end only script handle.
</ins><span class="cx" style="display: block; padding: 0 10px"> *
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * @since 5.9.0
+ * @var string|null
+ */
+ public $view_script = null;
+
+ /**
+ * Block type editor only style handle.
+ *
</ins><span class="cx" style="display: block; padding: 0 10px"> * @since 5.0.0
</span><span class="cx" style="display: block; padding: 0 10px"> * @var string|null
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -180,7 +188,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> public $editor_style = null;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * Block type front end style handle.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Block type front end and editor style handle.
</ins><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 5.0.0
</span><span class="cx" style="display: block; padding: 0 10px"> * @var string|null
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -198,6 +206,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * `uses_context`, and `provides_context` properties.
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 5.6.0 Added the `api_version` property.
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 5.8.0 Added the `variations` property.
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * @since 5.9.0 Added the `view_script` property.
</ins><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @see register_block_type()
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -225,10 +234,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @type array|null $attributes Block type attributes property schemas.
</span><span class="cx" style="display: block; padding: 0 10px"> * @type array $uses_context Context values inherited by blocks of this type.
</span><span class="cx" style="display: block; padding: 0 10px"> * @type array|null $provides_context Context provided by blocks of this type.
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * @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.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * @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.
</ins><span class="cx" style="display: block; padding: 0 10px"> * }
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> public function __construct( $block_type, $args = array() ) {
</span></span></pre></div>
<a id="trunksrcwpincludesclasswpblockphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/class-wp-block.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/class-wp-block.php 2021-07-28 10:00:51 UTC (rev 51500)
+++ trunk/src/wp-includes/class-wp-block.php 2021-07-28 10:05:01 UTC (rev 51501)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -229,6 +229,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> wp_enqueue_script( $this->block_type->script );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( ! empty( $this->block_type->view_script ) && empty( $this->block_type->render_callback ) ) {
+ wp_enqueue_script( $this->block_type->view_script );
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( ! empty( $this->block_type->style ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> wp_enqueue_style( $this->block_type->style );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre></div>
<a id="trunksrcwpincludesrestapiendpointsclasswprestblocktypescontrollerphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/rest-api/endpoints/class-wp-rest-block-types-controller.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/rest-api/endpoints/class-wp-rest-block-types-controller.php 2021-07-28 10:00:51 UTC (rev 51500)
+++ trunk/src/wp-includes/rest-api/endpoints/class-wp-rest-block-types-controller.php 2021-07-28 10:05:01 UTC (rev 51501)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -272,6 +272,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 'example',
</span><span class="cx" style="display: block; padding: 0 10px"> 'editor_script',
</span><span class="cx" style="display: block; padding: 0 10px"> 'script',
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'view_script',
</ins><span class="cx" style="display: block; padding: 0 10px"> 'editor_style',
</span><span class="cx" style="display: block; padding: 0 10px"> 'style',
</span><span class="cx" style="display: block; padding: 0 10px"> 'variations',
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -517,6 +518,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 'readonly' => true,
</span><span class="cx" style="display: block; padding: 0 10px"> ),
</span><span class="cx" style="display: block; padding: 0 10px"> 'script' => array(
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'description' => __( 'Public facing and editor script handle.' ),
+ 'type' => array( 'string', 'null' ),
+ 'default' => null,
+ 'context' => array( 'embed', 'view', 'edit' ),
+ 'readonly' => true,
+ ),
+ 'view_script' => array(
</ins><span class="cx" style="display: block; padding: 0 10px"> 'description' => __( 'Public facing script handle.' ),
</span><span class="cx" style="display: block; padding: 0 10px"> 'type' => array( 'string', 'null' ),
</span><span class="cx" style="display: block; padding: 0 10px"> 'default' => null,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -531,7 +539,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 'readonly' => true,
</span><span class="cx" style="display: block; padding: 0 10px"> ),
</span><span class="cx" style="display: block; padding: 0 10px"> 'style' => array(
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 'description' => __( 'Public facing style handle.' ),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'description' => __( 'Public facing and editor style handle.' ),
</ins><span class="cx" style="display: block; padding: 0 10px"> 'type' => array( 'string', 'null' ),
</span><span class="cx" style="display: block; padding: 0 10px"> 'default' => null,
</span><span class="cx" style="display: block; padding: 0 10px"> 'context' => array( 'embed', 'view', 'edit' ),
</span></span></pre></div>
<a id="trunktestsphpunitdatablocksnoticeblockjson"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/tests/phpunit/data/blocks/notice/block.json</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/phpunit/data/blocks/notice/block.json 2021-07-28 10:00:51 UTC (rev 51500)
+++ trunk/tests/phpunit/data/blocks/notice/block.json 2021-07-28 10:05:01 UTC (rev 51501)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -48,6 +48,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> },
</span><span class="cx" style="display: block; padding: 0 10px"> "editorScript": "tests-notice-editor-script",
</span><span class="cx" style="display: block; padding: 0 10px"> "script": "tests-notice-script",
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ "viewScript": "tests-notice-view-script",
</ins><span class="cx" style="display: block; padding: 0 10px"> "editorStyle": "tests-notice-editor-style",
</span><span class="cx" style="display: block; padding: 0 10px"> "style": "tests-notice-style"
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre></div>
<a id="trunktestsphpunittestsblocksregisterphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/tests/phpunit/tests/blocks/register.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/phpunit/tests/blocks/register.php 2021-07-28 10:00:51 UTC (rev 51500)
+++ trunk/tests/phpunit/tests/blocks/register.php 2021-07-28 10:05:01 UTC (rev 51501)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -133,6 +133,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> generate_block_asset_handle( $block_name, 'script' )
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertSame(
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'unit-tests-my-block-view-script',
+ generate_block_asset_handle( $block_name, 'viewScript' )
+ );
+ $this->assertSame(
</ins><span class="cx" style="display: block; padding: 0 10px"> 'unit-tests-my-block-editor-style',
</span><span class="cx" style="display: block; padding: 0 10px"> generate_block_asset_handle( $block_name, 'editorStyle' )
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -157,6 +161,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> generate_block_asset_handle( $block_name, 'script' )
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertSame(
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'wp-block-paragraph-view',
+ generate_block_asset_handle( $block_name, 'viewScript' )
+ );
+ $this->assertSame(
</ins><span class="cx" style="display: block; padding: 0 10px"> 'wp-block-paragraph-editor',
</span><span class="cx" style="display: block; padding: 0 10px"> generate_block_asset_handle( $block_name, 'editorStyle' )
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -372,6 +380,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertSame( 'tests-notice-editor-script', $result->editor_script );
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertSame( 'tests-notice-script', $result->script );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $this->assertSame( 'tests-notice-view-script', $result->view_script );
</ins><span class="cx" style="display: block; padding: 0 10px"> $this->assertSame( 'tests-notice-editor-style', $result->editor_style );
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertSame( 'tests-notice-style', $result->style );
</span><span class="cx" style="display: block; padding: 0 10px">
</span></span></pre></div>
<a id="trunktestsphpunittestsrestapirestblocktypecontrollerphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/tests/phpunit/tests/rest-api/rest-block-type-controller.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/phpunit/tests/rest-api/rest-block-type-controller.php 2021-07-28 10:00:51 UTC (rev 51500)
+++ trunk/tests/phpunit/tests/rest-api/rest-block-type-controller.php 2021-07-28 10:05:01 UTC (rev 51501)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -215,6 +215,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 'category' => true,
</span><span class="cx" style="display: block; padding: 0 10px"> 'editor_script' => true,
</span><span class="cx" style="display: block; padding: 0 10px"> 'script' => true,
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'view_script' => true,
</ins><span class="cx" style="display: block; padding: 0 10px"> 'editor_style' => true,
</span><span class="cx" style="display: block; padding: 0 10px"> 'style' => true,
</span><span class="cx" style="display: block; padding: 0 10px"> 'keywords' => 'invalid_keywords',
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -237,6 +238,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertNull( $data['icon'] );
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertNull( $data['editor_script'] );
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertNull( $data['script'] );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $this->assertNull( $data['view_script'] );
</ins><span class="cx" style="display: block; padding: 0 10px"> $this->assertNull( $data['editor_style'] );
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertNull( $data['style'] );
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertSameSets( array(), $data['provides_context'] );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -268,6 +270,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 'category' => false,
</span><span class="cx" style="display: block; padding: 0 10px"> 'editor_script' => false,
</span><span class="cx" style="display: block; padding: 0 10px"> 'script' => false,
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'view_script' => false,
</ins><span class="cx" style="display: block; padding: 0 10px"> 'editor_style' => false,
</span><span class="cx" style="display: block; padding: 0 10px"> 'style' => false,
</span><span class="cx" style="display: block; padding: 0 10px"> 'keywords' => false,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -290,6 +293,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertNull( $data['icon'] );
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertNull( $data['editor_script'] );
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertNull( $data['script'] );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $this->assertNull( $data['view_script'] );
</ins><span class="cx" style="display: block; padding: 0 10px"> $this->assertNull( $data['editor_style'] );
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertNull( $data['style'] );
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertSameSets( array(), $data['attributes'] );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -374,7 +378,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $response = rest_get_server()->dispatch( $request );
</span><span class="cx" style="display: block; padding: 0 10px"> $data = $response->get_data();
</span><span class="cx" style="display: block; padding: 0 10px"> $properties = $data['schema']['properties'];
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $this->assertCount( 21, $properties );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $this->assertCount( 22, $properties );
</ins><span class="cx" style="display: block; padding: 0 10px"> $this->assertArrayHasKey( 'api_version', $properties );
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertArrayHasKey( 'title', $properties );
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertArrayHasKey( 'icon', $properties );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -389,6 +393,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertArrayHasKey( 'is_dynamic', $properties );
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertArrayHasKey( 'editor_script', $properties );
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertArrayHasKey( 'script', $properties );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $this->assertArrayHasKey( 'view_script', $properties );
</ins><span class="cx" style="display: block; padding: 0 10px"> $this->assertArrayHasKey( 'editor_style', $properties );
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertArrayHasKey( 'style', $properties );
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertArrayHasKey( 'parent', $properties );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -500,6 +505,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 'category',
</span><span class="cx" style="display: block; padding: 0 10px"> 'editor_script',
</span><span class="cx" style="display: block; padding: 0 10px"> 'script',
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'view_script',
</ins><span class="cx" style="display: block; padding: 0 10px"> 'editor_style',
</span><span class="cx" style="display: block; padding: 0 10px"> 'style',
</span><span class="cx" style="display: block; padding: 0 10px"> 'title',
</span></span></pre></div>
<a id="trunktoolswebpackblocksjs"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: trunk/tools/webpack/blocks.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tools/webpack/blocks.js (rev 0)
+++ trunk/tools/webpack/blocks.js 2021-07-28 10:05:01 UTC (rev 51501)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,212 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * 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;
+};
</ins><span class="cx" style="display: block; padding: 0 10px">Property changes on: trunk/tools/webpack/blocks.js
</span><span class="cx" style="display: block; padding: 0 10px">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: svn:eol-style</h4></div>
<ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+native
</ins><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of property
</span><a id="trunktoolswebpackpackagesjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/tools/webpack/packages.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tools/webpack/packages.js 2021-07-28 10:00:51 UTC (rev 51500)
+++ trunk/tools/webpack/packages.js 2021-07-28 10:05:01 UTC (rev 51501)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -106,86 +106,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 'wp-polyfill-dom-rect.min.js': 'polyfill-library/polyfills/__dist/DOMRect/raw.js',
</span><span class="cx" style="display: block; padding: 0 10px"> };
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 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,
- ];
</del><span class="cx" style="display: block; padding: 0 10px"> const phpFiles = {
</span><span class="cx" style="display: block; padding: 0 10px"> 'block-serialization-default-parser/parser.php': 'wp-includes/class-wp-block-parser.php',
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- '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;
- } , {} ),
</del><span class="cx" style="display: block; padding: 0 10px"> };
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 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;
- } , {} ),
- };
</del><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> const developmentCopies = mapVendorCopies( vendors, buildTarget );
</span><span class="cx" style="display: block; padding: 0 10px"> const minifiedCopies = mapVendorCopies( minifiedVendors, buildTarget );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -231,37 +154,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> to: join( baseDir, `src/${ phpFiles[ filename ] }` ),
</span><span class="cx" style="display: block; padding: 0 10px"> } ) );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 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;
- }
- } ) );
-
</del><span class="cx" style="display: block; padding: 0 10px"> const config = {
</span><span class="cx" style="display: block; padding: 0 10px"> mode,
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -352,8 +244,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> ...vendorCopies,
</span><span class="cx" style="display: block; padding: 0 10px"> ...cssCopies,
</span><span class="cx" style="display: block; padding: 0 10px"> ...phpCopies,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- ...blockMetadataCopies,
- ...blockStylesheetCopies,
</del><span class="cx" style="display: block; padding: 0 10px"> ],
</span><span class="cx" style="display: block; padding: 0 10px"> ),
</span><span class="cx" style="display: block; padding: 0 10px"> ],
</span></span></pre></div>
<a id="trunkwebpackconfigjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/webpack.config.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/webpack.config.js 2021-07-28 10:00:51 UTC (rev 51500)
+++ trunk/webpack.config.js 2021-07-28 10:05:01 UTC (rev 51501)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,3 +1,4 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+const blocksConfig = require( './tools/webpack/blocks' );
</ins><span class="cx" style="display: block; padding: 0 10px"> const mediaConfig = require( './tools/webpack/media' );
</span><span class="cx" style="display: block; padding: 0 10px"> const packagesConfig = require( './tools/webpack/packages' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -11,6 +12,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> const config = [
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ blocksConfig( env ),
</ins><span class="cx" style="display: block; padding: 0 10px"> mediaConfig( env ),
</span><span class="cx" style="display: block; padding: 0 10px"> packagesConfig( env ),
</span><span class="cx" style="display: block; padding: 0 10px"> ];
</span></span></pre>
</div>
</div>
</body>
</html>