Add `faust blockset` command #1585

josephfusco · 2023-09-20T15:29:30Z

Tasks

I have signed a Contributor License Agreement (CLA) with WP Engine.
If a code change, I have written testing instructions that the whole team & outside contributors can understand.
I have written and included a comprehensive changeset to properly document the changes I've made.

Description

These changes introduce a new command, faust blockset, for the @faustwp/cli package as well as the corresponding WP REST API endpoint to handle moving the blocks from the Next.js application into the WordPress uploads directory.

Related Issue(s):

RFC: React Components to Gutenberg Blocks #1522

Testing

Pull down these changes: nojira-add-blockset-command. Run npm i and npm run build at root of monorepo.
Run npm run blockset -w @faustwp/block-support-example from the root of the monorepo - this assumes you have plugins/faustwp/ symlinked into a local WordPress site.
Observe that wp-content/uploads/faustwp/blocks/ in your WordPress site now contains block-a & block-b.
Delete block-a from the Next.js application
Run npm run blockset -w @faustwp/block-support-example again
Observe that wp-content/uploads/faustwp/blocks/ now only contains block-b.

Demo

blockset-filetransfer-demo.mov

Signed-off-by: Joe Fusco <[email protected]>

Signed-off-by: Joe Fusco <[email protected]> # Conflicts: # package-lock.json

Signed-off-by: Joe Fusco <[email protected]>

changeset-bot · 2023-09-20T15:29:33Z

🦋 Changeset detected

Latest commit: b641ca8

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@faustwp/cli	Minor
@faustwp/wordpress-plugin	Minor
@faustwp/experimental-app-router	Major
@faustwp/block-support-example	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Signed-off-by: Joe Fusco <[email protected]>

blakewilson · 2023-10-13T16:47:38Z

Running the blockset command succeeded, but also I was asked this:

Will this be an issue for CI/CD environments?

TeresaGobble · 2023-10-13T19:17:53Z

Nice work on this @josephfusco and @theodesp! Could we style Block B a little (like we have for block A) for the editor? When added and in save mode, it's not detectable:

Screen.Recording.2023-10-13.at.2.16.56.PM.mov

TeresaGobble · 2023-10-13T19:20:52Z

Running the blockset command succeeded, but also I was asked this:

Will this be an issue for CI/CD environments?

Can confirm I saw this webpack-cli dependency prompt as well.

theodesp · 2023-10-16T09:47:45Z

Running the blockset command succeeded, but also I was asked this:
Will this be an issue for CI/CD environments?

Can confirm I saw this webpack-cli dependency prompt as well.

we don't bundle @wordpress-scripts as a dependency because we ask the user to install it on their project. We could force to install the webpack as dev dependency for faust-cli package which will probably fix that.

theodesp · 2023-10-16T10:15:02Z

Nice work on this @josephfusco and @theodesp! Could we style Block B a little (like we have for block A) for the editor? When added and in save mode, it's not detectable:

Screen.Recording.2023-10-13.at.2.16.56.PM.mov

@TeresaGobble the block is there I think the styles make it disappear. I will update the text color.

github-actions · 2023-10-16T10:25:07Z

📦 Next.js Bundle Analysis for @faustwp/getting-started-example

This analysis was generated by the Next.js Bundle Analysis action. 🤖

⚠️ Global Bundle Size Increased

Page	Size (compressed)
`global`	`245.33 KB` (🟡 +35.49 KB)

Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

New Page Added

The following page was added to the bundle from the code in this PR:

Page	Size (compressed)	First Load	% of Budget (`350 KB`)
`/example`	`843 B`	246.15 KB	70.33%

blakewilson · 2023-10-16T20:42:22Z

@josephfusco @theodesp When adding blocks to the home page, they are not displayed on the headless frontend. Do we need to import the proper GraphQL fragments (i.e. ${blocks.CreateBlockBlockB.fragments.entry} and ...${blocks.CreateBlockBlockB.fragments.key}) in the example project?

blakewilson · 2023-10-16T20:43:57Z

Did a code review and everything looks good. I think we just need to expose the Block A & B to the front-page.js template so they are rendered when added to the home page in WordPress.

cc @josephfusco @theodesp

theodesp · 2023-10-17T10:25:51Z

Did a code review and everything looks good. I think we just need to expose the Block A & B to the front-page.js template so they are rendered when added to the home page in WordPress.

cc @josephfusco @theodesp

Will add the fragments.

theodesp · 2023-10-17T11:18:18Z

Styles fixed:

Headless

Editor

theodesp · 2023-10-17T13:00:14Z

.github/workflows/nextjs-bundle-analysis.yml

@@ -23,7 +23,6 @@ jobs:
      matrix:
        next-dir: [
          'examples/next/faustwp-getting-started',
-          'examples/next/block-support'


Adding this one is problematic.

theodesp · 2023-10-17T13:01:05Z

examples/next/block-support/styles/blocks.scss

@@ -11,3 +11,5 @@
 @import '@wordpress/base-styles/breakpoints';
 @import '@wordpress/block-library/src/style';
 @import '@wordpress/block-library/src/theme';
+
+@import '../wp-blocks/block-b/style.scss'


include block style here is next.js hates importing global styles within the components.

Stale

blakewilson

LGTM! Nice work @theodesp @josephfusco

josephfusco added 20 commits August 18, 2023 16:08

Add new block-support example project

464b4c3

Signed-off-by: Joe Fusco <[email protected]>

Auto analyze new project

1be9609

Signed-off-by: Joe Fusco <[email protected]>

Update dependencies

377942f

Signed-off-by: Joe Fusco <[email protected]>

Remove hardcoded theme.json

dfea166

Signed-off-by: Joe Fusco <[email protected]>

Ignore globalStylesheet.css

d1e2db5

Signed-off-by: Joe Fusco <[email protected]>

Reduce example to just block things

e7c9075

Signed-off-by: Joe Fusco <[email protected]>

Add newline to EOF

929f37a

Signed-off-by: Joe Fusco <[email protected]>

Reduce example

1bc1645

Signed-off-by: Joe Fusco <[email protected]>

Merge branch 'canary' into nojira-block-support-example

b8627b6

Signed-off-by: Joe Fusco <[email protected]> # Conflicts: # package-lock.json

Update lockfile after merge

29d10da

Signed-off-by: Joe Fusco <[email protected]>

Constrain layout using existing core class

4257d0e

Signed-off-by: Joe Fusco <[email protected]>

Not being used

da3c5bf

Signed-off-by: Joe Fusco <[email protected]>

Irrelevant comment

b9a235c

Signed-off-by: Joe Fusco <[email protected]>

Merge branch 'canary' into nojira-block-support-example

34334ba

Merge branch 'canary' into nojira-block-support-example

5f4c85a

Scaffold out new plugin files

fed767d

Signed-off-by: Joe Fusco <[email protected]>

Add new dependencies

e1dcc3a

Signed-off-by: Joe Fusco <[email protected]>

Add blockset command

85b5b6e

Signed-off-by: Joe Fusco <[email protected]>

Add new command to block support example

cef820f

Signed-off-by: Joe Fusco <[email protected]>

Register new REST endpoint to handle unzipping blocks

574078d

Signed-off-by: Joe Fusco <[email protected]>

josephfusco added 9 commits September 21, 2023 11:52

Fix example project deps

92e62a9

Signed-off-by: Joe Fusco <[email protected]>

Fix namespace issue

a9da48f

Signed-off-by: Joe Fusco <[email protected]>

Refactor into testable functions

b9ba524

Signed-off-by: Joe Fusco <[email protected]>

Mock custom block

6cb61e1

Signed-off-by: Joe Fusco <[email protected]>

Ignore .faust

d00d39c

Signed-off-by: Joe Fusco <[email protected]>

Fix namespacing issues in WP plugin

1389e03

Signed-off-by: Joe Fusco <[email protected]>

Clean up comments

9f8e189

Signed-off-by: Joe Fusco <[email protected]>

Improve readability

df858e7

Signed-off-by: Joe Fusco <[email protected]>

Add deps

c29d432

Signed-off-by: Joe Fusco <[email protected]>

Chore: Code review fixes.

7152ae2

theodesp added 4 commits October 17, 2023 10:45

Merge remote-tracking branch 'origin' into nojira-add-blockset-command

666d9bf

Chore: add Component.fragments

d5367c0

Merge remote-tracking branch 'origin' into nojira-add-blockset-command

c79ff97

Chore: Update package-lock.json

a7f9c8e

theodesp added 4 commits October 17, 2023 11:28

Chore: Add gql missing import.

1125b6e

Tests: Update fromThemeJson.test snapshot.

7db0b8d

Style: Add block styles in front-end

7913f9b

Styles: Consistent styles fixed.

0f86e06

theodesp added 4 commits October 17, 2023 13:11

CI/CD: Fix test cases.

a3c0ffc

Test: Update CoreCode test snapshot.

b214c75

CI/CD: Update types in Toolbar.test.tsx

1fd4356

CI/CD: Remove examples/next/block-support from bundle analysis.

3db3d41

theodesp reviewed Oct 17, 2023

View reviewed changes

blakewilson approved these changes Oct 17, 2023

View reviewed changes

Merge remote-tracking branch 'origin' into nojira-add-blockset-command

b641ca8

theodesp merged commit c29f83d into canary Oct 18, 2023
13 checks passed

theodesp deleted the nojira-add-blockset-command branch October 18, 2023 10:20

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add `faust blockset` command #1585

Add `faust blockset` command #1585

josephfusco commented Sep 20, 2023 •

edited by TeresaGobble

Loading

changeset-bot bot commented Sep 20, 2023 •

edited

Loading

blakewilson commented Oct 13, 2023

TeresaGobble commented Oct 13, 2023

TeresaGobble commented Oct 13, 2023

theodesp commented Oct 16, 2023

theodesp commented Oct 16, 2023

github-actions bot commented Oct 16, 2023 •

edited

Loading

blakewilson commented Oct 16, 2023

blakewilson commented Oct 16, 2023

theodesp commented Oct 17, 2023

theodesp commented Oct 17, 2023

theodesp Oct 17, 2023

theodesp Oct 17, 2023

blakewilson left a comment

Add faust blockset command #1585

Add faust blockset command #1585

Conversation

josephfusco commented Sep 20, 2023 • edited by TeresaGobble Loading

Tasks

Description

Related Issue(s):

Testing

Demo

changeset-bot bot commented Sep 20, 2023 • edited Loading

🦋 Changeset detected

blakewilson commented Oct 13, 2023

TeresaGobble commented Oct 13, 2023

TeresaGobble commented Oct 13, 2023

theodesp commented Oct 16, 2023

theodesp commented Oct 16, 2023

github-actions bot commented Oct 16, 2023 • edited Loading

📦 Next.js Bundle Analysis for @faustwp/getting-started-example

⚠️ Global Bundle Size Increased

New Page Added

blakewilson commented Oct 16, 2023

blakewilson commented Oct 16, 2023

theodesp commented Oct 17, 2023

theodesp commented Oct 17, 2023

theodesp Oct 17, 2023

Choose a reason for hiding this comment

theodesp Oct 17, 2023

Choose a reason for hiding this comment

blakewilson left a comment

Choose a reason for hiding this comment

Add `faust blockset` command #1585

Add `faust blockset` command #1585

josephfusco commented Sep 20, 2023 •

edited by TeresaGobble

Loading

changeset-bot bot commented Sep 20, 2023 •

edited

Loading

github-actions bot commented Oct 16, 2023 •

edited

Loading