Add support for @wordpress/scripts, block.json and create block #82

stevenslack · 2022-12-01T15:09:37Z

Adds support for building blocks using @wordpress/scripts as described in #78

Extends the @wordpress/scripts Webpack configuration for customizations.
Removes the need for many build dependencies
Removes the Dependency Extraction Webpack Plugin and the need for a custom wpAssets script.
Webpack configuration is handled in @wordpress/scripts.
Adds the ability to enqueue scripts from within the context of an entry point.
Automatic block.json detection and the source code directory
Works with Typescript! .ts and .tsx files are compiled.

kevinfodness

This looks great - I left some questions and food for thought, but no blockers. Excited to start using this. We'll continue to iterate as we see how things work in the wild. 🍣

bin/create-block/templates/block/edit.jsx.mustache

bin/create-block/templates/block/render.php.mustache

kevinfodness · 2022-12-02T14:58:24Z

configure.php

@@ -270,10 +270,12 @@ function delete_files( string|array $paths ) {
 			'.eslintrc.json',
 			'.nvmrc',
 			'.stylelintrc.json',
-			'babel.config.json',
+			'babel.config.js',


Does the babel file still exist / still need to exist since we're using wp-scripts as the build system?

Yes! WP Scripts uses Babel for Typescript and Jest to work correctly.

entries/example-slotfills/index.php

kevinfodness · 2022-12-02T15:01:33Z

jest.config.js

+    // For transformations with .ts and .tsx files.
+    ...tsjPreset.transform,
+    // For transformations with .js and .jsx files.
+    '^.+\\.(js|jsx)$': 'babel-jest',


Is this necessary? I thought ts-jest would handle regular JS files also and not require Babel? Could also come back to this later. I'd generally love to live in a Babel-free future (or at least where it's handled by something else and I don't have to touch it).

Yes, if there are tests written in js or jsx Jest will fail without this. It is documented in integrating Jest and TS. I would also prefer a babel free future. Unfortunately getting Jest to work with TS with WP Scripts involves using babel.

srtfisher

one comment, looks 💯 . I'd love to see TS be the default in the very near future.

srtfisher · 2022-12-02T20:01:00Z

bin/create-block/templates/block/edit.jsx.mustache

@@ -0,0 +1,38 @@
+/**


We should split out a ticket to make these .tsx files that are generated.

Created an issue for this: #90

stevenslack and others added 30 commits November 29, 2022 16:16

add create-block templates for create-block script

6cea812

add create-block, scripts, and run update dependencies

5790ede

add copy-webpack-plugin

f617b72

update dependencies

8cc37a4

use @alleyinteractive/stylelint-config for stylelint configuration

b17784b

add blocks directory

aed60e9

add tsconfig.json configuration file

2ba7a44

update readme with dependency update info

6091461

add blocks directory to be removed in configure file

9c13eab

move slotfills to entries

18260a2

move src files to inc directory

2e329dc

update entries directory to src

f8ababb

update the composer file to reference the inc directory

f6a191e

add jest configuration

32c5862

update eslint config for typescript, update editorconfig to include ts

96f3431

remove unused assets

8a7816b

remove jest config in package.json remove babel config

b6baf2c

refine asset helper functions and examples

36bb440

correct namespaces and package name in create block

407ee8c

Merge branch 'feature/wp-scripts' into feature/wp-scripts-develop

7ae9d45

update dependencies, remove stylelint

26ded45

move load_scripts to assets.php file

1ebb1a6

ensure css files are output in src directory

8f4657e

Merge branch 'develop' into feature/wp-scripts

d602ba6

fix jest to work with Typescript

ab50a03

phpcs fix

5a3261c

allow linting and tests to pass without files

0f2c38f

update configure file to remove correct files

5d6f924

Small phpcs adjustment, heading block

e486439

move js entries from src back to entries, add render to block.json

e59bf3c

stevenslack added 8 commits December 1, 2022 16:14

Merge branch 'feature/wp-scripts-SRC' into feature/wp-scripts

0c3388d

add changes for render template in block json for wp 6.1

8b2796c

update block configuration for 6.1 scaffolding

b21373a

use constant for glob includes

98b25a8

Merge branch 'develop' into feature/wp-scripts

5c2d706

revert src to entries for deleting front end assets

7a0b6b0

entry assets to src assets

266ca6d

correct path for phpcs exclusion, update comment

6773eb0

kevinfodness approved these changes Dec 2, 2022

View reviewed changes

srtfisher linked an issue Dec 2, 2022 that may be closed by this pull request

Switch to wp-scripts for webpack building #78

Closed

stevenslack added 7 commits December 2, 2022 12:25

replace instances of wp-starter-plugin strings

62c8bc9

replace package_name with plugin slug

0478007

remove ESLint disabling rule for props spreading

60271bf

update block directory README

3acee62

update docs for including example CSS

354174a

update base README

ead4540

Merge branch 'develop' into feature/wp-scripts

9d9cd54

srtfisher reviewed Dec 2, 2022

View reviewed changes

Merge remote-tracking branch 'origin/develop' into feature/wp-scripts

9ff8d6f

stevenslack merged commit 70660d3 into develop Dec 2, 2022

stevenslack deleted the feature/wp-scripts branch December 2, 2022 20:17

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add support for @wordpress/scripts, block.json and create block #82

Add support for @wordpress/scripts, block.json and create block #82

stevenslack commented Dec 1, 2022 •

edited

Loading

kevinfodness left a comment

kevinfodness Dec 2, 2022

stevenslack Dec 2, 2022

kevinfodness Dec 2, 2022

stevenslack Dec 2, 2022

srtfisher left a comment

srtfisher Dec 2, 2022

stevenslack Dec 2, 2022

Add support for @wordpress/scripts, block.json and create block #82

Add support for @wordpress/scripts, block.json and create block #82

Conversation

stevenslack commented Dec 1, 2022 • edited Loading

kevinfodness left a comment

Choose a reason for hiding this comment

kevinfodness Dec 2, 2022

Choose a reason for hiding this comment

stevenslack Dec 2, 2022

Choose a reason for hiding this comment

kevinfodness Dec 2, 2022

Choose a reason for hiding this comment

stevenslack Dec 2, 2022

Choose a reason for hiding this comment

srtfisher left a comment

Choose a reason for hiding this comment

srtfisher Dec 2, 2022

Choose a reason for hiding this comment

stevenslack Dec 2, 2022

Choose a reason for hiding this comment

stevenslack commented Dec 1, 2022 •

edited

Loading