Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion lib/client-assets.php
Original file line number Diff line number Diff line change
Expand Up @@ -895,7 +895,7 @@ function gutenberg_editor_scripts_and_styles( $hook ) {
$script .= <<<JS
window._wpLoadGutenbergEditor = wp.api.init().then( function() {
wp.blocks.registerCoreBlocks();
return wp[ 'edit-post' ].initializeEditor( 'editor', window._wpGutenbergPost, editorSettings );
return wp.editPost.initializeEditor( 'editor', window._wpGutenbergPost, editorSettings );
} );
JS;
$script .= '} )();';
Expand Down
76 changes: 71 additions & 5 deletions webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,12 @@
const webpack = require( 'webpack' );
const ExtractTextPlugin = require( 'extract-text-webpack-plugin' );
const WebpackRTLPlugin = require( 'webpack-rtl-plugin' );
const { reduce, escapeRegExp, castArray, get } = require( 'lodash' );
const { basename } = require( 'path' );

// Main CSS loader for everything but blocks..
const mainCSSExtractTextPlugin = new ExtractTextPlugin( {
filename: './[name]/build/style.css',
filename: './[basename]/build/style.css',
} );

// CSS loader for styles specific to block editing.
Expand Down Expand Up @@ -53,7 +55,7 @@ const entryPointNames = [
'i18n',
'utils',
'data',
'edit-post',
[ 'editPost', 'edit-post' ],
];

const packageNames = [
Expand All @@ -75,10 +77,64 @@ const externals = {
};
} );

/**
* Webpack plugin for handling specific template tags in Webpack configuration
* values like those supported in the base Webpack functionality (e.g. `name`).
*
* @see webpack.TemplatedPathPlugin
*/
class CustomTemplatedPathPlugin {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we plan to extract it and move to WordPress/packages at some point? It might be useful for other repositories.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we plan to extract it and move to WordPress/packages at some point? It might be useful for other repositories.

Yeah, seems like a generally useful plugin.

/**
* CustomTemplatedPathPlugin constructor. Initializes handlers as a tuple
* set of RegExp, handler, where the regular expression is used in matching
* a Webpack asset path.
*
* @param {Object.<string,Function>} handlers Object keyed by tag to match,
* with function value returning
* replacement string.
*
* @return {void}
*/
constructor( handlers ) {
this.handlers = reduce( handlers, ( result, handler, key ) => {
const regexp = new RegExp( `\\[${ escapeRegExp( key ) }\\]`, 'gi' );
return [ ...result, [ regexp, handler ] ];
}, [] );
}

/**
* Webpack plugin application logic.
*
* @param {Object} compiler Webpack compiler
*
* @return {void}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we really need to explicitly document that function doesn't return anything? Wouldn't it enough to assume that a function by default doesn't return value?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we really need to explicitly document that function doesn't return anything? Wouldn't it enough to assume that a function by default doesn't return value?

There's some precedent of this in existing core documentation. In general I'd be inclined to agree with you that it could be omitted for undefined return, but I could also see an argument for consistency / explicitness. Maybe worth bringing up in tomorrow's JS meeting? 😉

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Docs again? Count me in ❤️

*/
apply( compiler ) {
compiler.plugin( 'compilation', ( compilation ) => {
compilation.mainTemplate.plugin( 'asset-path', ( path, data ) => {
for ( let i = 0; i < this.handlers.length; i++ ) {
const [ regexp, handler ] = this.handlers[ i ];
if ( regexp.test( path ) ) {
return path.replace( regexp, handler( path, data ) );
}
}

return path;
} );
} );
}
}

const config = {
entry: Object.assign(
entryPointNames.reduce( ( memo, entryPointName ) => {
memo[ entryPointName ] = `./${ entryPointName }/index.js`;
entryPointNames.reduce( ( memo, entryPoint ) => {
// Normalized entry point as an array of [ name, path ]. If a path
// is not explicitly defined, use the name.
entryPoint = castArray( entryPoint );
const [ name, path = name ] = entryPoint;

memo[ name ] = `./${ path }`;

return memo;
}, {} ),
packageNames.reduce( ( memo, packageName ) => {
Expand All @@ -87,7 +143,7 @@ const config = {
}, {} )
),
output: {
filename: '[name]/build/index.js',
filename: '[basename]/build/index.js',
path: __dirname,
library: [ 'wp', '[name]' ],
libraryTarget: 'this',
Expand Down Expand Up @@ -149,6 +205,16 @@ const config = {
minimize: process.env.NODE_ENV === 'production',
debug: process.env.NODE_ENV !== 'production',
} ),
new CustomTemplatedPathPlugin( {
basename( path, data ) {
const rawRequest = get( data, [ 'chunk', 'entryModule', 'rawRequest' ] );
if ( rawRequest ) {
return basename( rawRequest );
}

return path;
},
} ),
],
stats: {
children: false,
Expand Down