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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzg5NjY5NjIsIm5iZiI6MTczODk2NjY2MiwicGF0aCI6Ii82ODY3MzYwLzMzOTU2OTMyNC01Y2RjNmE5Mi00MzgyLTRjNzYtYjEzMi01YmY4MWJiODkxNmQucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MDIwNyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTAyMDdUMjIxNzQyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ODQwNDZhNTBhYjA0MjAyYTljZGFhMDFjOTRiZTAwMjdiYjNkMTIwMjI1Y2Q3ZmU4YzBhZDA5ODEzM2IyOTU5NyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.lj1TXDQ_Vyool4hJEHxO73BxN6UNUFN74DnddUskC28)
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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzg5NjY5NjIsIm5iZiI6MTczODk2NjY2MiwicGF0aCI6Ii82ODY3MzYwLzMzOTU3MjA4NS1lZTY3NTI2YS04NDk3LTQ2YmQtYTI1Yy1iYWZhYWRlOTZkOTMucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MDIwNyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTAyMDdUMjIxNzQyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NzA1M2Q5ZTcxOWQ2MGRjN2U2YzUzMTdjNmE5OGYzYWVmM2Y0ODUxMjljZDc3NGY3YjFiZWZlZTBmNzA4MTZhMyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.auDzSXeyP7A8S2IOUbLiiqhymqWO1ekxWW_F0nVT4Qo)
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?