Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhance create-block package to support blocks manifest and relevant Core APIs by default #69446

Open
wants to merge 3 commits into
base: trunk
Choose a base branch
from
+26 −7
Open

Enhance create-block package to support blocks manifest and relevant Core APIs by default #69446

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cca15f8
Enhance create-block package to support blocks manifest and relevant …
felixarntz Mar 5, 2025
0910bdf
Merge branch 'trunk' into enhance/create-block-with-blocks-manifest
felixarntz Mar 7, 2025
fa54d00
Ensure npm run start also generates block manifest.
felixarntz Mar 7, 2025
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
8 changes: 5 additions & 3 deletions packages/create-block/lib/init-package-json.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,9 +42,11 @@ module.exports = async ( {
main: wpScripts && 'build/index.js',
scripts: {
...( wpScripts && {
build: isDynamicVariant
? 'wp-scripts build --webpack-copy-php'
: 'wp-scripts build',
build:
( isDynamicVariant
? 'wp-scripts build --webpack-copy-php'
: 'wp-scripts build' ) +
' && wp-scripts build-blocks-manifest',
Copy link
Member

Choose a reason for hiding this comment

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

I'm wondering what we should do about start which is more nuanced as it works in the watch mode, so it would have to run wp-scripts build-blocks-manifest each time any block.json file changes in the build folder.

After consulting ChatGPT, it looks like the simplest approach would be to create a simple Webpack plugin that runs the post-processing script after each build (including the watch mode), example code that illustrates the idea:

class PostProcessPlugin {
  apply(compiler) {
    compiler.hooks.done.tap('PostProcessPlugin', (stats) => {
      console.log('Running post-processing script...');
      const { exec } = require('child_process');

      exec('node postprocess.js', (error, stdout, stderr) => {
        if (error) {
          console.error(`Post-processing error: ${error.message}`);
          return;
        }
        if (stderr) {
          console.error(`Post-processing stderr: ${stderr}`);
          return;
        }
        console.log(`Post-processing stdout: ${stdout}`);
      });
    });
  }
}

module.exports = {
  // Your Webpack config...
  plugins: [new PostProcessPlugin()]
};

Copy link
Member Author

Choose a reason for hiding this comment

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

That's a great point, but it goes a bit over my head, as I'm not very familiar with the lower-level best practices for Webpack 🫤

Are you saying this would go in a Webpack file for the generated plugin? Or something we should build into wp-scripts? Maybe we can have a configuration for whether to run the watching with or without support for build-blocks-manifest?

Copy link
Member

Choose a reason for hiding this comment

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

Updating start to mirror the changes applied in this PR for build could be good enough to proceed.

We can explore separately how to improve that later. If someone changes block.json during development and it wouldn't get picked up by the generated manifest file, they can always restart the command.

Copy link
Member Author

Choose a reason for hiding this comment

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

SG, added in fa54d00

format: 'wp-scripts format',
'lint:css': 'wp-scripts lint-style',
'lint:js': 'wp-scripts lint-js',
Expand Down
2 changes: 1 addition & 1 deletion packages/create-block/lib/init-wp-scripts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ module.exports = async ( { rootDirectory } ) => {
} );

info( '' );
info( 'Compiling block.' );
info( 'Compiling block and generating blocks manifest.' );
await command( 'npm run build', {
cwd: rootDirectory,
} );
Expand Down
15 changes: 15 additions & 0 deletions packages/create-block/lib/templates/plugin/$slug.php.mustache
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,21 @@ if ( ! defined( 'ABSPATH' ) ) {
* @see https://developer.wordpress.org/reference/functions/register_block_type/
*/
function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() {
{{#wpScripts}}
if ( function_exists( 'wp_register_block_types_from_metadata_collection' ) ) { // Function introduced in WordPress 6.8.
wp_register_block_types_from_metadata_collection( __DIR__ . '/build', __DIR__ . '/build/blocks-manifest.php' );
} else {
if ( function_exists( 'wp_register_block_metadata_collection' ) ) { // Function introduced in WordPress 6.7.
wp_register_block_metadata_collection( __DIR__ . '/build', __DIR__ . '/build/blocks-manifest.php' );
}
$manifest_data = require __DIR__ . '/build/blocks-manifest.php';
foreach ( array_keys( $manifest_data ) as $block_type ) {
register_block_type( __DIR__ . "/build/{$block_type}" );
}
}
{{/wpScripts}}
{{^wpScripts}}
register_block_type( __DIR__ . '/build/{{slug}}' );
Copy link
Member

Choose a reason for hiding this comment

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

I'm glad we landed #68175 earlier, which made it easier to use the metadata collection.

{{/wpScripts}}
}
add_action( 'init', '{{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init' );
Loading