Earlier last year, we wrote about Gutenberg Editor and what it means for the overall WordPress environment. Whether you’ve tried it or not, the fact is we need to inform ourselves about it. Both from developers and content side, this improvement will change the way we code and produce content in WordPress. Not to mention all the advantages that are coming with the blocks and the ways we create content.
From the content marketing side of view, Gutenberg Editor sure is quite an refreshment. From the developer’s one… From what I’ve heard, there’s still time for improvements, yes? 🙂
Now, just in time and ahead of releasing the Gutenberg Editor in full, we’re sharing 31 tips on Gutenberg Development. Zac Gordon is the author of these tips that we are sharing now with you.
It all started right after the latest WCUS (not to forget the State o the Word 2017). Zac heard a debate on the new feature and came to the idea to work on Gutenberg Editor Development course. At the same time, he started to share free tips, so here they are.
Hope you’ll find them useful as we did! And, for more tips and info about this trending topic, be sure to visit Zac’s website.
31 beginner’s tips on Gutenberg Development
1. Gutenberg Development ~ Beginner’s Tip of the Day : Use ‘enqueue_block_editor_assets’ to hook your custom block’s JavaScript into Gutenberg
2. Gutenberg Development ~ Beginner’s Tip of the Day : wp.element is the WordPress abstraction layer on top of React and ReactDOM
3. Gutenberg Development ~ Beginner’s Tip of the Day #3 : wp.i18n is the client side library for localization in WordPress, make it a dependency in your block JS files as ‘wp-i18n’ – https://buff.ly/2zQBQ1v
4. Gutenberg Development ~ Beginner’s Tip of the Day #4 : You can use default WordPress Dashicons as Block Icons. You can also use custom SVG Icons 🙂 Here is a tutorial how => https://buff.ly/2BSlA1s
5. Gutenberg Development ~ Beginner’s Tip of the Day #5 : /blocks/library is where all of the default Gutenberg Blocks live. Check out how they are built – https://buff.ly/2BSAVPz
6. Gutenberg Development ~ Beginner’s Tip of the Day #6 : Use the ‘keyword’ setting to have your Block show up for keywords not found in the name of the block. Here is a tutorial showing how => https://buff.ly/2BdM4gP
7. Gutenberg Development ~ Beginner’s Tip of the Day #7 : Read this article from Core Gutenberg Developer @riadbenguella – “One thousand and one way to extend Gutenberg today” – https://buff.ly/2BiVEPE
8. Gutenberg Development ~ Beginner’s Tip of the Day #8 : In case you haven’t explored it yet, the Gutenberg Developer Handbook is pretty helpful – https://buff.ly/2BBK1Dz
9. Gutenberg Development ~ Beginner’s Tip of the Day #9 : Did you know there is a “Gutenberg Theme” in development you can check out? twenty eighteen? https://buff.ly/2nSbfQq
10. Gutenberg Development ~ Beginner’s Tip of the Day #10 : Did you know there is a @wpcli command for scaffolding blocks? https://buff.ly/2Cy19Xm
11. Gutenberg Development ~ Beginner’s Tip of the Day #11 : To use JSX in your blocks, simply add the ‘transform-react-jsx’ plugin like done in the Gutenberg Core .babelrc file – https://buff.ly/2CY76Og
12. Gutenberg Development ~ Beginner’s Tip of the Day #12 : There is an interesting discussion on how plugins should handle fallback to the Classic Editor. If you’re a plugin dev, you should check it out – https://buff.ly/2D4xUwh
13. Gutenberg Development ~ Beginner’s Tip of the Day #13 : There are 5 categories of blocks you can choose from when creating a custom blocks: common, formatting, layout, widgets & embed https://buff.ly/2p9AY7t
14. Gutenberg Development ~ Beginner’s Tip of the Day #14 : Ever use the Gutenberg Demo when you install the plugin? Check out the simple JS file that loads the block content. See GB comment attributes in work. https://buff.ly/2BQ88eZ
15. Gutenberg Development ~ Beginner’s Tip of the Day #15 : How to Add JavaScript and CSS to Gutenberg Blocks the Right Way in Plugins and Themes https://buff.ly/2DMDlQS
16. Gutenberg Development ~ Beginner’s Tip of the Day #16 : If you find yourself starting to or wanting to rebuild Core blocks… It’s possibly time to switch to a template or reusable blocks approach.
17. Gutenberg Development ~ Beginner’s Tip of the Day #17 : registerBlockType() is at the heart of building custom blocks. Here’s how it works https://buff.ly/2lkIAic
18. Gutenberg Development ~ Beginner’s Tip of the Day #18 : In general, custom blocks belong in plugins, not themes. Themes can style and integrate to an extent with blocks though! IMHO
19. Gutenberg Development ~ Beginner’s Tip of the Day #19 : Use this helpful online tool to convert any SVG into valid JSX that can be copied and pasted as the icon for your custom block https://buff.ly/2pVPD6F
20. Gutenberg Development ~ Beginner’s Tip of the Day #20 : Yes. You do actually need to know some React to work with Gutenberg. Or at least you will learn some React in learning Gutenberg 😉
21. Gutenberg Development ~ Beginner’s Tip of the Day #21 : Want to customize the color palette for blocks and make them match the color scheme for your theme? It’s just a few lines of PHP 🙂 Here’s how – https://buff.ly/2Cq6Pnj
22. Gutenberg Development ~ Beginner’s Tip of the Day #22 : The
23. Gutenberg Development ~ Beginner’s Tip of the Day #23 : Block Templates let you assign default blocks to posts, pages or custom post types. You can even lock them down. Here’s how they work https://buff.ly/2F3G8Ga
24. Gutenberg Development ~ Beginner’s Tip of the Day #24 : As it will roll out at first, Gutenberg is not a replacement for rich front-end site or page builder plugins. It is a greatly enhanced editing experience, but not a replacement.. yet.
25. Gutenberg Development ~ Beginner’s Tip of the Day #25 : You will likely use wp.i18n.__() all over the place in your block code to make your block UI text available for translation. It’s simple, here’s how! https://buff.ly/2CJ6Vpr
26. Gutenberg Development ~ Beginner’s Tip of the Day #26 : Using JSX to create your block UIs can save you time and provide cleaner, more readable code. Read this Official Guide to Get Up and Running https://buff.ly/2CNSssr
27. Gutenberg Development ~ Beginner’s Tip of the Day #27 : Gutenberg has a few add_theme_support() options for Theme Developers. Check out the reference for these in the Gutenberg Handbook here – https://buff.ly/2miv1Ay
28. Gutenberg Development ~ Beginner’s Tip of the Day #28 : For API requests w/out React inside Gutenberg, try wp.apiRequest() – https://buff.ly/2Dq0fhc OR, if you’re using React, try withAPIData() in your component – https://buff.ly/2DqSAPQ
29. Gutenberg Development ~ Beginner’s Tip of the Day #29 : The optional “description” setting for registerBlockType will let you set a translatable description for your block. https://buff.ly/2DGAjhp
30. Gutenberg Development ~ Beginner’s Tip of the Day #30 : Whoot whoot! Documentation for Block Templates is up on the GB Handbook! Theme devs ~ you’re gonna love these 🙂 https://buff.ly/2mDDtdN
31. Gutenberg Development ~ Beginner’s Tip of the Day #31 : If you want to interact with meta boxes, plugin options or other database data, a good convention is custom API end points and JS api calls from your blocks.
Have you tried Gutenberg Editor yet and what are your thoughts on it? Share with us in the comments below.
