Proof of concept of a register_block_setting()
function to quickly add settings fields to blocks with just PHP.
// Register a "Button Style" setting for the Button block.
wpdev_register_block_setting(
array(
'attribute' => 'prefixButtonStyle',
'blockTypes' => array( 'core/button' ),
'label' => 'Select Button Style',
'multiple' => false,
'options' => array(
array(
'value' => '',
'label' => 'Default',
),
array(
'value' => 'block-style-outline',
'label' => 'Outline',
),
array(
'value' => 'block-style-solid',
'label' => 'Solid',
),
),
'help' => 'Select a style for the button.',
),
);
![Xnapper-2024-06-13-15 23 31](https://private-user-images.githubusercontent.com/6867360/339569324-5cdc6a92-4382-4c76-b132-5bf81bb8916d.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEzMDA1MDYsIm5iZiI6MTcyMTMwMDIwNiwicGF0aCI6Ii82ODY3MzYwLzMzOTU2OTMyNC01Y2RjNmE5Mi00MzgyLTRjNzYtYjEzMi01YmY4MWJiODkxNmQucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcxOCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MThUMTA1NjQ2WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YzI5OWRlNDU5MjJiNDZhNDIxNGFiMjdkZmI1Y2UxODQwN2ZmMGFiZTNmNWU2NjQ5M2MxODBhOWViMzAwM2I5OCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.7wcdsHE_qLDFdXzUGlf6p0oOZH21SYOVFZRHoq50q5w)
The selected value will be added as a className to the block and saved as an attribute in the block's JSON data:
<div class="wp-block-button block-style-outline">
...
</div>
{
"prefixButtonStyle": "block-style-outline"
}
If you set multiple
to true, your options will be rendered as checkboxes instead of a select dropdown.
![Xnapper-2024-06-13-15 40 02](https://private-user-images.githubusercontent.com/6867360/339572085-ee67526a-8497-46bd-a25c-bafaade96d93.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEzMDA1MDYsIm5iZiI6MTcyMTMwMDIwNiwicGF0aCI6Ii82ODY3MzYwLzMzOTU3MjA4NS1lZTY3NTI2YS04NDk3LTQ2YmQtYTI1Yy1iYWZhYWRlOTZkOTMucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcxOCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MThUMTA1NjQ2WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MmU1ZTQ3OWQxMjQwZjU3OTg3YjRkZDM2MzEwZWI0YWNkNGI1ZDdhNjc2NzFkNzY4MzQ2YmJhMDk5YzIyZmM4MiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.-HcNjLVLNnu7Z3R_DKfimymEJjuqavxJsGG6xoZhnlQ)
The selected values will be saved as an array in the block's JSON data:
{
"prefixButtonStyle": [ "block-style-outline", "block-style-solid" ]
}
This is also useful even if there's only one option but you want a checkbox/boolean behavior.
- optional render_block attribute to enable modifying the block markup in one palce
- some sort of conditional register_block_style support or inline CSS built in?