Block Library: Make it possible to import individual blocks #42258
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
[Status] In Progress
|
Size Change: +1.25 kB (0%) Total Size: 1.24 MB
ℹ️ View Unchanged
|
gziolo
force-pushed
the
update/block-library-import-split
branch
2 times, most recently
from
8107cbf
to
b201a0b
Compare
sgomes
reviewed
Jul 18, 2022
There was a problem hiding this comment.
Thank you so much for working on this, @gziolo! 🙌 Sorry for the late reply 😞
In general it looks great, but I don't think the current code reflects the code example in the PR description. Taking the archives as the example, it seems to me that the correct code should instead be:
import '@wordpress/block-library/archives/init';if the user only cares about registering, or
import archiveBlock from '@wordpress/block-library/archives/init';if the user wants a reference to the block after it's registered.
The other option is of course to change the code to reflect the example instead, but having a separate init.js file seems like the better and most reliable (tree-shaking-wise) option to me.
In that case, though, packages/block-library/src/archives/init.js would need to be added to the list of modules with side effects in package.json, as it performs registration at the top level, which is a side effect.
gziolo
force-pushed
the
update/block-library-import-split
branch
from
b201a0b
to
e9d28c3
Compare
gziolo
requested review from
ZebulanStanphill,
michalczaplinski,
tellthemachines,
geriux and
ajitbohra
as code owners
|
@sgomes, I completed the refactoring based on your feedback. I also updated the description of the PR with the following examples: import { init } from '@wordpress/block-library/verse';
init();or import '@wordpress/block-library/verse/init';or import verseBlock from '@wordpress/block-library/verse/init';I added a new section to the README file for the I'm happy about the idea I had where I created an exported "sideEffects": [
"build-style/**",
"src/**/*.scss",
"{src,build,build-module}/*/init.js"
],The other thing I played with is "exports": {
".": {
"import": "./build-module/index.js",
"require": "./build/index.js"
},
"./babel-plugin": "./babel-plugin.js",
"./*": "./build-module/*/index.js",
"./*/init": "./build-module/*/init.js",
"./utils/*": null
},I'm using it for the first time, so I'm not entirely sure if that is correct usage. It probably will be a breaking change for projects that use undocumented code like: import * as verse from '@wordpress/block-library/build-module/verse';I kept CJS support for requiring only the Anyway, I'm looking for more feedback now that all the required changes are applied. |
|
This is a bit surprising. I will investigate what went wrong.
|
|
It looks like bringing back Unfortunately, having an additional
|
Interesting, thank you for looking into that! Note that this may be an artifact of how the GH action is building things, specifically the webpack config it uses. There are a lot of moving parts with webpack and package.json, unfortunately 😞 |
That may still go away, depending on what the final |
|
As for the exports configuration, that one's pretty complex, with several things I hadn't seen before. It looks good, but I'm not quite sure how to test it for correctness 😕 |
gziolo
force-pushed
the
update/block-library-import-split
branch
from
6a790d2
to
001a83e
Compare
|
I brought this branch up to date. I was playing a bit more with the |
|
@sgomes, do you think it would still be valuable to include the changes and document the more verbose syntax that will work with the existing import verseBlock from '@wordpress/block-library/build-module/verse/init'; |
I think so, because it seems to me that having a (documented) mechanism to get proper tree-shaking, even if verbose, is better than not having that mechanism at all. Projects could start making use of it now, and then hopefully move to a terser import once everything has been converted to ESM. Thanks again for working on this, @gziolo! 🙏 |
gziolo
force-pushed
the
update/block-library-import-split
branch
from
001a83e
to
4c4d2c8
Compare
gziolo
added
[Type] New API
I went ahead and updated the branch to use the paths including I think this is ready for the final review. |
sgomes
approved these changes
Aug 29, 2022
Comment on lines
+37
to
+58
| ## Registering individual blocks | ||
|
|
||
| 1. When you only care about registering the block when file gets imported: | ||
|
|
||
| ```js | ||
| import '@wordpress/block-library/build-module/verse/init'; | ||
| ``` | ||
|
|
||
| 2. When you want to use the reference to the block after it gets automatically registered: | ||
|
|
||
| ```js | ||
| import verseBlock from '@wordpress/block-library/build-module/verse/init'; | ||
| ``` | ||
|
|
||
| 3. When you need a full control over when the block gets registered: | ||
|
|
||
| ```js | ||
| import { init } from '@wordpress/block-library/build-module/verse'; | ||
|
|
||
| const verseBlock = init(); | ||
| ``` | ||
|
|
There was a problem hiding this comment.
Perfect! Very clear and easy to follow 👍
gziolo
commented
Aug 29, 2022
bph
added
the
Needs Dev Note
3 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.
What?
Exploration to make it possible to import individual core blocks from
@wordpress/block-library.Why?
At the moment, you can either import all core blocks with:
If you would like to import individual blocks, you can still do it, but it isn't straightforward:
How?
We could organize the
@wordpress/block-librarypackage to make the following possible:or
or
Implementation notes
My goal was to have a more ergonomic imports without
/build-module/section like:However, it isn't that simple to achieve with partial ES Modules support with
exportsfield in thepackage.jsonfile. We can change that in the future when we convert all WordPress packages to ES Modules.Some blocks run some custom logic before registering the block so the newly introduced
initmethod is a perfect way to postpone their executing until their are essential for the corresponding block to work correctly. This also removes the need to keep the list of block files with side-effects in `package.json.