Add a new create-block template for the block development quick start guide
#55876
Conversation
|
Size Change: +1.27 kB (0%) Total Size: 1.7 MB
ℹ️ View Unchanged
|
packages/create-block-quick-start-template/block-templates/README.md.mustache
Outdated
Show resolved
Hide resolved
packages/create-block-quick-start-template/block-templates/edit.js.mustache
Outdated
Show resolved
Hide resolved
packages/create-block-quick-start-template/block-templates/save.js.mustache
Outdated
Show resolved
Hide resolved
|
I wanted to raise my concern in regard to the growing number of Create Block templates maintained in the Gutenberg repository. At the moment, there are already 4 templates included:
This will be the fifth template (including 3 npm packages containing only templates). They all duplicate the |
packages/create-block-quick-start-template/block-templates/save.js.mustache
Outdated
Show resolved
Hide resolved
packages/create-block-quick-start-template/block-templates/render.php.mustache
Outdated
Show resolved
Hide resolved
|
I really like the idea of using the block that uses |
Yeah, I have the same concern, but I don't know how else to provide an easy quick start template. I do want to note that we likely can remove the Create Block tutorial template once those docs are rewritten. The tutorial will be based on this example block. |
…der.php.mustache Co-authored-by: Greg Ziółkowski <grzegorz@gziolo.pl>
|
Flaky tests detected in 2b11d42. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/6814202038
|
@gziolo @ryanwelcher @juanmaguitar I have come up with a solution to the validation issue mentioned above. The solution involved adding a new attribute, I have mocked up these changes in the original plugin repo here. I have also added an optimization to the When you have a sec, let me know what you think of this approach, and if it looks okay, I will get this template updated accordingly. It does add a level of complexity to the block, but since this block will be used in the "Create a block tutorial" it will allow us to cover a few more advanced topics towards the end of the tutorial, which would be useful for new block developers. Thanks! |
|
@ndiego just took a quick look at the changes and am wondering if it makes sense to add a check to see if the // When the block loads, set the fallbackCurrentYear attribute to the current year.
useEffect(
() => {
if ( currentYear.toString !== fallbackCurrentYear ) {
setAttributes( { fallbackCurrentYear: currentYear.toString() } );
}
}
[ currentYear, setAttributes ]
); |
Good call! I'll update that. |
|
I have updated the template to address the block validation issues caused by the save function. The solution involved adding a new attribute, While this change makes the block a bit more complicated, it also makes it more interesting. The methods used in this Quick Start Guide template will be covered in depth in the upcoming "Create a block tutorial" that will be based on this demo "Copyright Date" block. |
ndiego
requested review from
ajitbohra,
juanmaguitar and
fabiankaegy
as code owners
That’s an excellent way to put it. I hope you are right, and it will allow us to illustrate the benefits of saving the block content as inner HTML and how it can be further modified on the server during rendering. This is a good opportunity to pivot from the pre-existing messaging that uses a strict split between static and dynamic blocks. The last check I recommend doing for this block is saving it in the template or post content. The next step would be manually changing the fallback current date in the database entry. Finally, the question would be what happens when the saved and modified block gets loaded in the editor and React's |
I contemplated more about it, and I would be thrilled if there were a way to avoid creating another npm package with the Create Block template in the Gutenberg repository if possible. Would it be possible to replace the current default example: https://github.com/WordPress/gutenberg/tree/trunk/packages/create-block/lib/templates/block? These two blocks don’t differ as much so there is little value in keeping the old one. The biggest differences are CSS files used instead of block supports and two variants: static and dynamic. It really feels that the new Quick Start template is better shaped to introduce folks to the world of blocks. In addition to that, it's worth considering sunsetting There is also this question wheter we want to keep around the |
Yeah, I am not sure. The current block template is extremely simple, making it a fairly good starting point to build your own custom block if you just want a basic scaffold. My demo block is definitely more opinionated. Another idea would be to directly replace the current Create Block tutorial template with this example. The npm package name would remain the same and all we would need to do is remove the Quick Start section from the current tutorial. The more I think about it, this would be the simplest approach and will not add an additional template. This block will also form the basis of the upcoming tutorial, so naming works. 🤔 Thoughts @ryanwelcher @juanmaguitar?
Thanks! I have been running lots of random tests and it's working quite well:
|
With block variants, it's possible to have two versions in a single template:
Like mentioned above, I can see how both could work with a single template. However, I also can see how the scenario you described would work. I'm mostly thinking that now that you work on a separate repository with examples of blocks scaffolded with Create Block using custom templates, it would be nice to tailor the default setup of Create Block so it integrates fully the Getting Started section of the Block Editor Handbook. The current default version of the project scaffolded by Create Block isn't explained in the Block Editor Handbook, unfortunately. |
I see this could be a possible scenario for the future but I don't see this new and "opinionated" template being part of a
I agree replacing the current template for this "tutorial" block is a good path forward here as it has some advantages:
IMHO we can take the conversation about keeping templates for |
|
Thanks for all the great discussion folks. I am going to close this PR in favor of #56056. This new PR takes a modified approach:
|
What?
This PR adds a new template for the
create-blockpackage that allows users to easily scaffold a "Copyright Date" block. This block is used in the Quick Start Guide for the Getting Started section of the Block Editor Handbook.This PR should be merged alongside the new Quick Start Guide (see #___).
Why?
A
create-blocktemplate makes it much easier for new developers to get started with block development. Rather than having to build the block from scratch, the template provides the complete block in a matter of seconds.