Content Requests

[Zac Gordon]

Welcome to the Gutenberg Development Course Content Request Thread

Gutenberg is continuing to evolve and I will very likely update this course. If there is content you would like to see in an update, please let me know via this thread 🙂

[g01010]

Thanks for this course. I’ve found it really useful and thorough on the whole.

The one question I’m left with at the end, though, is how to take what I’ve learned and apply it practically. For instance, though I feel quite happy about editing the demo files to modify the blocks, it’s more challenging to take the next step and create a new plugin from scratch for a Gutenberg block.

It was no problem to install Node and run this in the terminal while working through the course materials. However, if I wanted to create a new plugin, I’m not sure it’s clear where to start, e.g.:

– How to set up the config files like webpack.config.js and package.json
– What happens when I want to distribute a plugin? I didn’t see anywhere in the course that covered how to stop Node or how to remove the node_modules folder from the final version of the plugin

I appreciate that there’s some background to libraries and architecture but I still feel at a loss as to how to actually implement what I’ve learned. I think the content is generally pitched at more-or-less beginner level, but appears to assume prior knowledge of React and Node, which feels more advanced. The discussion in 03.03 was (rightly I think) trying to push users towards using modern JS, yet there’s little guidance as to how to implement this in a practical way.

What I think would be a really useful accompaniment to this course is a barebones plugin file that learners could use to implement their own blocks. This would need some pointers to explain how the config files are set up and how to publish a production-ready version of the plugin that could be distributed.

If I’ve missed any of this in the content, my apologies.

[kmgalanakis]

As far as content requests are concerned, I would really like to see a few examples of native blocks extension using the hooks provided by Gutenberg.

Thanks

[Sören]

The description option in registerBlockType was added recently: https://wordpress.org/gutenberg/handbook/block-api/#description-optional

[Zac Gordon]

Hey folks! GREAT feedback here so far! EXACTLY what I was hoping for!

All of this is noted, please keep the requests coming!!!

[billerickson]

1. Is there a way to remove Inspector Controls for existing (core) blocks? Specifically, is there a way to remove the “Font Size” RangeControl on the Paragraph block?

2. Can we modify how certain attributes on an existing core block are used? I like the Background Color and Text Color using colors defined in the theme, but this still results in hardcoded, inline styles ( <p style="color: #f00;">). I’d prefer this add additional classes to the paragraph, like .color-red, which could then be styled in the theme.

3. Is there any way to convert a shortcode to a block? Let’s say you have a form plugin that converts [form id=”1″] into the form markup. The plugin now supports Gutenberg and has a Form block. Can that plugin update the existing content that uses the shortcode to use the block, or will the user need to manually delete the shortcode and add the Form block?

4. When building a client’s website as a custom theme and implementing custom blocks in a plugin, what’s the best way to divide up the styles between the two? For instance, let’s say my theme has 5 brand colors defined and I’m making a CTA block that can use any of those colors as the background. Do I put all the styling (including actual color used) in the plugin? Do I put a generic, one-color styling of the CTA in the plugin and then the 5 brand colors override it in the theme? It seems like in many instances the look and feel of a custom block is inextricably tied to the functionality (ex: background color dropdown).

5. When building a public plugin using the “Gutenberg Course” plugin as a guide, what should be excluded from the development repo using .gitignore, and what is the process of creating the production version for WordPress.org? I noticed that my local copy of Gutenberg installed through WP.org is missing a lot of the development files found on the GitHub version of Gutenberg.

[SleepingGiant]

I’m going to second the request for guidance on how to start a new plugin with custom blocks from scratch and add that it would be useful to see it done on screen, rather than only seeing the finished product. Some of us are Kinesthetic learners and understand things best when going through the motions from the beginning, and I’m not sure where or how to start!

[Adam]

I’m going to third the guidance on how to start a new plugin. I’m not strong with NPM and WebPack, and could use a more detailed explanation of what the packages are doing and why they’re being included.

[Zac Gordon]

Great feedback ya’ll! Please keep it coming. Will make sure to address this stuff in coming updates.

I am going to work on releasing some of my Master Course content to help people better understand things like webpack and NPM 🙂 This will be its own stand alone little mini course and not be part of this Gutenberg Development as Gutenberg Development assumes you already know modern JavaScript. But I’ll see if I can do a little mini course on getting up and running with modern JS!

Please keep the feedback coming!

[JacobM]

Show an example of how to create a block that stores data in post meta by using the custom rest api endpoints for the data you want to save. That can be used in conjunction with dynamic blocks to display the updated meta data to the page.

[Morgan Kay]

There are a bunch of other field types available in Inspector Controls, such as checkboxes and radio buttons, but they aren’t used anywhere in Gutenberg core and I haven’t been able to find any other examples where they are being used. Lessons that cover all of the possible field types would be helpful!

[ericvalois]

Hi, explaining each control separately was helpful. However, it would be nice to show at the end, a more practical block with multiple fields and advanced functionalities. Such as a block with a repeater field (image, title, description).

Is it even possible? If not, perhaps, explain what the Gutenberg limits are…what we can build and what we can’t.

Thanks

[slushman]

I’ll second Morgan’s request above. Show an example block that throws in all the Inspector Controls just to show how to use them. It took me a while to figure out the SelectControl, but I did get it figured out.

I’m also anxious to see how to work with the JS hooks and filters.

[Zac Gordon]

Hi Folks!

Just wanted to say thanks for all of you who have shared here 🙂

I have been following updates in Core closely and have a list of updates my own updates. I had thought I would be starting on an update around now but there are still some things settling and I got advice from Core devs not to start quite yet. Probably early – mid March.

Please continue to share up here anything you notice you want to see in the next update!!!

[yikesinc]

Hi! I’m Ebonie from Yikes Inc. Thanks for the great course as I am learning a lot so far. I’d like to suggest some a11y enchancements such as closed captionin or video scripts (located right below each lesson video).

Thank you!

[Zac Gordon]

Hi Ebonie! Thank you for this suggestion!!! I have plans to do both of these hopefully once the course has become finalized. With having to do multiple revisions of the course and the cost of transcripts I unfortunately haven’t been able to do yet, but totally plan and hope to! Thank you for the spot on suggestion!!!

[Lukasz Jaroszewski]

Hi Zac,

I just purchased this course plus the abridged udemy version, it’s a requirement for our HR department to see something tangible like a certificate of completion.

I see many people made some suggestions above, have those suggestions been implemented and when would be a good time to start this course? I’m wondering if the course is up-to-date?

Thanks!

[Zac Gordon]

Hi, yes, we keep the course up to date, so start anytime! We continue to add to the course and have a new version in the works we hope to release soon. Most of the requests have been added that made sense. We also released an Advanced Gutenberg Development Course that addressed several things as well I would highly recommend.

[George Gerpheide]

Re: Advanced Gutenberg Bock course (gallery example). Zak, this is very cool stuff and I am excitedly using this learning for some custom React-on-Frontend blocks of my own.

One thing I noticed is, whenever the advanced-gutenberg-course plugin is activated, then the plug-in frontend code (including React and a bunch of node modules) is loaded on every page whether or not the page or any page uses those blocks. For the sake of avoiding PLOB (Page-LOad-Bloat), isn’t there some way to avoid this? That would be a great addition to your already great stuff 🙂

See Chrome debug console screenshot

Cheers,
/george

[Author]

Posts