Meks
Do you know you can try any of our premium WordPress themes for free?Show me the themes
Beginner’s tips on Gutenberg Development – what you need to know

Beginner’s tips on Gutenberg Development – what you need to know

4Shares

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

gutenberg development tip 1

2. Gutenberg Development ~ Beginner’s Tip of the Day : wp.element is the WordPress abstraction layer on top of React and ReactDOM https://buff.ly/2A6Yo2f

gutenberg development tip 2

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 

gutenberg development tip 3

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 

gutenberg development tip 4

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 

gutenberg development tip 5

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 

gutenberg development tip 6

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 

gutenberg develolpment tip 7

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 

gutenberg development tip 8

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 

gutenberg development tip 9

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

gutenberg development tip 10

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 

gutenberg development tip 11

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 

gutenberg development tip 12

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 

gutenberg development tip 13

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 

gutenberg development tip 14

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 

gutenberg development tip 15

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 

gutenberg development tip 17

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

gutenberg development tip 18

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 

gutenberg development tip 21

22. Gutenberg Development ~ Beginner’s Tip of the Day #22 : The <Tooltip> component in Gutenberg is an easy way to add accessibility and slickness to your custom block controls. Learn how to use it in your blocks – https://buff.ly/2CALuYu 

gutenberg development tip 22

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 

gutenberg development tip 23

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 

gutenberg development tip 25

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 

gutenberg development tip 26

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 

gutenberg development tip 27

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

gutenberg development tip 28

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 

gutenberg development tip 29

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 

gutenberg development tip 30

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.

4Shares

Tags: ,

Ivana Cirkovic

Ivana is a Digital Marketing, PR and Social Media consultant with over nine years experience in the field. She is also a WordPress enthusiast and an active member of WordPress community who lives online almost 24/7. In love with Twitter, WP, photography and NYC.

2 comments

Leave a Reply

Your email address will not be published. Required fields are marked *

You don't need to have loads of money to get a world-class WordPress website! All our themes are rated with the highest 5-star rating. Have a look and choose the best one for you.
Meks WordPress Themes
Meks