Create Block: Allow custom folder name for a block #37612
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
gziolo
added
[Package] Create Block
gziolo
commented
Dec 23, 2021
|
Size Change: 0 B Total Size: 1.13 MB ℹ️ View Unchanged
|
gziolo
force-pushed
the
update/create-block-custom-block-path
branch
7 times, most recently
from
c9fd4b2
to
100338c
Compare
gziolo
added
[Package] Scripts
gziolo
force-pushed
the
update/create-block-custom-block-path
branch
from
100338c
to
4454f24
Compare
gziolo
requested review from
ajitbohra,
mkaz,
nerrad and
ntwb
as code owners
gziolo
added
the
Developer Experience
4 tasks
gziolo
force-pushed
the
update/create-block-custom-block-path
branch
from
4454f24
to
c73dba2
Compare
|
I rebased this branch with the latest changes applied in |
8 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Partially addresses #25188.
You can watch two screencasts that contain an extended explanation or read the shorter version that is included afterwards:
create-block-enhancements-1.mov
create-block-enhancements-2.mov
It's an initial version that allows moving
block.jsonto any location inside the project rather than having it always in the top-level folder. It will make it possible to handle multipleblock.jsonfiles if users want to scaffold multiple blocks in one plugin.Changes included:
blockTemplatesPathfield in the external template configuration.folderNamefor setting the location for theblock.jsonfile and other optional block files generated from block templates included in the folder set with theblockTemplatesPathsetting.block.jsonfiles located in thesrcfolder and its subfolders to the output folder (buildby default) when usingstartandbuildfrom@wordpress/scripts.All the above combined allows to put
block.jsonin a custom location. When the block metadata is discovered in thesrcfolder (or subfolders) it gets copied to the build folder, which allows using simplified paths for block assets:In addition to that, we can now explicitly set templates related only to the block with
blockTemplatesPath. The last missing piece that I believe should be tackled separately is to enhance the CLI to support prompts for multiple blocks that would use block templates with customized settings for every block based on the user input.How has this been tested?
Scaffolding
I generated three blocks using templates included in Gutenberg
ES5
ESNext + JSX (the default)
Gutenpride (handbook tutorial)
WordPress environment
I used
wp-envcommand integrated with the Gutenberg project.I created an override to the existing config:
File:
.wp-env.override.json{ "plugins": [ ".", "./es5-example", "./esnext-example", "./gutenpride" ] }I executed:
Testing plugins
I opened the following URL to test all the installed plugins: http://localhost:8888/wp-admin.
I created a new post and inserter all 3 blocks:
I saved the post and confirmed it renders correctly on the frontend.
Screenshots
Editor:
Frontend:
Types of changes
New features and enhancements (non-breaking change which adds functionality) -->
Checklist:
*.native.jsfiles for terms that need renaming or removal).