Static block w/ styles
This starter template generates a simple container that’s ready for your markup. It also demonstrates how to add style support to a block. It gives you a quick way to offer a variety of block styles without having to dig into the variations API.
Block’s support styles by adding a class with the style’s name to the block’s container. In the case of this starter template we’ve got 3 styles called default, light, and dark. So depending what style the user chooses, the classes is-style-light or is-style-dark would be added to the block’s container.
We threw the styles in the block.json file but if you have a bunch of styles I’d consider throwing them in a separate style.js file.
plugin-name ├── .github/workflows ├── .wordpress-org ├── build ├── includes │ ├── EnqueueAssets.php │ ├── LoadTranslations.php │ └── RegisterBlocks.php ├── src │ ├── blocks │ │ └── static-block-with-styles │ │ ├── block.json │ │ ├── deprecated.js │ │ ├── edit.js │ │ ├── index.scss │ │ ├── icon.js │ │ ├── index.js │ │ ├── save.js │ │ ├── style.scss │ │ └── transforms.js │ ├── utils │ ├── tailwind.css │ ├── index.scss │ ├── index.js │ └── style.scss ├── bs-config.js ├── composer.json ├── static-block-with-styles.php ├── .distignore ├── .editorconfig ├── .gitignore ├── .htaccess ├── LICENSE ├── package.json ├── postcss.config.js ├── readme.txt ├── replace.config.js ├── tailwind.config.js └── webpack.config.js
Nothing too unique to note here with respect to the Static Block starter template.
Let’s walk through the important directories and files for the static block starter template. If you want a more in-depth explanation of all the files in the root of the plugin, check out the default plugin template.
Let’s walk through the important directories and files for the static block starter template.
If you use a CSS framework such as tailwindcss, those will be enqueued here as well. Otherwise, the style.scss and index.scss files will be registered and enqueued by the RegisterBlocks.php file.
Used by: If using a CSS framework, this will enqueue tailwindcss/bootstrap styles. If using the Frontend Block this will enqueue the ./src/frontend.js file. Also used if using the following block starter templates independently: Block Pattern, Filter, Format, Frontend Block.
Used by : All block plugin starter templates.
This class registers all blocks except for dynamic blocks. However, it does register the CSS files that dynamic block’s use.
These files are located in src/blocks/static-block/.
The block.json file holds all your block attributes, your block name, the block category, title, & supports objects. Think of this file as the block’s configuration file.
Hopefully you won’t have to use this file, b/c it’s a little tricky to use. If you publish a plugin to the WordPress directory & make a change to the name of an attribute or the html markup in the save.js file, you’ll need to use this file.
If you want to learn how to use this check out the Rich Text Block With Deprecated starter template.
The edit.js file is where you’ll want to put your edit function code, or the code that renders your block in the block editor.
The editor.scss file applies styles to your custom block in the editor ONLY.
If you want to use a custom icon for your block, you’ll want to put it in here. The index.js file pulls it in from this file.
The index.js file is where you’ll export your block name & settings for registration. This file is kinda of like the table of contents for your block.
The save.js file is where you’d write your save function. The
save function defines the way in which the different attributes should be combined into the final markup, which is then serialized into post content.
Any custom CSS styles added here get applied to both the frontend & the backend.
Put any block transformations in here. Using transforms is a little tricky. If you need help setting this up check out the Rich Text Block With Transforms block starter template.
A few very important files live in the root src/ directory.
Put all common, or global frontend and editor styles here. We provide a namespace that you can use to apply custom styles to your custom blocks without the styles bleeding into the rest of the site.
Put any common or global editor ONLY styles in here. Again, we provide a slug class selector so you can target your custom block patterns.
The frontend.js file is only included in the src/ root if you’re using the Frontend Block. This file pulls in all frontend.js files located in the src/blocks/ directory. It then looks for containers that have been saved by the Frontend Block and renders the interactive Frontend Blocks in those containers. This file is very important if you want to add any sort of frontend interactivity to your blocks. We only have the one demo for now but if you want a better understanding of how to do this spin up the Frontend Block.
The index.js file handles automatically registering all the blocks in the src/blocks/ directory, you don’t even have to think about this. This is also where the magic happens for enable Hot Module Replacement ( HMR ) during development.
If you choose to use a CSS framework you’ll also see this file in the root of the src/ directory.
The utils/ directory is where you can throw any plugin utilities. For example, we register the plugin category in src/utils/register-categories.js. We also need some helper functions which are in src/utils/helpers.js and finally we put any global plugin icons in src/utils/icons.js.
BUILD BLOCKS FASTER
Take our FREE Blazing Fast Block Development Course.