With Modern Fields, you can register a custom WordPress block and assign a group of fields. Then, write your own PHP template. No JS, no React and no compilation required.
Custom blocks with fields are only available in the pro versions of Modern Fields.
Step 1: Register a new block
First, go to Modern Fields > Blocks. You’ll see the list of registered custom blocks.
Click on “Add a new block” button.
Fill in the fields:
| Effect | |
|---|---|
| Title | The name of the block. |
| Namespace | Lets you distinguish your blocks from others. Set the same namespace for all your blocks. |
| Slug | Unique identifier for your block. |
| Category | The category in which the block will appear in the inserter. |
| Icon | Icon for the block. |
| Keywords | Set keywords to help |
| Enabled | Disable the block without deleting it. |
Then, select the supports to activate to your block. Supports are customization features for blocks that can be activated in one click.
| Effect | |
|---|---|
| Alignment | Allow your block to have wide / full width alignement |
| Color | Add a color/gradient selector for text, background and link |
| Spacing | Add spacing ranges for margin, padding and block spacing |
| Typography | Add font size and line height controls |
| Dimensions | Add the minimum height control |
| Others | Other options are available for your block. Check the WordPress documentation. |
Prefer using native supports instead of fields for the features listed above.
Step 2: Assign a fields group
Now, you need to create a fields group and attach it to your custom blocks. Go to Modern Fields > Field groups and create one.
In the location selector (at the bottom of the screen) select Blocks > Custom Blocks.
You can also define in which tab you want your fields to appear:
- Content: suited for content fields like text, textarea, richtext.
- Settings: suited for select fields like select, multi-token, button groups.
- Styles: suited for color, spacing, range, border fields.
- Advanced: for ultra specific fields.
The last one is not a proper tab: fields will appear in the advanced panel at the bottom of the content tab, collapsed by default.
If you need to set fields in different tabs, you’ll need to create several groups and assign them to the same block, different tab.
Note: The fields will be save in the blocks attributes, and not in the post meta table.
Step 3: Create the template
In the last step, you need to create the template file in your theme, more specifically in the /mf-blocks/ folder.
First, get the name of your block from the block registration screen.
If you block name is mf/custom-block, the file name is mf-custom-block.php.
Now, write your template in PHP. The field values are exposed through the $field array.
Don’t forget to add get_block_wrapper_attributes() in the first tag to enable supports.
Your block should be available in the block editor.
If you can’t see it, go back to Modern Fields > Blocks and check everything is green in the block checklist.
Register a stylesheet for the block
Now, if you need some custom styles for your block, you can use the native wp_enqueue_block_style() function.
In this example, the CSS file is located in the assets/css/ folder.
Change the folder name
If you need to change the custom blocks templates folder name, use this filter in your functions.php file.
Define the name in this filter and create the corresponding folder in your theme.