![]() The recipe card example covers a lot of what you’ll want in a minimally interactive custom block. However, rather than using a third-party tool, I used one of the example custom blocks available in the gutenberg-examples repo on Github. Setting it up is fairly straightforward, and it’s similar to Create React App. It gives you a lot of the boilerplate stuff you need out of the box, like Webpack, ESNext support etc. You can also use the ‘create-guten-block’ tool by Ahmad Awais. WORDPRESS.COM OFFLINE EDITOR CODEModern JavaScript allows us to write more concise code and use JSX in our custom block code. The only drawback that I noticed is that the JavaScript uses the old ES5 syntax rather than modern ESNext. This command will set up a WordPress theme or plugin with a ‘blocks’ folder that contains the PHP and base CSS and JavaScript required to create a custom block. It’s fairly straightforward these days to get set up with the WP CLI ‘scaffold’ command. If you’re not familiar with things like JSX you could use the ES5 syntax, but you’d be best suited to use the modern syntax in the long run. One thing I would recommend before diving head first into creating a Gutenberg block, for now at least, is to get a solid understanding of React and modern JavaScript. ![]() Unfortunately I didn’t find it all that easy to parse, so we’ll go over some of the steps I went through to get set up. The documentation for the block editor is still kind of all over the place but there is some decent information in the “Block Editor Handbook”. We’re going to go over what it takes to go from nothing to a relatively basic, custom Gutenberg block. React is on my mind, and given that the WordPress editor is also written in React, I thought it would be a good idea to see what it would take to create a custom block. I’ve been working with React full-time for the past year, rebuilding WP Migrate DB Pro’s frontend. These days, custom blocks are where it’s at. The base set of default blocks is pretty robust, but what if you wanted to create your own custom block for laying out content? In the past you would use something like Advanced Custom Fields (ACF) or shortcodes. ![]() It marks WordPress’ move into the page builder space. The WordPress block editor (previously titled Gutenberg) includes a new way to add content to your WordPress posts, pages and soon all content on your WordPress site. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |