Skip to content

Instantly share code, notes, and snippets.

@wpmark
Last active November 27, 2024 10:27
Show Gist options
  • Save wpmark/aa2469de4804a7a01883a13d37051ef9 to your computer and use it in GitHub Desktop.
Save wpmark/aa2469de4804a7a01883a13d37051ef9 to your computer and use it in GitHub Desktop.
Register WordPress block styles with PHP

Register block styles with PHP

You can now register different styles for WordPress blocks using PHP - no Javascript needed! Use the code here, either in your themes functions.php file or a plugin.

The name paramter forms part of the CSS class that is added to the block. Don't forget, this is all that block styles do, they had an additional class which then allows you to style them in a different way.

The class will take the form of is-style-{NAME}. So in the example here, when the "EyeBrow" style is applied to a heading, that heading block would have the class of is-style-eyebrow.

<?php
/**
* Register some default block editor styles for this block.
*/
function hd_register_block_styles() {
// add the small image style.
register_block_style(
'core/heading', // name of your block
array(
'name' => 'eyebrow', // part of the class that gets added to the block.
'label' => __( 'Eyebrow Heading' ),
)
);
}
add_action( 'init', 'hd_register_block_styles' );
@ryandayalo
Copy link

How do i add attributes to this?

@wpmark
Copy link
Author

wpmark commented Dec 19, 2022

@ryandayalo I am not entirely sure what you mean here?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment