So go ahead and add this code to the file: export const ICONS = [ Right now, it will hold an array of icon definitions named ICONS. You will use const.js to store constants that other files can import. Tidy code is easier to maintain over the long haul.įirst, create a const.js file under resources/js. This makes it easier to find what I’m looking for and change it in the future. One of the things I like to do in development is to compartmentalize the various pieces of the feature I’m building. Registering block styles with JavaScript Adding custom icons But even before then, you’ll have it to work with and understand how to use it in your own projects. You will walk away from our session with some base code that you’ll build on in Part 3.When was the last time you registered block styles with JavaScript? Has it been a while? Have you ever done it? (Plenty of very good WordPress theme developers haven’t.).You and I are going to cross that line together. There’s a bright line where the Block Styles API reaches its limits, and the case for building custom controls becomes very clear.Other reasons for beginning with the Block Styles API include: When you need to go beyond block styles, you won’t necessarily realize that until it’s obvious-or, at least, that’s how it works for me. Often, that’s as far as you’ll go on a specific project. When creating new features for blocks, I almost always begin by building them as custom block styles. The primary reason is that it is a natural part of the development process. I can hear you from right through your screen: if we’re building a custom control, why would we register the block styles first?

Then run this command: npm run start Back to basics: creating block stylesīefore you get into the deep water of rolling your own editor controls, let’s step back into the shallows a minute-and build the icon styles with the Block Styles API.Īnd, yes. Launch your favorite command-line tool and navigate to your theme folder.

That way, you’ll know for sure your compiled code will end up in the /public folder. Remember that you’ll need to enable watch mode when you write custom CSS/SCSS and JavaScript. In Part 1, you learned how to integrate the WordPress scripts package with your theme.

Gearing up for the last leg of this journey.

Registering block styles with JavaScript.

How do i create a custom border in word