JavaScript for WordPress › Forums › Gutenberg Development › Content Requests
- This topic has 18 replies, 14 voices, and was last updated 4 years, 2 months ago by
George Gerpheide.
-
AuthorPosts
-
January 3, 2018 at 9:50 pm #35706
Zac Gordon
KeymasterWelcome 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 π
January 9, 2018 at 12:18 pm #37300g01010
ParticipantThanks 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 pluginI 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.
January 9, 2018 at 12:43 pm #37312kmgalanakis
ParticipantAs 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
January 10, 2018 at 10:28 am #37485SΓΆren
ParticipantThe description option in
registerBlockType
was added recently: https://wordpress.org/gutenberg/handbook/block-api/#description-optionalJanuary 12, 2018 at 1:24 am #37778Zac Gordon
KeymasterHey folks! GREAT feedback here so far! EXACTLY what I was hoping for!
All of this is noted, please keep the requests coming!!!
January 18, 2018 at 4:04 am #38419billerickson
Participant1. 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.
January 18, 2018 at 7:06 pm #38515SleepingGiant
ParticipantI’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!
January 21, 2018 at 4:27 pm #38969Adam
ParticipantI’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.
January 21, 2018 at 4:34 pm #38977Zac Gordon
KeymasterGreat 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!
January 26, 2018 at 5:28 pm #39560JacobM
ParticipantShow 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.
January 31, 2018 at 11:58 pm #40251Morgan Kay
ParticipantThere 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!
February 4, 2018 at 5:58 pm #40402ericvalois
ParticipantHi, 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
February 7, 2018 at 5:04 pm #40580slushman
ParticipantI’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.
February 13, 2018 at 4:42 pm #41155Zac Gordon
KeymasterHi 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!!!
April 13, 2018 at 6:24 pm #45071yikesinc
ParticipantHi! 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!
April 13, 2018 at 9:12 pm #45087Zac Gordon
KeymasterHi 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!!!
January 29, 2020 at 10:11 am #134057Lukasz Jaroszewski
ParticipantHi 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!
January 29, 2020 at 10:20 am #134060Zac Gordon
KeymasterHi, 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.
December 10, 2020 at 3:54 pm #148773George Gerpheide
ParticipantRe: 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 -
AuthorPosts
- You must be logged in to reply to this topic.