Block styles provide visual variations that users can apply from the block toolbar.<\/p>
{\n "styles": [\n {\n "name": "default",\n "label": "Default",\n "isDefault": true\n },\n {\n "name": "outlined",\n "label": "Outlined"\n },\n {\n "name": "shadow",\n "label": "Shadow"\n }\n ]\n}<\/code><\/pre><\/div>Style Properties<\/h2>Property<\/th>Type<\/th>Description<\/th><\/tr><\/thead>name<\/code><\/td>string<\/td>CSS class suffix (required)<\/td><\/tr>label<\/code><\/td>string<\/td>Display name (required)<\/td><\/tr>isDefault<\/code><\/td>boolean<\/td>Applied by default<\/td><\/tr><\/tbody><\/table><\/figure>How Styles Work<\/h2>When a user selects a style, WordPress adds a class to the block:<\/p><\/span><\/use><\/svg><\/button><\/div>is-style-{style-name}<\/code><\/pre><\/div>For a style named outlined<\/code>:<\/p>html<\/span><\/use><\/svg><\/button><\/div><div class="wp-block-my-plugin-card is-style-outlined">\n ...\n<\/div><\/code><\/pre><\/div>CSS for Block Styles<\/h2>Style your variations in CSS:<\/p>css<\/span><\/use><\/svg><\/button><\/div>\/* Default style (no class needed, but can target explicitly) *\/\n.wp-block-my-plugin-card,\n.wp-block-my-plugin-card.is-style-default {\n border: 1px solid #ddd;\n padding: 20px;\n}\n\n\/* Outlined style *\/\n.wp-block-my-plugin-card.is-style-outlined {\n border: 2px solid currentColor;\n background: transparent;\n}\n\n\/* Shadow style *\/\n.wp-block-my-plugin-card.is-style-shadow {\n border: none;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}<\/code><\/pre><\/div>Editor Preview Styles<\/h2>Ensure styles work in the editor by including them in style.css<\/code> (loads in both editor and frontend) or by adding styles to editorStyle<\/code>.<\/p>JavaScript Registration<\/h2>For more control, register styles in JavaScript:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { registerBlockStyle } from '@wordpress\/blocks';\n\nregisterBlockStyle( 'core\/quote', {\n name: 'fancy',\n label: 'Fancy',\n} );\n\nregisterBlockStyle( 'core\/quote', {\n name: 'modern',\n label: 'Modern',\n isDefault: true,\n} );<\/code><\/pre><\/div>Registering Styles for Core Blocks<\/h2>Add styles to core blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { registerBlockStyle } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Add styles to core\/button\n registerBlockStyle( 'core\/button', {\n name: 'gradient',\n label: 'Gradient',\n } );\n \n \/\/ Add styles to core\/image\n registerBlockStyle( 'core\/image', {\n name: 'rounded',\n label: 'Rounded Corners',\n } );\n \n registerBlockStyle( 'core\/image', {\n name: 'polaroid',\n label: 'Polaroid',\n } );\n} );<\/code><\/pre><\/div>CSS for core block styles:<\/p>css<\/span><\/use><\/svg><\/button><\/div>\/* Gradient button *\/\n.wp-block-button.is-style-gradient .wp-block-button__link {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n border: none;\n}\n\n\/* Rounded image *\/\n.wp-block-image.is-style-rounded img {\n border-radius: 16px;\n}\n\n\/* Polaroid image *\/\n.wp-block-image.is-style-polaroid {\n background: white;\n padding: 12px 12px 40px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n}<\/code><\/pre><\/div>Unregistering Styles<\/h2>Remove existing styles:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { unregisterBlockStyle } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Remove the "plain" style from core\/quote\n unregisterBlockStyle( 'core\/quote', 'plain' );\n \n \/\/ Remove default style from core\/image\n unregisterBlockStyle( 'core\/image', 'default' );\n} );<\/code><\/pre><\/div>PHP Registration<\/h2>Register styles from PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'highlight',\n 'label' => __( 'Highlight', 'my-plugin' ),\n ]\n );\n \n register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'large-text',\n 'label' => __( 'Large Text', 'my-plugin' ),\n 'is_default' => false,\n 'style_handle' => 'my-plugin-block-styles', \/\/ Optional: associated stylesheet\n ]\n );\n} );<\/code><\/pre><\/div>With inline styles:<\/p>php<\/span><\/use><\/svg><\/button><\/div>register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'fancy',\n 'label' => __( 'Fancy', 'my-plugin' ),\n 'inline_style' => '.is-style-fancy { \n font-family: Georgia, serif;\n font-style: italic;\n border-left: 4px solid currentColor;\n padding-left: 1em;\n }',\n ]\n);<\/code><\/pre><\/div>Unregistering Styles in PHP<\/h2>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n unregister_block_style( 'core\/quote', 'plain' );\n} );<\/code><\/pre><\/div>Note: Must run after the style is registered (priority matters).<\/p>Style Variations via theme.json<\/h2>Define styles in theme.json for theme-specific variations:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "version": 2,\n "styles": {\n "blocks": {\n "core\/button": {\n "variations": {\n "outline": {\n "border": {\n "width": "2px",\n "style": "solid",\n "color": "currentColor"\n },\n "color": {\n "background": "transparent"\n }\n }\n }\n }\n }\n }\n}<\/code><\/pre><\/div>Conditional Style Registration<\/h2>Register styles based on context:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n \/\/ Only for themes that support custom styles\n if ( current_theme_supports( 'custom-block-styles' ) ) {\n register_block_style( 'core\/group', [\n 'name' => 'boxed',\n 'label' => __( 'Boxed', 'my-plugin' ),\n ] );\n }\n} );<\/code><\/pre><\/div>Style-Specific Attributes<\/h2>Some styles might need attribute changes. Handle in edit component:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { useEffect } from '@wordpress\/element';\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { className } = attributes;\n \n \/\/ Adjust attributes based on style\n useEffect( () => {\n if ( className?.includes( 'is-style-compact' ) ) {\n setAttributes( { padding: 'small' } );\n }\n }, [ className ] );\n \n \/\/ ...\n}<\/code><\/pre><\/div>Complete Example: Card Block with Styles<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "styles": [\n {\n "name": "default",\n "label": "Default",\n "isDefault": true\n },\n {\n "name": "bordered",\n "label": "Bordered"\n },\n {\n "name": "elevated",\n "label": "Elevated"\n },\n {\n "name": "filled",\n "label": "Filled"\n }\n ],\n "style": "file:.\/style.css",\n "editorScript": "file:.\/index.js"\n}<\/code><\/pre><\/div>css<\/span><\/use><\/svg><\/button><\/div>\/* style.css *\/\n\n\/* Base styles for all cards *\/\n.wp-block-my-plugin-card {\n padding: 24px;\n border-radius: 8px;\n}\n\n\/* Default style *\/\n.wp-block-my-plugin-card.is-style-default {\n background: #ffffff;\n border: 1px solid #e2e8f0;\n}\n\n\/* Bordered style *\/\n.wp-block-my-plugin-card.is-style-bordered {\n background: transparent;\n border: 2px solid currentColor;\n}\n\n\/* Elevated style *\/\n.wp-block-my-plugin-card.is-style-elevated {\n background: #ffffff;\n border: none;\n box-shadow: \n 0 4px 6px -1px rgba(0, 0, 0, 0.1),\n 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n}\n\n\/* Filled style *\/\n.wp-block-my-plugin-card.is-style-filled {\n background: #f1f5f9;\n border: none;\n}\n\n\/* Dark mode support *\/\n@media (prefers-color-scheme: dark) {\n .wp-block-my-plugin-card.is-style-default {\n background: #1e293b;\n border-color: #334155;\n }\n \n .wp-block-my-plugin-card.is-style-elevated {\n background: #1e293b;\n box-shadow: \n 0 4px 6px -1px rgba(0, 0, 0, 0.3),\n 0 2px 4px -1px rgba(0, 0, 0, 0.2);\n }\n \n .wp-block-my-plugin-card.is-style-filled {\n background: #334155;\n }\n}<\/code><\/pre><\/div>Programmatic Style Detection<\/h2>Check active style in PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $class_name = $attributes['className'] ?? '';\n \n \/\/ Check for specific style\n if ( str_contains( $class_name, 'is-style-elevated' ) ) {\n \/\/ Add extra markup for elevated style\n }\n \n return $content;\n}<\/code><\/pre><\/div>In JavaScript:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { className } = attributes;\n \n const isElevated = className?.includes( 'is-style-elevated' );\n const isBordered = className?.includes( 'is-style-bordered' );\n \n return (\n <div { ...useBlockProps() }>\n { isElevated && <div className="shadow-overlay" \/> }\n {\/* ... *\/}\n <\/div>\n );\n}<\/code><\/pre><\/div>Style Previews<\/h2>Styles appear in the Styles panel with previews. The preview uses your block’s example<\/code>:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "example": {\n "attributes": {\n "title": "Card Title",\n "content": "Preview content for the card."\n }\n },\n "styles": [\n { "name": "default", "label": "Default", "isDefault": true },\n { "name": "bordered", "label": "Bordered" }\n ]\n}<\/code><\/pre><\/div>Best Practices<\/h2>Consistent naming:<\/strong> Use descriptive, lowercase names with hyphens.<\/p><\/li>Always include default:<\/strong> Mark one style as isDefault: true<\/code>.<\/p><\/li>Base styles first:<\/strong> Write base styles that apply to all variations.<\/p><\/li>Use specificity wisely:<\/strong> .block.is-style-name<\/code> is usually enough.<\/p><\/li>Support dark mode:<\/strong> Consider color scheme preferences.<\/p><\/li>Test in editor:<\/strong> Ensure styles render correctly in the block editor.<\/p><\/li>Keep it visual:<\/strong> Styles should create visible differences.<\/p><\/li>Limit options:<\/strong> 3-5 styles is usually plenty.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block styles provide visual variations that users can apply from the block toolbar. Defining Styles in block.json { "styles": [ { "name": "default", "label": "Default", "isDefault": true }, { "name":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5519","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions"}],"predecessor-version":[{"id":8997,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions\/8997"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5519"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5519"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5519"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
name<\/code><\/td>string<\/td>CSS class suffix (required)<\/td><\/tr>label<\/code><\/td>string<\/td>Display name (required)<\/td><\/tr>isDefault<\/code><\/td>boolean<\/td>Applied by default<\/td><\/tr><\/tbody><\/table><\/figure>How Styles Work<\/h2>When a user selects a style, WordPress adds a class to the block:<\/p><\/span><\/use><\/svg><\/button><\/div>is-style-{style-name}<\/code><\/pre><\/div>For a style named outlined<\/code>:<\/p>html<\/span><\/use><\/svg><\/button><\/div><div class="wp-block-my-plugin-card is-style-outlined">\n ...\n<\/div><\/code><\/pre><\/div>CSS for Block Styles<\/h2>Style your variations in CSS:<\/p>css<\/span><\/use><\/svg><\/button><\/div>\/* Default style (no class needed, but can target explicitly) *\/\n.wp-block-my-plugin-card,\n.wp-block-my-plugin-card.is-style-default {\n border: 1px solid #ddd;\n padding: 20px;\n}\n\n\/* Outlined style *\/\n.wp-block-my-plugin-card.is-style-outlined {\n border: 2px solid currentColor;\n background: transparent;\n}\n\n\/* Shadow style *\/\n.wp-block-my-plugin-card.is-style-shadow {\n border: none;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}<\/code><\/pre><\/div>Editor Preview Styles<\/h2>Ensure styles work in the editor by including them in style.css<\/code> (loads in both editor and frontend) or by adding styles to editorStyle<\/code>.<\/p>JavaScript Registration<\/h2>For more control, register styles in JavaScript:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { registerBlockStyle } from '@wordpress\/blocks';\n\nregisterBlockStyle( 'core\/quote', {\n name: 'fancy',\n label: 'Fancy',\n} );\n\nregisterBlockStyle( 'core\/quote', {\n name: 'modern',\n label: 'Modern',\n isDefault: true,\n} );<\/code><\/pre><\/div>Registering Styles for Core Blocks<\/h2>Add styles to core blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { registerBlockStyle } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Add styles to core\/button\n registerBlockStyle( 'core\/button', {\n name: 'gradient',\n label: 'Gradient',\n } );\n \n \/\/ Add styles to core\/image\n registerBlockStyle( 'core\/image', {\n name: 'rounded',\n label: 'Rounded Corners',\n } );\n \n registerBlockStyle( 'core\/image', {\n name: 'polaroid',\n label: 'Polaroid',\n } );\n} );<\/code><\/pre><\/div>CSS for core block styles:<\/p>css<\/span><\/use><\/svg><\/button><\/div>\/* Gradient button *\/\n.wp-block-button.is-style-gradient .wp-block-button__link {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n border: none;\n}\n\n\/* Rounded image *\/\n.wp-block-image.is-style-rounded img {\n border-radius: 16px;\n}\n\n\/* Polaroid image *\/\n.wp-block-image.is-style-polaroid {\n background: white;\n padding: 12px 12px 40px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n}<\/code><\/pre><\/div>Unregistering Styles<\/h2>Remove existing styles:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { unregisterBlockStyle } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Remove the "plain" style from core\/quote\n unregisterBlockStyle( 'core\/quote', 'plain' );\n \n \/\/ Remove default style from core\/image\n unregisterBlockStyle( 'core\/image', 'default' );\n} );<\/code><\/pre><\/div>PHP Registration<\/h2>Register styles from PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'highlight',\n 'label' => __( 'Highlight', 'my-plugin' ),\n ]\n );\n \n register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'large-text',\n 'label' => __( 'Large Text', 'my-plugin' ),\n 'is_default' => false,\n 'style_handle' => 'my-plugin-block-styles', \/\/ Optional: associated stylesheet\n ]\n );\n} );<\/code><\/pre><\/div>With inline styles:<\/p>php<\/span><\/use><\/svg><\/button><\/div>register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'fancy',\n 'label' => __( 'Fancy', 'my-plugin' ),\n 'inline_style' => '.is-style-fancy { \n font-family: Georgia, serif;\n font-style: italic;\n border-left: 4px solid currentColor;\n padding-left: 1em;\n }',\n ]\n);<\/code><\/pre><\/div>Unregistering Styles in PHP<\/h2>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n unregister_block_style( 'core\/quote', 'plain' );\n} );<\/code><\/pre><\/div>Note: Must run after the style is registered (priority matters).<\/p>Style Variations via theme.json<\/h2>Define styles in theme.json for theme-specific variations:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "version": 2,\n "styles": {\n "blocks": {\n "core\/button": {\n "variations": {\n "outline": {\n "border": {\n "width": "2px",\n "style": "solid",\n "color": "currentColor"\n },\n "color": {\n "background": "transparent"\n }\n }\n }\n }\n }\n }\n}<\/code><\/pre><\/div>Conditional Style Registration<\/h2>Register styles based on context:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n \/\/ Only for themes that support custom styles\n if ( current_theme_supports( 'custom-block-styles' ) ) {\n register_block_style( 'core\/group', [\n 'name' => 'boxed',\n 'label' => __( 'Boxed', 'my-plugin' ),\n ] );\n }\n} );<\/code><\/pre><\/div>Style-Specific Attributes<\/h2>Some styles might need attribute changes. Handle in edit component:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { useEffect } from '@wordpress\/element';\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { className } = attributes;\n \n \/\/ Adjust attributes based on style\n useEffect( () => {\n if ( className?.includes( 'is-style-compact' ) ) {\n setAttributes( { padding: 'small' } );\n }\n }, [ className ] );\n \n \/\/ ...\n}<\/code><\/pre><\/div>Complete Example: Card Block with Styles<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "styles": [\n {\n "name": "default",\n "label": "Default",\n "isDefault": true\n },\n {\n "name": "bordered",\n "label": "Bordered"\n },\n {\n "name": "elevated",\n "label": "Elevated"\n },\n {\n "name": "filled",\n "label": "Filled"\n }\n ],\n "style": "file:.\/style.css",\n "editorScript": "file:.\/index.js"\n}<\/code><\/pre><\/div>css<\/span><\/use><\/svg><\/button><\/div>\/* style.css *\/\n\n\/* Base styles for all cards *\/\n.wp-block-my-plugin-card {\n padding: 24px;\n border-radius: 8px;\n}\n\n\/* Default style *\/\n.wp-block-my-plugin-card.is-style-default {\n background: #ffffff;\n border: 1px solid #e2e8f0;\n}\n\n\/* Bordered style *\/\n.wp-block-my-plugin-card.is-style-bordered {\n background: transparent;\n border: 2px solid currentColor;\n}\n\n\/* Elevated style *\/\n.wp-block-my-plugin-card.is-style-elevated {\n background: #ffffff;\n border: none;\n box-shadow: \n 0 4px 6px -1px rgba(0, 0, 0, 0.1),\n 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n}\n\n\/* Filled style *\/\n.wp-block-my-plugin-card.is-style-filled {\n background: #f1f5f9;\n border: none;\n}\n\n\/* Dark mode support *\/\n@media (prefers-color-scheme: dark) {\n .wp-block-my-plugin-card.is-style-default {\n background: #1e293b;\n border-color: #334155;\n }\n \n .wp-block-my-plugin-card.is-style-elevated {\n background: #1e293b;\n box-shadow: \n 0 4px 6px -1px rgba(0, 0, 0, 0.3),\n 0 2px 4px -1px rgba(0, 0, 0, 0.2);\n }\n \n .wp-block-my-plugin-card.is-style-filled {\n background: #334155;\n }\n}<\/code><\/pre><\/div>Programmatic Style Detection<\/h2>Check active style in PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $class_name = $attributes['className'] ?? '';\n \n \/\/ Check for specific style\n if ( str_contains( $class_name, 'is-style-elevated' ) ) {\n \/\/ Add extra markup for elevated style\n }\n \n return $content;\n}<\/code><\/pre><\/div>In JavaScript:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { className } = attributes;\n \n const isElevated = className?.includes( 'is-style-elevated' );\n const isBordered = className?.includes( 'is-style-bordered' );\n \n return (\n <div { ...useBlockProps() }>\n { isElevated && <div className="shadow-overlay" \/> }\n {\/* ... *\/}\n <\/div>\n );\n}<\/code><\/pre><\/div>Style Previews<\/h2>Styles appear in the Styles panel with previews. The preview uses your block’s example<\/code>:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "example": {\n "attributes": {\n "title": "Card Title",\n "content": "Preview content for the card."\n }\n },\n "styles": [\n { "name": "default", "label": "Default", "isDefault": true },\n { "name": "bordered", "label": "Bordered" }\n ]\n}<\/code><\/pre><\/div>Best Practices<\/h2>Consistent naming:<\/strong> Use descriptive, lowercase names with hyphens.<\/p><\/li>Always include default:<\/strong> Mark one style as isDefault: true<\/code>.<\/p><\/li>Base styles first:<\/strong> Write base styles that apply to all variations.<\/p><\/li>Use specificity wisely:<\/strong> .block.is-style-name<\/code> is usually enough.<\/p><\/li>Support dark mode:<\/strong> Consider color scheme preferences.<\/p><\/li>Test in editor:<\/strong> Ensure styles render correctly in the block editor.<\/p><\/li>Keep it visual:<\/strong> Styles should create visible differences.<\/p><\/li>Limit options:<\/strong> 3-5 styles is usually plenty.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block styles provide visual variations that users can apply from the block toolbar. Defining Styles in block.json { "styles": [ { "name": "default", "label": "Default", "isDefault": true }, { "name":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5519","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions"}],"predecessor-version":[{"id":8997,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions\/8997"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5519"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5519"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5519"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
label<\/code><\/td>string<\/td>Display name (required)<\/td><\/tr>isDefault<\/code><\/td>boolean<\/td>Applied by default<\/td><\/tr><\/tbody><\/table><\/figure>How Styles Work<\/h2>When a user selects a style, WordPress adds a class to the block:<\/p><\/span><\/use><\/svg><\/button><\/div>is-style-{style-name}<\/code><\/pre><\/div>For a style named outlined<\/code>:<\/p>html<\/span><\/use><\/svg><\/button><\/div><div class="wp-block-my-plugin-card is-style-outlined">\n ...\n<\/div><\/code><\/pre><\/div>CSS for Block Styles<\/h2>Style your variations in CSS:<\/p>css<\/span><\/use><\/svg><\/button><\/div>\/* Default style (no class needed, but can target explicitly) *\/\n.wp-block-my-plugin-card,\n.wp-block-my-plugin-card.is-style-default {\n border: 1px solid #ddd;\n padding: 20px;\n}\n\n\/* Outlined style *\/\n.wp-block-my-plugin-card.is-style-outlined {\n border: 2px solid currentColor;\n background: transparent;\n}\n\n\/* Shadow style *\/\n.wp-block-my-plugin-card.is-style-shadow {\n border: none;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}<\/code><\/pre><\/div>Editor Preview Styles<\/h2>Ensure styles work in the editor by including them in style.css<\/code> (loads in both editor and frontend) or by adding styles to editorStyle<\/code>.<\/p>JavaScript Registration<\/h2>For more control, register styles in JavaScript:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { registerBlockStyle } from '@wordpress\/blocks';\n\nregisterBlockStyle( 'core\/quote', {\n name: 'fancy',\n label: 'Fancy',\n} );\n\nregisterBlockStyle( 'core\/quote', {\n name: 'modern',\n label: 'Modern',\n isDefault: true,\n} );<\/code><\/pre><\/div>Registering Styles for Core Blocks<\/h2>Add styles to core blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { registerBlockStyle } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Add styles to core\/button\n registerBlockStyle( 'core\/button', {\n name: 'gradient',\n label: 'Gradient',\n } );\n \n \/\/ Add styles to core\/image\n registerBlockStyle( 'core\/image', {\n name: 'rounded',\n label: 'Rounded Corners',\n } );\n \n registerBlockStyle( 'core\/image', {\n name: 'polaroid',\n label: 'Polaroid',\n } );\n} );<\/code><\/pre><\/div>CSS for core block styles:<\/p>css<\/span><\/use><\/svg><\/button><\/div>\/* Gradient button *\/\n.wp-block-button.is-style-gradient .wp-block-button__link {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n border: none;\n}\n\n\/* Rounded image *\/\n.wp-block-image.is-style-rounded img {\n border-radius: 16px;\n}\n\n\/* Polaroid image *\/\n.wp-block-image.is-style-polaroid {\n background: white;\n padding: 12px 12px 40px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n}<\/code><\/pre><\/div>Unregistering Styles<\/h2>Remove existing styles:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { unregisterBlockStyle } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Remove the "plain" style from core\/quote\n unregisterBlockStyle( 'core\/quote', 'plain' );\n \n \/\/ Remove default style from core\/image\n unregisterBlockStyle( 'core\/image', 'default' );\n} );<\/code><\/pre><\/div>PHP Registration<\/h2>Register styles from PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'highlight',\n 'label' => __( 'Highlight', 'my-plugin' ),\n ]\n );\n \n register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'large-text',\n 'label' => __( 'Large Text', 'my-plugin' ),\n 'is_default' => false,\n 'style_handle' => 'my-plugin-block-styles', \/\/ Optional: associated stylesheet\n ]\n );\n} );<\/code><\/pre><\/div>With inline styles:<\/p>php<\/span><\/use><\/svg><\/button><\/div>register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'fancy',\n 'label' => __( 'Fancy', 'my-plugin' ),\n 'inline_style' => '.is-style-fancy { \n font-family: Georgia, serif;\n font-style: italic;\n border-left: 4px solid currentColor;\n padding-left: 1em;\n }',\n ]\n);<\/code><\/pre><\/div>Unregistering Styles in PHP<\/h2>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n unregister_block_style( 'core\/quote', 'plain' );\n} );<\/code><\/pre><\/div>Note: Must run after the style is registered (priority matters).<\/p>Style Variations via theme.json<\/h2>Define styles in theme.json for theme-specific variations:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "version": 2,\n "styles": {\n "blocks": {\n "core\/button": {\n "variations": {\n "outline": {\n "border": {\n "width": "2px",\n "style": "solid",\n "color": "currentColor"\n },\n "color": {\n "background": "transparent"\n }\n }\n }\n }\n }\n }\n}<\/code><\/pre><\/div>Conditional Style Registration<\/h2>Register styles based on context:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n \/\/ Only for themes that support custom styles\n if ( current_theme_supports( 'custom-block-styles' ) ) {\n register_block_style( 'core\/group', [\n 'name' => 'boxed',\n 'label' => __( 'Boxed', 'my-plugin' ),\n ] );\n }\n} );<\/code><\/pre><\/div>Style-Specific Attributes<\/h2>Some styles might need attribute changes. Handle in edit component:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { useEffect } from '@wordpress\/element';\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { className } = attributes;\n \n \/\/ Adjust attributes based on style\n useEffect( () => {\n if ( className?.includes( 'is-style-compact' ) ) {\n setAttributes( { padding: 'small' } );\n }\n }, [ className ] );\n \n \/\/ ...\n}<\/code><\/pre><\/div>Complete Example: Card Block with Styles<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "styles": [\n {\n "name": "default",\n "label": "Default",\n "isDefault": true\n },\n {\n "name": "bordered",\n "label": "Bordered"\n },\n {\n "name": "elevated",\n "label": "Elevated"\n },\n {\n "name": "filled",\n "label": "Filled"\n }\n ],\n "style": "file:.\/style.css",\n "editorScript": "file:.\/index.js"\n}<\/code><\/pre><\/div>css<\/span><\/use><\/svg><\/button><\/div>\/* style.css *\/\n\n\/* Base styles for all cards *\/\n.wp-block-my-plugin-card {\n padding: 24px;\n border-radius: 8px;\n}\n\n\/* Default style *\/\n.wp-block-my-plugin-card.is-style-default {\n background: #ffffff;\n border: 1px solid #e2e8f0;\n}\n\n\/* Bordered style *\/\n.wp-block-my-plugin-card.is-style-bordered {\n background: transparent;\n border: 2px solid currentColor;\n}\n\n\/* Elevated style *\/\n.wp-block-my-plugin-card.is-style-elevated {\n background: #ffffff;\n border: none;\n box-shadow: \n 0 4px 6px -1px rgba(0, 0, 0, 0.1),\n 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n}\n\n\/* Filled style *\/\n.wp-block-my-plugin-card.is-style-filled {\n background: #f1f5f9;\n border: none;\n}\n\n\/* Dark mode support *\/\n@media (prefers-color-scheme: dark) {\n .wp-block-my-plugin-card.is-style-default {\n background: #1e293b;\n border-color: #334155;\n }\n \n .wp-block-my-plugin-card.is-style-elevated {\n background: #1e293b;\n box-shadow: \n 0 4px 6px -1px rgba(0, 0, 0, 0.3),\n 0 2px 4px -1px rgba(0, 0, 0, 0.2);\n }\n \n .wp-block-my-plugin-card.is-style-filled {\n background: #334155;\n }\n}<\/code><\/pre><\/div>Programmatic Style Detection<\/h2>Check active style in PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $class_name = $attributes['className'] ?? '';\n \n \/\/ Check for specific style\n if ( str_contains( $class_name, 'is-style-elevated' ) ) {\n \/\/ Add extra markup for elevated style\n }\n \n return $content;\n}<\/code><\/pre><\/div>In JavaScript:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { className } = attributes;\n \n const isElevated = className?.includes( 'is-style-elevated' );\n const isBordered = className?.includes( 'is-style-bordered' );\n \n return (\n <div { ...useBlockProps() }>\n { isElevated && <div className="shadow-overlay" \/> }\n {\/* ... *\/}\n <\/div>\n );\n}<\/code><\/pre><\/div>Style Previews<\/h2>Styles appear in the Styles panel with previews. The preview uses your block’s example<\/code>:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "example": {\n "attributes": {\n "title": "Card Title",\n "content": "Preview content for the card."\n }\n },\n "styles": [\n { "name": "default", "label": "Default", "isDefault": true },\n { "name": "bordered", "label": "Bordered" }\n ]\n}<\/code><\/pre><\/div>Best Practices<\/h2>Consistent naming:<\/strong> Use descriptive, lowercase names with hyphens.<\/p><\/li>Always include default:<\/strong> Mark one style as isDefault: true<\/code>.<\/p><\/li>Base styles first:<\/strong> Write base styles that apply to all variations.<\/p><\/li>Use specificity wisely:<\/strong> .block.is-style-name<\/code> is usually enough.<\/p><\/li>Support dark mode:<\/strong> Consider color scheme preferences.<\/p><\/li>Test in editor:<\/strong> Ensure styles render correctly in the block editor.<\/p><\/li>Keep it visual:<\/strong> Styles should create visible differences.<\/p><\/li>Limit options:<\/strong> 3-5 styles is usually plenty.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block styles provide visual variations that users can apply from the block toolbar. Defining Styles in block.json { "styles": [ { "name": "default", "label": "Default", "isDefault": true }, { "name":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5519","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions"}],"predecessor-version":[{"id":8997,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions\/8997"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5519"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5519"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5519"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
isDefault<\/code><\/td>boolean<\/td>Applied by default<\/td><\/tr><\/tbody><\/table><\/figure>How Styles Work<\/h2>When a user selects a style, WordPress adds a class to the block:<\/p><\/span><\/use><\/svg><\/button><\/div>is-style-{style-name}<\/code><\/pre><\/div>For a style named outlined<\/code>:<\/p>html<\/span><\/use><\/svg><\/button><\/div><div class="wp-block-my-plugin-card is-style-outlined">\n ...\n<\/div><\/code><\/pre><\/div>CSS for Block Styles<\/h2>Style your variations in CSS:<\/p>css<\/span><\/use><\/svg><\/button><\/div>\/* Default style (no class needed, but can target explicitly) *\/\n.wp-block-my-plugin-card,\n.wp-block-my-plugin-card.is-style-default {\n border: 1px solid #ddd;\n padding: 20px;\n}\n\n\/* Outlined style *\/\n.wp-block-my-plugin-card.is-style-outlined {\n border: 2px solid currentColor;\n background: transparent;\n}\n\n\/* Shadow style *\/\n.wp-block-my-plugin-card.is-style-shadow {\n border: none;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}<\/code><\/pre><\/div>Editor Preview Styles<\/h2>Ensure styles work in the editor by including them in style.css<\/code> (loads in both editor and frontend) or by adding styles to editorStyle<\/code>.<\/p>JavaScript Registration<\/h2>For more control, register styles in JavaScript:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { registerBlockStyle } from '@wordpress\/blocks';\n\nregisterBlockStyle( 'core\/quote', {\n name: 'fancy',\n label: 'Fancy',\n} );\n\nregisterBlockStyle( 'core\/quote', {\n name: 'modern',\n label: 'Modern',\n isDefault: true,\n} );<\/code><\/pre><\/div>Registering Styles for Core Blocks<\/h2>Add styles to core blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { registerBlockStyle } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Add styles to core\/button\n registerBlockStyle( 'core\/button', {\n name: 'gradient',\n label: 'Gradient',\n } );\n \n \/\/ Add styles to core\/image\n registerBlockStyle( 'core\/image', {\n name: 'rounded',\n label: 'Rounded Corners',\n } );\n \n registerBlockStyle( 'core\/image', {\n name: 'polaroid',\n label: 'Polaroid',\n } );\n} );<\/code><\/pre><\/div>CSS for core block styles:<\/p>css<\/span><\/use><\/svg><\/button><\/div>\/* Gradient button *\/\n.wp-block-button.is-style-gradient .wp-block-button__link {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n border: none;\n}\n\n\/* Rounded image *\/\n.wp-block-image.is-style-rounded img {\n border-radius: 16px;\n}\n\n\/* Polaroid image *\/\n.wp-block-image.is-style-polaroid {\n background: white;\n padding: 12px 12px 40px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n}<\/code><\/pre><\/div>Unregistering Styles<\/h2>Remove existing styles:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { unregisterBlockStyle } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Remove the "plain" style from core\/quote\n unregisterBlockStyle( 'core\/quote', 'plain' );\n \n \/\/ Remove default style from core\/image\n unregisterBlockStyle( 'core\/image', 'default' );\n} );<\/code><\/pre><\/div>PHP Registration<\/h2>Register styles from PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'highlight',\n 'label' => __( 'Highlight', 'my-plugin' ),\n ]\n );\n \n register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'large-text',\n 'label' => __( 'Large Text', 'my-plugin' ),\n 'is_default' => false,\n 'style_handle' => 'my-plugin-block-styles', \/\/ Optional: associated stylesheet\n ]\n );\n} );<\/code><\/pre><\/div>With inline styles:<\/p>php<\/span><\/use><\/svg><\/button><\/div>register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'fancy',\n 'label' => __( 'Fancy', 'my-plugin' ),\n 'inline_style' => '.is-style-fancy { \n font-family: Georgia, serif;\n font-style: italic;\n border-left: 4px solid currentColor;\n padding-left: 1em;\n }',\n ]\n);<\/code><\/pre><\/div>Unregistering Styles in PHP<\/h2>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n unregister_block_style( 'core\/quote', 'plain' );\n} );<\/code><\/pre><\/div>Note: Must run after the style is registered (priority matters).<\/p>Style Variations via theme.json<\/h2>Define styles in theme.json for theme-specific variations:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "version": 2,\n "styles": {\n "blocks": {\n "core\/button": {\n "variations": {\n "outline": {\n "border": {\n "width": "2px",\n "style": "solid",\n "color": "currentColor"\n },\n "color": {\n "background": "transparent"\n }\n }\n }\n }\n }\n }\n}<\/code><\/pre><\/div>Conditional Style Registration<\/h2>Register styles based on context:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n \/\/ Only for themes that support custom styles\n if ( current_theme_supports( 'custom-block-styles' ) ) {\n register_block_style( 'core\/group', [\n 'name' => 'boxed',\n 'label' => __( 'Boxed', 'my-plugin' ),\n ] );\n }\n} );<\/code><\/pre><\/div>Style-Specific Attributes<\/h2>Some styles might need attribute changes. Handle in edit component:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { useEffect } from '@wordpress\/element';\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { className } = attributes;\n \n \/\/ Adjust attributes based on style\n useEffect( () => {\n if ( className?.includes( 'is-style-compact' ) ) {\n setAttributes( { padding: 'small' } );\n }\n }, [ className ] );\n \n \/\/ ...\n}<\/code><\/pre><\/div>Complete Example: Card Block with Styles<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "styles": [\n {\n "name": "default",\n "label": "Default",\n "isDefault": true\n },\n {\n "name": "bordered",\n "label": "Bordered"\n },\n {\n "name": "elevated",\n "label": "Elevated"\n },\n {\n "name": "filled",\n "label": "Filled"\n }\n ],\n "style": "file:.\/style.css",\n "editorScript": "file:.\/index.js"\n}<\/code><\/pre><\/div>css<\/span><\/use><\/svg><\/button><\/div>\/* style.css *\/\n\n\/* Base styles for all cards *\/\n.wp-block-my-plugin-card {\n padding: 24px;\n border-radius: 8px;\n}\n\n\/* Default style *\/\n.wp-block-my-plugin-card.is-style-default {\n background: #ffffff;\n border: 1px solid #e2e8f0;\n}\n\n\/* Bordered style *\/\n.wp-block-my-plugin-card.is-style-bordered {\n background: transparent;\n border: 2px solid currentColor;\n}\n\n\/* Elevated style *\/\n.wp-block-my-plugin-card.is-style-elevated {\n background: #ffffff;\n border: none;\n box-shadow: \n 0 4px 6px -1px rgba(0, 0, 0, 0.1),\n 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n}\n\n\/* Filled style *\/\n.wp-block-my-plugin-card.is-style-filled {\n background: #f1f5f9;\n border: none;\n}\n\n\/* Dark mode support *\/\n@media (prefers-color-scheme: dark) {\n .wp-block-my-plugin-card.is-style-default {\n background: #1e293b;\n border-color: #334155;\n }\n \n .wp-block-my-plugin-card.is-style-elevated {\n background: #1e293b;\n box-shadow: \n 0 4px 6px -1px rgba(0, 0, 0, 0.3),\n 0 2px 4px -1px rgba(0, 0, 0, 0.2);\n }\n \n .wp-block-my-plugin-card.is-style-filled {\n background: #334155;\n }\n}<\/code><\/pre><\/div>Programmatic Style Detection<\/h2>Check active style in PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $class_name = $attributes['className'] ?? '';\n \n \/\/ Check for specific style\n if ( str_contains( $class_name, 'is-style-elevated' ) ) {\n \/\/ Add extra markup for elevated style\n }\n \n return $content;\n}<\/code><\/pre><\/div>In JavaScript:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { className } = attributes;\n \n const isElevated = className?.includes( 'is-style-elevated' );\n const isBordered = className?.includes( 'is-style-bordered' );\n \n return (\n <div { ...useBlockProps() }>\n { isElevated && <div className="shadow-overlay" \/> }\n {\/* ... *\/}\n <\/div>\n );\n}<\/code><\/pre><\/div>Style Previews<\/h2>Styles appear in the Styles panel with previews. The preview uses your block’s example<\/code>:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "example": {\n "attributes": {\n "title": "Card Title",\n "content": "Preview content for the card."\n }\n },\n "styles": [\n { "name": "default", "label": "Default", "isDefault": true },\n { "name": "bordered", "label": "Bordered" }\n ]\n}<\/code><\/pre><\/div>Best Practices<\/h2>Consistent naming:<\/strong> Use descriptive, lowercase names with hyphens.<\/p><\/li>Always include default:<\/strong> Mark one style as isDefault: true<\/code>.<\/p><\/li>Base styles first:<\/strong> Write base styles that apply to all variations.<\/p><\/li>Use specificity wisely:<\/strong> .block.is-style-name<\/code> is usually enough.<\/p><\/li>Support dark mode:<\/strong> Consider color scheme preferences.<\/p><\/li>Test in editor:<\/strong> Ensure styles render correctly in the block editor.<\/p><\/li>Keep it visual:<\/strong> Styles should create visible differences.<\/p><\/li>Limit options:<\/strong> 3-5 styles is usually plenty.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block styles provide visual variations that users can apply from the block toolbar. Defining Styles in block.json { "styles": [ { "name": "default", "label": "Default", "isDefault": true }, { "name":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5519","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions"}],"predecessor-version":[{"id":8997,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions\/8997"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5519"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5519"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5519"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
When a user selects a style, WordPress adds a class to the block:<\/p>
is-style-{style-name}<\/code><\/pre><\/div>For a style named outlined<\/code>:<\/p>html<\/span><\/use><\/svg><\/button><\/div><div class="wp-block-my-plugin-card is-style-outlined">\n ...\n<\/div><\/code><\/pre><\/div>CSS for Block Styles<\/h2>Style your variations in CSS:<\/p>css<\/span><\/use><\/svg><\/button><\/div>\/* Default style (no class needed, but can target explicitly) *\/\n.wp-block-my-plugin-card,\n.wp-block-my-plugin-card.is-style-default {\n border: 1px solid #ddd;\n padding: 20px;\n}\n\n\/* Outlined style *\/\n.wp-block-my-plugin-card.is-style-outlined {\n border: 2px solid currentColor;\n background: transparent;\n}\n\n\/* Shadow style *\/\n.wp-block-my-plugin-card.is-style-shadow {\n border: none;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}<\/code><\/pre><\/div>Editor Preview Styles<\/h2>Ensure styles work in the editor by including them in style.css<\/code> (loads in both editor and frontend) or by adding styles to editorStyle<\/code>.<\/p>JavaScript Registration<\/h2>For more control, register styles in JavaScript:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { registerBlockStyle } from '@wordpress\/blocks';\n\nregisterBlockStyle( 'core\/quote', {\n name: 'fancy',\n label: 'Fancy',\n} );\n\nregisterBlockStyle( 'core\/quote', {\n name: 'modern',\n label: 'Modern',\n isDefault: true,\n} );<\/code><\/pre><\/div>Registering Styles for Core Blocks<\/h2>Add styles to core blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { registerBlockStyle } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Add styles to core\/button\n registerBlockStyle( 'core\/button', {\n name: 'gradient',\n label: 'Gradient',\n } );\n \n \/\/ Add styles to core\/image\n registerBlockStyle( 'core\/image', {\n name: 'rounded',\n label: 'Rounded Corners',\n } );\n \n registerBlockStyle( 'core\/image', {\n name: 'polaroid',\n label: 'Polaroid',\n } );\n} );<\/code><\/pre><\/div>CSS for core block styles:<\/p>css<\/span><\/use><\/svg><\/button><\/div>\/* Gradient button *\/\n.wp-block-button.is-style-gradient .wp-block-button__link {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n border: none;\n}\n\n\/* Rounded image *\/\n.wp-block-image.is-style-rounded img {\n border-radius: 16px;\n}\n\n\/* Polaroid image *\/\n.wp-block-image.is-style-polaroid {\n background: white;\n padding: 12px 12px 40px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n}<\/code><\/pre><\/div>Unregistering Styles<\/h2>Remove existing styles:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { unregisterBlockStyle } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Remove the "plain" style from core\/quote\n unregisterBlockStyle( 'core\/quote', 'plain' );\n \n \/\/ Remove default style from core\/image\n unregisterBlockStyle( 'core\/image', 'default' );\n} );<\/code><\/pre><\/div>PHP Registration<\/h2>Register styles from PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'highlight',\n 'label' => __( 'Highlight', 'my-plugin' ),\n ]\n );\n \n register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'large-text',\n 'label' => __( 'Large Text', 'my-plugin' ),\n 'is_default' => false,\n 'style_handle' => 'my-plugin-block-styles', \/\/ Optional: associated stylesheet\n ]\n );\n} );<\/code><\/pre><\/div>With inline styles:<\/p>php<\/span><\/use><\/svg><\/button><\/div>register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'fancy',\n 'label' => __( 'Fancy', 'my-plugin' ),\n 'inline_style' => '.is-style-fancy { \n font-family: Georgia, serif;\n font-style: italic;\n border-left: 4px solid currentColor;\n padding-left: 1em;\n }',\n ]\n);<\/code><\/pre><\/div>Unregistering Styles in PHP<\/h2>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n unregister_block_style( 'core\/quote', 'plain' );\n} );<\/code><\/pre><\/div>Note: Must run after the style is registered (priority matters).<\/p>Style Variations via theme.json<\/h2>Define styles in theme.json for theme-specific variations:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "version": 2,\n "styles": {\n "blocks": {\n "core\/button": {\n "variations": {\n "outline": {\n "border": {\n "width": "2px",\n "style": "solid",\n "color": "currentColor"\n },\n "color": {\n "background": "transparent"\n }\n }\n }\n }\n }\n }\n}<\/code><\/pre><\/div>Conditional Style Registration<\/h2>Register styles based on context:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n \/\/ Only for themes that support custom styles\n if ( current_theme_supports( 'custom-block-styles' ) ) {\n register_block_style( 'core\/group', [\n 'name' => 'boxed',\n 'label' => __( 'Boxed', 'my-plugin' ),\n ] );\n }\n} );<\/code><\/pre><\/div>Style-Specific Attributes<\/h2>Some styles might need attribute changes. Handle in edit component:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { useEffect } from '@wordpress\/element';\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { className } = attributes;\n \n \/\/ Adjust attributes based on style\n useEffect( () => {\n if ( className?.includes( 'is-style-compact' ) ) {\n setAttributes( { padding: 'small' } );\n }\n }, [ className ] );\n \n \/\/ ...\n}<\/code><\/pre><\/div>Complete Example: Card Block with Styles<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "styles": [\n {\n "name": "default",\n "label": "Default",\n "isDefault": true\n },\n {\n "name": "bordered",\n "label": "Bordered"\n },\n {\n "name": "elevated",\n "label": "Elevated"\n },\n {\n "name": "filled",\n "label": "Filled"\n }\n ],\n "style": "file:.\/style.css",\n "editorScript": "file:.\/index.js"\n}<\/code><\/pre><\/div>css<\/span><\/use><\/svg><\/button><\/div>\/* style.css *\/\n\n\/* Base styles for all cards *\/\n.wp-block-my-plugin-card {\n padding: 24px;\n border-radius: 8px;\n}\n\n\/* Default style *\/\n.wp-block-my-plugin-card.is-style-default {\n background: #ffffff;\n border: 1px solid #e2e8f0;\n}\n\n\/* Bordered style *\/\n.wp-block-my-plugin-card.is-style-bordered {\n background: transparent;\n border: 2px solid currentColor;\n}\n\n\/* Elevated style *\/\n.wp-block-my-plugin-card.is-style-elevated {\n background: #ffffff;\n border: none;\n box-shadow: \n 0 4px 6px -1px rgba(0, 0, 0, 0.1),\n 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n}\n\n\/* Filled style *\/\n.wp-block-my-plugin-card.is-style-filled {\n background: #f1f5f9;\n border: none;\n}\n\n\/* Dark mode support *\/\n@media (prefers-color-scheme: dark) {\n .wp-block-my-plugin-card.is-style-default {\n background: #1e293b;\n border-color: #334155;\n }\n \n .wp-block-my-plugin-card.is-style-elevated {\n background: #1e293b;\n box-shadow: \n 0 4px 6px -1px rgba(0, 0, 0, 0.3),\n 0 2px 4px -1px rgba(0, 0, 0, 0.2);\n }\n \n .wp-block-my-plugin-card.is-style-filled {\n background: #334155;\n }\n}<\/code><\/pre><\/div>Programmatic Style Detection<\/h2>Check active style in PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $class_name = $attributes['className'] ?? '';\n \n \/\/ Check for specific style\n if ( str_contains( $class_name, 'is-style-elevated' ) ) {\n \/\/ Add extra markup for elevated style\n }\n \n return $content;\n}<\/code><\/pre><\/div>In JavaScript:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { className } = attributes;\n \n const isElevated = className?.includes( 'is-style-elevated' );\n const isBordered = className?.includes( 'is-style-bordered' );\n \n return (\n <div { ...useBlockProps() }>\n { isElevated && <div className="shadow-overlay" \/> }\n {\/* ... *\/}\n <\/div>\n );\n}<\/code><\/pre><\/div>Style Previews<\/h2>Styles appear in the Styles panel with previews. The preview uses your block’s example<\/code>:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "example": {\n "attributes": {\n "title": "Card Title",\n "content": "Preview content for the card."\n }\n },\n "styles": [\n { "name": "default", "label": "Default", "isDefault": true },\n { "name": "bordered", "label": "Bordered" }\n ]\n}<\/code><\/pre><\/div>Best Practices<\/h2>Consistent naming:<\/strong> Use descriptive, lowercase names with hyphens.<\/p><\/li>Always include default:<\/strong> Mark one style as isDefault: true<\/code>.<\/p><\/li>Base styles first:<\/strong> Write base styles that apply to all variations.<\/p><\/li>Use specificity wisely:<\/strong> .block.is-style-name<\/code> is usually enough.<\/p><\/li>Support dark mode:<\/strong> Consider color scheme preferences.<\/p><\/li>Test in editor:<\/strong> Ensure styles render correctly in the block editor.<\/p><\/li>Keep it visual:<\/strong> Styles should create visible differences.<\/p><\/li>Limit options:<\/strong> 3-5 styles is usually plenty.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block styles provide visual variations that users can apply from the block toolbar. Defining Styles in block.json { "styles": [ { "name": "default", "label": "Default", "isDefault": true }, { "name":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5519","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions"}],"predecessor-version":[{"id":8997,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions\/8997"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5519"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5519"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5519"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
For a style named outlined<\/code>:<\/p>html<\/span><\/use><\/svg><\/button><\/div><div class="wp-block-my-plugin-card is-style-outlined">\n ...\n<\/div><\/code><\/pre><\/div>CSS for Block Styles<\/h2>Style your variations in CSS:<\/p>css<\/span><\/use><\/svg><\/button><\/div>\/* Default style (no class needed, but can target explicitly) *\/\n.wp-block-my-plugin-card,\n.wp-block-my-plugin-card.is-style-default {\n border: 1px solid #ddd;\n padding: 20px;\n}\n\n\/* Outlined style *\/\n.wp-block-my-plugin-card.is-style-outlined {\n border: 2px solid currentColor;\n background: transparent;\n}\n\n\/* Shadow style *\/\n.wp-block-my-plugin-card.is-style-shadow {\n border: none;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}<\/code><\/pre><\/div>Editor Preview Styles<\/h2>Ensure styles work in the editor by including them in style.css<\/code> (loads in both editor and frontend) or by adding styles to editorStyle<\/code>.<\/p>JavaScript Registration<\/h2>For more control, register styles in JavaScript:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { registerBlockStyle } from '@wordpress\/blocks';\n\nregisterBlockStyle( 'core\/quote', {\n name: 'fancy',\n label: 'Fancy',\n} );\n\nregisterBlockStyle( 'core\/quote', {\n name: 'modern',\n label: 'Modern',\n isDefault: true,\n} );<\/code><\/pre><\/div>Registering Styles for Core Blocks<\/h2>Add styles to core blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { registerBlockStyle } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Add styles to core\/button\n registerBlockStyle( 'core\/button', {\n name: 'gradient',\n label: 'Gradient',\n } );\n \n \/\/ Add styles to core\/image\n registerBlockStyle( 'core\/image', {\n name: 'rounded',\n label: 'Rounded Corners',\n } );\n \n registerBlockStyle( 'core\/image', {\n name: 'polaroid',\n label: 'Polaroid',\n } );\n} );<\/code><\/pre><\/div>CSS for core block styles:<\/p>css<\/span><\/use><\/svg><\/button><\/div>\/* Gradient button *\/\n.wp-block-button.is-style-gradient .wp-block-button__link {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n border: none;\n}\n\n\/* Rounded image *\/\n.wp-block-image.is-style-rounded img {\n border-radius: 16px;\n}\n\n\/* Polaroid image *\/\n.wp-block-image.is-style-polaroid {\n background: white;\n padding: 12px 12px 40px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n}<\/code><\/pre><\/div>Unregistering Styles<\/h2>Remove existing styles:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { unregisterBlockStyle } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Remove the "plain" style from core\/quote\n unregisterBlockStyle( 'core\/quote', 'plain' );\n \n \/\/ Remove default style from core\/image\n unregisterBlockStyle( 'core\/image', 'default' );\n} );<\/code><\/pre><\/div>PHP Registration<\/h2>Register styles from PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'highlight',\n 'label' => __( 'Highlight', 'my-plugin' ),\n ]\n );\n \n register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'large-text',\n 'label' => __( 'Large Text', 'my-plugin' ),\n 'is_default' => false,\n 'style_handle' => 'my-plugin-block-styles', \/\/ Optional: associated stylesheet\n ]\n );\n} );<\/code><\/pre><\/div>With inline styles:<\/p>php<\/span><\/use><\/svg><\/button><\/div>register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'fancy',\n 'label' => __( 'Fancy', 'my-plugin' ),\n 'inline_style' => '.is-style-fancy { \n font-family: Georgia, serif;\n font-style: italic;\n border-left: 4px solid currentColor;\n padding-left: 1em;\n }',\n ]\n);<\/code><\/pre><\/div>Unregistering Styles in PHP<\/h2>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n unregister_block_style( 'core\/quote', 'plain' );\n} );<\/code><\/pre><\/div>Note: Must run after the style is registered (priority matters).<\/p>Style Variations via theme.json<\/h2>Define styles in theme.json for theme-specific variations:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "version": 2,\n "styles": {\n "blocks": {\n "core\/button": {\n "variations": {\n "outline": {\n "border": {\n "width": "2px",\n "style": "solid",\n "color": "currentColor"\n },\n "color": {\n "background": "transparent"\n }\n }\n }\n }\n }\n }\n}<\/code><\/pre><\/div>Conditional Style Registration<\/h2>Register styles based on context:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n \/\/ Only for themes that support custom styles\n if ( current_theme_supports( 'custom-block-styles' ) ) {\n register_block_style( 'core\/group', [\n 'name' => 'boxed',\n 'label' => __( 'Boxed', 'my-plugin' ),\n ] );\n }\n} );<\/code><\/pre><\/div>Style-Specific Attributes<\/h2>Some styles might need attribute changes. Handle in edit component:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { useEffect } from '@wordpress\/element';\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { className } = attributes;\n \n \/\/ Adjust attributes based on style\n useEffect( () => {\n if ( className?.includes( 'is-style-compact' ) ) {\n setAttributes( { padding: 'small' } );\n }\n }, [ className ] );\n \n \/\/ ...\n}<\/code><\/pre><\/div>Complete Example: Card Block with Styles<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "styles": [\n {\n "name": "default",\n "label": "Default",\n "isDefault": true\n },\n {\n "name": "bordered",\n "label": "Bordered"\n },\n {\n "name": "elevated",\n "label": "Elevated"\n },\n {\n "name": "filled",\n "label": "Filled"\n }\n ],\n "style": "file:.\/style.css",\n "editorScript": "file:.\/index.js"\n}<\/code><\/pre><\/div>css<\/span><\/use><\/svg><\/button><\/div>\/* style.css *\/\n\n\/* Base styles for all cards *\/\n.wp-block-my-plugin-card {\n padding: 24px;\n border-radius: 8px;\n}\n\n\/* Default style *\/\n.wp-block-my-plugin-card.is-style-default {\n background: #ffffff;\n border: 1px solid #e2e8f0;\n}\n\n\/* Bordered style *\/\n.wp-block-my-plugin-card.is-style-bordered {\n background: transparent;\n border: 2px solid currentColor;\n}\n\n\/* Elevated style *\/\n.wp-block-my-plugin-card.is-style-elevated {\n background: #ffffff;\n border: none;\n box-shadow: \n 0 4px 6px -1px rgba(0, 0, 0, 0.1),\n 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n}\n\n\/* Filled style *\/\n.wp-block-my-plugin-card.is-style-filled {\n background: #f1f5f9;\n border: none;\n}\n\n\/* Dark mode support *\/\n@media (prefers-color-scheme: dark) {\n .wp-block-my-plugin-card.is-style-default {\n background: #1e293b;\n border-color: #334155;\n }\n \n .wp-block-my-plugin-card.is-style-elevated {\n background: #1e293b;\n box-shadow: \n 0 4px 6px -1px rgba(0, 0, 0, 0.3),\n 0 2px 4px -1px rgba(0, 0, 0, 0.2);\n }\n \n .wp-block-my-plugin-card.is-style-filled {\n background: #334155;\n }\n}<\/code><\/pre><\/div>Programmatic Style Detection<\/h2>Check active style in PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $class_name = $attributes['className'] ?? '';\n \n \/\/ Check for specific style\n if ( str_contains( $class_name, 'is-style-elevated' ) ) {\n \/\/ Add extra markup for elevated style\n }\n \n return $content;\n}<\/code><\/pre><\/div>In JavaScript:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { className } = attributes;\n \n const isElevated = className?.includes( 'is-style-elevated' );\n const isBordered = className?.includes( 'is-style-bordered' );\n \n return (\n <div { ...useBlockProps() }>\n { isElevated && <div className="shadow-overlay" \/> }\n {\/* ... *\/}\n <\/div>\n );\n}<\/code><\/pre><\/div>Style Previews<\/h2>Styles appear in the Styles panel with previews. The preview uses your block’s example<\/code>:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "example": {\n "attributes": {\n "title": "Card Title",\n "content": "Preview content for the card."\n }\n },\n "styles": [\n { "name": "default", "label": "Default", "isDefault": true },\n { "name": "bordered", "label": "Bordered" }\n ]\n}<\/code><\/pre><\/div>Best Practices<\/h2>Consistent naming:<\/strong> Use descriptive, lowercase names with hyphens.<\/p><\/li>Always include default:<\/strong> Mark one style as isDefault: true<\/code>.<\/p><\/li>Base styles first:<\/strong> Write base styles that apply to all variations.<\/p><\/li>Use specificity wisely:<\/strong> .block.is-style-name<\/code> is usually enough.<\/p><\/li>Support dark mode:<\/strong> Consider color scheme preferences.<\/p><\/li>Test in editor:<\/strong> Ensure styles render correctly in the block editor.<\/p><\/li>Keep it visual:<\/strong> Styles should create visible differences.<\/p><\/li>Limit options:<\/strong> 3-5 styles is usually plenty.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block styles provide visual variations that users can apply from the block toolbar. Defining Styles in block.json { "styles": [ { "name": "default", "label": "Default", "isDefault": true }, { "name":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5519","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions"}],"predecessor-version":[{"id":8997,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions\/8997"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5519"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5519"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5519"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
outlined<\/code>:<\/p>html<\/span><\/use><\/svg><\/button><\/div><div class="wp-block-my-plugin-card is-style-outlined">\n ...\n<\/div><\/code><\/pre><\/div>CSS for Block Styles<\/h2>Style your variations in CSS:<\/p>css<\/span><\/use><\/svg><\/button><\/div>\/* Default style (no class needed, but can target explicitly) *\/\n.wp-block-my-plugin-card,\n.wp-block-my-plugin-card.is-style-default {\n border: 1px solid #ddd;\n padding: 20px;\n}\n\n\/* Outlined style *\/\n.wp-block-my-plugin-card.is-style-outlined {\n border: 2px solid currentColor;\n background: transparent;\n}\n\n\/* Shadow style *\/\n.wp-block-my-plugin-card.is-style-shadow {\n border: none;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}<\/code><\/pre><\/div>Editor Preview Styles<\/h2>Ensure styles work in the editor by including them in style.css<\/code> (loads in both editor and frontend) or by adding styles to editorStyle<\/code>.<\/p>JavaScript Registration<\/h2>For more control, register styles in JavaScript:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { registerBlockStyle } from '@wordpress\/blocks';\n\nregisterBlockStyle( 'core\/quote', {\n name: 'fancy',\n label: 'Fancy',\n} );\n\nregisterBlockStyle( 'core\/quote', {\n name: 'modern',\n label: 'Modern',\n isDefault: true,\n} );<\/code><\/pre><\/div>Registering Styles for Core Blocks<\/h2>Add styles to core blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { registerBlockStyle } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Add styles to core\/button\n registerBlockStyle( 'core\/button', {\n name: 'gradient',\n label: 'Gradient',\n } );\n \n \/\/ Add styles to core\/image\n registerBlockStyle( 'core\/image', {\n name: 'rounded',\n label: 'Rounded Corners',\n } );\n \n registerBlockStyle( 'core\/image', {\n name: 'polaroid',\n label: 'Polaroid',\n } );\n} );<\/code><\/pre><\/div>CSS for core block styles:<\/p>css<\/span><\/use><\/svg><\/button><\/div>\/* Gradient button *\/\n.wp-block-button.is-style-gradient .wp-block-button__link {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n border: none;\n}\n\n\/* Rounded image *\/\n.wp-block-image.is-style-rounded img {\n border-radius: 16px;\n}\n\n\/* Polaroid image *\/\n.wp-block-image.is-style-polaroid {\n background: white;\n padding: 12px 12px 40px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n}<\/code><\/pre><\/div>Unregistering Styles<\/h2>Remove existing styles:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { unregisterBlockStyle } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Remove the "plain" style from core\/quote\n unregisterBlockStyle( 'core\/quote', 'plain' );\n \n \/\/ Remove default style from core\/image\n unregisterBlockStyle( 'core\/image', 'default' );\n} );<\/code><\/pre><\/div>PHP Registration<\/h2>Register styles from PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'highlight',\n 'label' => __( 'Highlight', 'my-plugin' ),\n ]\n );\n \n register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'large-text',\n 'label' => __( 'Large Text', 'my-plugin' ),\n 'is_default' => false,\n 'style_handle' => 'my-plugin-block-styles', \/\/ Optional: associated stylesheet\n ]\n );\n} );<\/code><\/pre><\/div>With inline styles:<\/p>php<\/span><\/use><\/svg><\/button><\/div>register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'fancy',\n 'label' => __( 'Fancy', 'my-plugin' ),\n 'inline_style' => '.is-style-fancy { \n font-family: Georgia, serif;\n font-style: italic;\n border-left: 4px solid currentColor;\n padding-left: 1em;\n }',\n ]\n);<\/code><\/pre><\/div>Unregistering Styles in PHP<\/h2>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n unregister_block_style( 'core\/quote', 'plain' );\n} );<\/code><\/pre><\/div>Note: Must run after the style is registered (priority matters).<\/p>Style Variations via theme.json<\/h2>Define styles in theme.json for theme-specific variations:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "version": 2,\n "styles": {\n "blocks": {\n "core\/button": {\n "variations": {\n "outline": {\n "border": {\n "width": "2px",\n "style": "solid",\n "color": "currentColor"\n },\n "color": {\n "background": "transparent"\n }\n }\n }\n }\n }\n }\n}<\/code><\/pre><\/div>Conditional Style Registration<\/h2>Register styles based on context:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n \/\/ Only for themes that support custom styles\n if ( current_theme_supports( 'custom-block-styles' ) ) {\n register_block_style( 'core\/group', [\n 'name' => 'boxed',\n 'label' => __( 'Boxed', 'my-plugin' ),\n ] );\n }\n} );<\/code><\/pre><\/div>Style-Specific Attributes<\/h2>Some styles might need attribute changes. Handle in edit component:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { useEffect } from '@wordpress\/element';\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { className } = attributes;\n \n \/\/ Adjust attributes based on style\n useEffect( () => {\n if ( className?.includes( 'is-style-compact' ) ) {\n setAttributes( { padding: 'small' } );\n }\n }, [ className ] );\n \n \/\/ ...\n}<\/code><\/pre><\/div>Complete Example: Card Block with Styles<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "styles": [\n {\n "name": "default",\n "label": "Default",\n "isDefault": true\n },\n {\n "name": "bordered",\n "label": "Bordered"\n },\n {\n "name": "elevated",\n "label": "Elevated"\n },\n {\n "name": "filled",\n "label": "Filled"\n }\n ],\n "style": "file:.\/style.css",\n "editorScript": "file:.\/index.js"\n}<\/code><\/pre><\/div>css<\/span><\/use><\/svg><\/button><\/div>\/* style.css *\/\n\n\/* Base styles for all cards *\/\n.wp-block-my-plugin-card {\n padding: 24px;\n border-radius: 8px;\n}\n\n\/* Default style *\/\n.wp-block-my-plugin-card.is-style-default {\n background: #ffffff;\n border: 1px solid #e2e8f0;\n}\n\n\/* Bordered style *\/\n.wp-block-my-plugin-card.is-style-bordered {\n background: transparent;\n border: 2px solid currentColor;\n}\n\n\/* Elevated style *\/\n.wp-block-my-plugin-card.is-style-elevated {\n background: #ffffff;\n border: none;\n box-shadow: \n 0 4px 6px -1px rgba(0, 0, 0, 0.1),\n 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n}\n\n\/* Filled style *\/\n.wp-block-my-plugin-card.is-style-filled {\n background: #f1f5f9;\n border: none;\n}\n\n\/* Dark mode support *\/\n@media (prefers-color-scheme: dark) {\n .wp-block-my-plugin-card.is-style-default {\n background: #1e293b;\n border-color: #334155;\n }\n \n .wp-block-my-plugin-card.is-style-elevated {\n background: #1e293b;\n box-shadow: \n 0 4px 6px -1px rgba(0, 0, 0, 0.3),\n 0 2px 4px -1px rgba(0, 0, 0, 0.2);\n }\n \n .wp-block-my-plugin-card.is-style-filled {\n background: #334155;\n }\n}<\/code><\/pre><\/div>Programmatic Style Detection<\/h2>Check active style in PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $class_name = $attributes['className'] ?? '';\n \n \/\/ Check for specific style\n if ( str_contains( $class_name, 'is-style-elevated' ) ) {\n \/\/ Add extra markup for elevated style\n }\n \n return $content;\n}<\/code><\/pre><\/div>In JavaScript:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { className } = attributes;\n \n const isElevated = className?.includes( 'is-style-elevated' );\n const isBordered = className?.includes( 'is-style-bordered' );\n \n return (\n <div { ...useBlockProps() }>\n { isElevated && <div className="shadow-overlay" \/> }\n {\/* ... *\/}\n <\/div>\n );\n}<\/code><\/pre><\/div>Style Previews<\/h2>Styles appear in the Styles panel with previews. The preview uses your block’s example<\/code>:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "example": {\n "attributes": {\n "title": "Card Title",\n "content": "Preview content for the card."\n }\n },\n "styles": [\n { "name": "default", "label": "Default", "isDefault": true },\n { "name": "bordered", "label": "Bordered" }\n ]\n}<\/code><\/pre><\/div>Best Practices<\/h2>Consistent naming:<\/strong> Use descriptive, lowercase names with hyphens.<\/p><\/li>Always include default:<\/strong> Mark one style as isDefault: true<\/code>.<\/p><\/li>Base styles first:<\/strong> Write base styles that apply to all variations.<\/p><\/li>Use specificity wisely:<\/strong> .block.is-style-name<\/code> is usually enough.<\/p><\/li>Support dark mode:<\/strong> Consider color scheme preferences.<\/p><\/li>Test in editor:<\/strong> Ensure styles render correctly in the block editor.<\/p><\/li>Keep it visual:<\/strong> Styles should create visible differences.<\/p><\/li>Limit options:<\/strong> 3-5 styles is usually plenty.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block styles provide visual variations that users can apply from the block toolbar. Defining Styles in block.json { "styles": [ { "name": "default", "label": "Default", "isDefault": true }, { "name":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5519","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions"}],"predecessor-version":[{"id":8997,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions\/8997"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5519"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5519"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5519"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<div class="wp-block-my-plugin-card is-style-outlined">\n ...\n<\/div><\/code><\/pre><\/div>CSS for Block Styles<\/h2>Style your variations in CSS:<\/p>css<\/span><\/use><\/svg><\/button><\/div>\/* Default style (no class needed, but can target explicitly) *\/\n.wp-block-my-plugin-card,\n.wp-block-my-plugin-card.is-style-default {\n border: 1px solid #ddd;\n padding: 20px;\n}\n\n\/* Outlined style *\/\n.wp-block-my-plugin-card.is-style-outlined {\n border: 2px solid currentColor;\n background: transparent;\n}\n\n\/* Shadow style *\/\n.wp-block-my-plugin-card.is-style-shadow {\n border: none;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}<\/code><\/pre><\/div>Editor Preview Styles<\/h2>Ensure styles work in the editor by including them in style.css<\/code> (loads in both editor and frontend) or by adding styles to editorStyle<\/code>.<\/p>JavaScript Registration<\/h2>For more control, register styles in JavaScript:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { registerBlockStyle } from '@wordpress\/blocks';\n\nregisterBlockStyle( 'core\/quote', {\n name: 'fancy',\n label: 'Fancy',\n} );\n\nregisterBlockStyle( 'core\/quote', {\n name: 'modern',\n label: 'Modern',\n isDefault: true,\n} );<\/code><\/pre><\/div>Registering Styles for Core Blocks<\/h2>Add styles to core blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { registerBlockStyle } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Add styles to core\/button\n registerBlockStyle( 'core\/button', {\n name: 'gradient',\n label: 'Gradient',\n } );\n \n \/\/ Add styles to core\/image\n registerBlockStyle( 'core\/image', {\n name: 'rounded',\n label: 'Rounded Corners',\n } );\n \n registerBlockStyle( 'core\/image', {\n name: 'polaroid',\n label: 'Polaroid',\n } );\n} );<\/code><\/pre><\/div>CSS for core block styles:<\/p>css<\/span><\/use><\/svg><\/button><\/div>\/* Gradient button *\/\n.wp-block-button.is-style-gradient .wp-block-button__link {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n border: none;\n}\n\n\/* Rounded image *\/\n.wp-block-image.is-style-rounded img {\n border-radius: 16px;\n}\n\n\/* Polaroid image *\/\n.wp-block-image.is-style-polaroid {\n background: white;\n padding: 12px 12px 40px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n}<\/code><\/pre><\/div>Unregistering Styles<\/h2>Remove existing styles:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { unregisterBlockStyle } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Remove the "plain" style from core\/quote\n unregisterBlockStyle( 'core\/quote', 'plain' );\n \n \/\/ Remove default style from core\/image\n unregisterBlockStyle( 'core\/image', 'default' );\n} );<\/code><\/pre><\/div>PHP Registration<\/h2>Register styles from PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'highlight',\n 'label' => __( 'Highlight', 'my-plugin' ),\n ]\n );\n \n register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'large-text',\n 'label' => __( 'Large Text', 'my-plugin' ),\n 'is_default' => false,\n 'style_handle' => 'my-plugin-block-styles', \/\/ Optional: associated stylesheet\n ]\n );\n} );<\/code><\/pre><\/div>With inline styles:<\/p>php<\/span><\/use><\/svg><\/button><\/div>register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'fancy',\n 'label' => __( 'Fancy', 'my-plugin' ),\n 'inline_style' => '.is-style-fancy { \n font-family: Georgia, serif;\n font-style: italic;\n border-left: 4px solid currentColor;\n padding-left: 1em;\n }',\n ]\n);<\/code><\/pre><\/div>Unregistering Styles in PHP<\/h2>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n unregister_block_style( 'core\/quote', 'plain' );\n} );<\/code><\/pre><\/div>Note: Must run after the style is registered (priority matters).<\/p>Style Variations via theme.json<\/h2>Define styles in theme.json for theme-specific variations:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "version": 2,\n "styles": {\n "blocks": {\n "core\/button": {\n "variations": {\n "outline": {\n "border": {\n "width": "2px",\n "style": "solid",\n "color": "currentColor"\n },\n "color": {\n "background": "transparent"\n }\n }\n }\n }\n }\n }\n}<\/code><\/pre><\/div>Conditional Style Registration<\/h2>Register styles based on context:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n \/\/ Only for themes that support custom styles\n if ( current_theme_supports( 'custom-block-styles' ) ) {\n register_block_style( 'core\/group', [\n 'name' => 'boxed',\n 'label' => __( 'Boxed', 'my-plugin' ),\n ] );\n }\n} );<\/code><\/pre><\/div>Style-Specific Attributes<\/h2>Some styles might need attribute changes. Handle in edit component:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { useEffect } from '@wordpress\/element';\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { className } = attributes;\n \n \/\/ Adjust attributes based on style\n useEffect( () => {\n if ( className?.includes( 'is-style-compact' ) ) {\n setAttributes( { padding: 'small' } );\n }\n }, [ className ] );\n \n \/\/ ...\n}<\/code><\/pre><\/div>Complete Example: Card Block with Styles<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "styles": [\n {\n "name": "default",\n "label": "Default",\n "isDefault": true\n },\n {\n "name": "bordered",\n "label": "Bordered"\n },\n {\n "name": "elevated",\n "label": "Elevated"\n },\n {\n "name": "filled",\n "label": "Filled"\n }\n ],\n "style": "file:.\/style.css",\n "editorScript": "file:.\/index.js"\n}<\/code><\/pre><\/div>css<\/span><\/use><\/svg><\/button><\/div>\/* style.css *\/\n\n\/* Base styles for all cards *\/\n.wp-block-my-plugin-card {\n padding: 24px;\n border-radius: 8px;\n}\n\n\/* Default style *\/\n.wp-block-my-plugin-card.is-style-default {\n background: #ffffff;\n border: 1px solid #e2e8f0;\n}\n\n\/* Bordered style *\/\n.wp-block-my-plugin-card.is-style-bordered {\n background: transparent;\n border: 2px solid currentColor;\n}\n\n\/* Elevated style *\/\n.wp-block-my-plugin-card.is-style-elevated {\n background: #ffffff;\n border: none;\n box-shadow: \n 0 4px 6px -1px rgba(0, 0, 0, 0.1),\n 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n}\n\n\/* Filled style *\/\n.wp-block-my-plugin-card.is-style-filled {\n background: #f1f5f9;\n border: none;\n}\n\n\/* Dark mode support *\/\n@media (prefers-color-scheme: dark) {\n .wp-block-my-plugin-card.is-style-default {\n background: #1e293b;\n border-color: #334155;\n }\n \n .wp-block-my-plugin-card.is-style-elevated {\n background: #1e293b;\n box-shadow: \n 0 4px 6px -1px rgba(0, 0, 0, 0.3),\n 0 2px 4px -1px rgba(0, 0, 0, 0.2);\n }\n \n .wp-block-my-plugin-card.is-style-filled {\n background: #334155;\n }\n}<\/code><\/pre><\/div>Programmatic Style Detection<\/h2>Check active style in PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $class_name = $attributes['className'] ?? '';\n \n \/\/ Check for specific style\n if ( str_contains( $class_name, 'is-style-elevated' ) ) {\n \/\/ Add extra markup for elevated style\n }\n \n return $content;\n}<\/code><\/pre><\/div>In JavaScript:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { className } = attributes;\n \n const isElevated = className?.includes( 'is-style-elevated' );\n const isBordered = className?.includes( 'is-style-bordered' );\n \n return (\n <div { ...useBlockProps() }>\n { isElevated && <div className="shadow-overlay" \/> }\n {\/* ... *\/}\n <\/div>\n );\n}<\/code><\/pre><\/div>Style Previews<\/h2>Styles appear in the Styles panel with previews. The preview uses your block’s example<\/code>:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "example": {\n "attributes": {\n "title": "Card Title",\n "content": "Preview content for the card."\n }\n },\n "styles": [\n { "name": "default", "label": "Default", "isDefault": true },\n { "name": "bordered", "label": "Bordered" }\n ]\n}<\/code><\/pre><\/div>Best Practices<\/h2>Consistent naming:<\/strong> Use descriptive, lowercase names with hyphens.<\/p><\/li>Always include default:<\/strong> Mark one style as isDefault: true<\/code>.<\/p><\/li>Base styles first:<\/strong> Write base styles that apply to all variations.<\/p><\/li>Use specificity wisely:<\/strong> .block.is-style-name<\/code> is usually enough.<\/p><\/li>Support dark mode:<\/strong> Consider color scheme preferences.<\/p><\/li>Test in editor:<\/strong> Ensure styles render correctly in the block editor.<\/p><\/li>Keep it visual:<\/strong> Styles should create visible differences.<\/p><\/li>Limit options:<\/strong> 3-5 styles is usually plenty.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block styles provide visual variations that users can apply from the block toolbar. Defining Styles in block.json { "styles": [ { "name": "default", "label": "Default", "isDefault": true }, { "name":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5519","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions"}],"predecessor-version":[{"id":8997,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions\/8997"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5519"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5519"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5519"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Style your variations in CSS:<\/p>
\/* Default style (no class needed, but can target explicitly) *\/\n.wp-block-my-plugin-card,\n.wp-block-my-plugin-card.is-style-default {\n border: 1px solid #ddd;\n padding: 20px;\n}\n\n\/* Outlined style *\/\n.wp-block-my-plugin-card.is-style-outlined {\n border: 2px solid currentColor;\n background: transparent;\n}\n\n\/* Shadow style *\/\n.wp-block-my-plugin-card.is-style-shadow {\n border: none;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}<\/code><\/pre><\/div>Editor Preview Styles<\/h2>Ensure styles work in the editor by including them in style.css<\/code> (loads in both editor and frontend) or by adding styles to editorStyle<\/code>.<\/p>JavaScript Registration<\/h2>For more control, register styles in JavaScript:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { registerBlockStyle } from '@wordpress\/blocks';\n\nregisterBlockStyle( 'core\/quote', {\n name: 'fancy',\n label: 'Fancy',\n} );\n\nregisterBlockStyle( 'core\/quote', {\n name: 'modern',\n label: 'Modern',\n isDefault: true,\n} );<\/code><\/pre><\/div>Registering Styles for Core Blocks<\/h2>Add styles to core blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { registerBlockStyle } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Add styles to core\/button\n registerBlockStyle( 'core\/button', {\n name: 'gradient',\n label: 'Gradient',\n } );\n \n \/\/ Add styles to core\/image\n registerBlockStyle( 'core\/image', {\n name: 'rounded',\n label: 'Rounded Corners',\n } );\n \n registerBlockStyle( 'core\/image', {\n name: 'polaroid',\n label: 'Polaroid',\n } );\n} );<\/code><\/pre><\/div>CSS for core block styles:<\/p>css<\/span><\/use><\/svg><\/button><\/div>\/* Gradient button *\/\n.wp-block-button.is-style-gradient .wp-block-button__link {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n border: none;\n}\n\n\/* Rounded image *\/\n.wp-block-image.is-style-rounded img {\n border-radius: 16px;\n}\n\n\/* Polaroid image *\/\n.wp-block-image.is-style-polaroid {\n background: white;\n padding: 12px 12px 40px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n}<\/code><\/pre><\/div>Unregistering Styles<\/h2>Remove existing styles:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { unregisterBlockStyle } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Remove the "plain" style from core\/quote\n unregisterBlockStyle( 'core\/quote', 'plain' );\n \n \/\/ Remove default style from core\/image\n unregisterBlockStyle( 'core\/image', 'default' );\n} );<\/code><\/pre><\/div>PHP Registration<\/h2>Register styles from PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'highlight',\n 'label' => __( 'Highlight', 'my-plugin' ),\n ]\n );\n \n register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'large-text',\n 'label' => __( 'Large Text', 'my-plugin' ),\n 'is_default' => false,\n 'style_handle' => 'my-plugin-block-styles', \/\/ Optional: associated stylesheet\n ]\n );\n} );<\/code><\/pre><\/div>With inline styles:<\/p>php<\/span><\/use><\/svg><\/button><\/div>register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'fancy',\n 'label' => __( 'Fancy', 'my-plugin' ),\n 'inline_style' => '.is-style-fancy { \n font-family: Georgia, serif;\n font-style: italic;\n border-left: 4px solid currentColor;\n padding-left: 1em;\n }',\n ]\n);<\/code><\/pre><\/div>Unregistering Styles in PHP<\/h2>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n unregister_block_style( 'core\/quote', 'plain' );\n} );<\/code><\/pre><\/div>Note: Must run after the style is registered (priority matters).<\/p>Style Variations via theme.json<\/h2>Define styles in theme.json for theme-specific variations:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "version": 2,\n "styles": {\n "blocks": {\n "core\/button": {\n "variations": {\n "outline": {\n "border": {\n "width": "2px",\n "style": "solid",\n "color": "currentColor"\n },\n "color": {\n "background": "transparent"\n }\n }\n }\n }\n }\n }\n}<\/code><\/pre><\/div>Conditional Style Registration<\/h2>Register styles based on context:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n \/\/ Only for themes that support custom styles\n if ( current_theme_supports( 'custom-block-styles' ) ) {\n register_block_style( 'core\/group', [\n 'name' => 'boxed',\n 'label' => __( 'Boxed', 'my-plugin' ),\n ] );\n }\n} );<\/code><\/pre><\/div>Style-Specific Attributes<\/h2>Some styles might need attribute changes. Handle in edit component:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { useEffect } from '@wordpress\/element';\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { className } = attributes;\n \n \/\/ Adjust attributes based on style\n useEffect( () => {\n if ( className?.includes( 'is-style-compact' ) ) {\n setAttributes( { padding: 'small' } );\n }\n }, [ className ] );\n \n \/\/ ...\n}<\/code><\/pre><\/div>Complete Example: Card Block with Styles<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "styles": [\n {\n "name": "default",\n "label": "Default",\n "isDefault": true\n },\n {\n "name": "bordered",\n "label": "Bordered"\n },\n {\n "name": "elevated",\n "label": "Elevated"\n },\n {\n "name": "filled",\n "label": "Filled"\n }\n ],\n "style": "file:.\/style.css",\n "editorScript": "file:.\/index.js"\n}<\/code><\/pre><\/div>css<\/span><\/use><\/svg><\/button><\/div>\/* style.css *\/\n\n\/* Base styles for all cards *\/\n.wp-block-my-plugin-card {\n padding: 24px;\n border-radius: 8px;\n}\n\n\/* Default style *\/\n.wp-block-my-plugin-card.is-style-default {\n background: #ffffff;\n border: 1px solid #e2e8f0;\n}\n\n\/* Bordered style *\/\n.wp-block-my-plugin-card.is-style-bordered {\n background: transparent;\n border: 2px solid currentColor;\n}\n\n\/* Elevated style *\/\n.wp-block-my-plugin-card.is-style-elevated {\n background: #ffffff;\n border: none;\n box-shadow: \n 0 4px 6px -1px rgba(0, 0, 0, 0.1),\n 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n}\n\n\/* Filled style *\/\n.wp-block-my-plugin-card.is-style-filled {\n background: #f1f5f9;\n border: none;\n}\n\n\/* Dark mode support *\/\n@media (prefers-color-scheme: dark) {\n .wp-block-my-plugin-card.is-style-default {\n background: #1e293b;\n border-color: #334155;\n }\n \n .wp-block-my-plugin-card.is-style-elevated {\n background: #1e293b;\n box-shadow: \n 0 4px 6px -1px rgba(0, 0, 0, 0.3),\n 0 2px 4px -1px rgba(0, 0, 0, 0.2);\n }\n \n .wp-block-my-plugin-card.is-style-filled {\n background: #334155;\n }\n}<\/code><\/pre><\/div>Programmatic Style Detection<\/h2>Check active style in PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $class_name = $attributes['className'] ?? '';\n \n \/\/ Check for specific style\n if ( str_contains( $class_name, 'is-style-elevated' ) ) {\n \/\/ Add extra markup for elevated style\n }\n \n return $content;\n}<\/code><\/pre><\/div>In JavaScript:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { className } = attributes;\n \n const isElevated = className?.includes( 'is-style-elevated' );\n const isBordered = className?.includes( 'is-style-bordered' );\n \n return (\n <div { ...useBlockProps() }>\n { isElevated && <div className="shadow-overlay" \/> }\n {\/* ... *\/}\n <\/div>\n );\n}<\/code><\/pre><\/div>Style Previews<\/h2>Styles appear in the Styles panel with previews. The preview uses your block’s example<\/code>:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "example": {\n "attributes": {\n "title": "Card Title",\n "content": "Preview content for the card."\n }\n },\n "styles": [\n { "name": "default", "label": "Default", "isDefault": true },\n { "name": "bordered", "label": "Bordered" }\n ]\n}<\/code><\/pre><\/div>Best Practices<\/h2>Consistent naming:<\/strong> Use descriptive, lowercase names with hyphens.<\/p><\/li>Always include default:<\/strong> Mark one style as isDefault: true<\/code>.<\/p><\/li>Base styles first:<\/strong> Write base styles that apply to all variations.<\/p><\/li>Use specificity wisely:<\/strong> .block.is-style-name<\/code> is usually enough.<\/p><\/li>Support dark mode:<\/strong> Consider color scheme preferences.<\/p><\/li>Test in editor:<\/strong> Ensure styles render correctly in the block editor.<\/p><\/li>Keep it visual:<\/strong> Styles should create visible differences.<\/p><\/li>Limit options:<\/strong> 3-5 styles is usually plenty.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block styles provide visual variations that users can apply from the block toolbar. Defining Styles in block.json { "styles": [ { "name": "default", "label": "Default", "isDefault": true }, { "name":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5519","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions"}],"predecessor-version":[{"id":8997,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions\/8997"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5519"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5519"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5519"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Ensure styles work in the editor by including them in style.css<\/code> (loads in both editor and frontend) or by adding styles to editorStyle<\/code>.<\/p>JavaScript Registration<\/h2>For more control, register styles in JavaScript:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { registerBlockStyle } from '@wordpress\/blocks';\n\nregisterBlockStyle( 'core\/quote', {\n name: 'fancy',\n label: 'Fancy',\n} );\n\nregisterBlockStyle( 'core\/quote', {\n name: 'modern',\n label: 'Modern',\n isDefault: true,\n} );<\/code><\/pre><\/div>Registering Styles for Core Blocks<\/h2>Add styles to core blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { registerBlockStyle } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Add styles to core\/button\n registerBlockStyle( 'core\/button', {\n name: 'gradient',\n label: 'Gradient',\n } );\n \n \/\/ Add styles to core\/image\n registerBlockStyle( 'core\/image', {\n name: 'rounded',\n label: 'Rounded Corners',\n } );\n \n registerBlockStyle( 'core\/image', {\n name: 'polaroid',\n label: 'Polaroid',\n } );\n} );<\/code><\/pre><\/div>CSS for core block styles:<\/p>css<\/span><\/use><\/svg><\/button><\/div>\/* Gradient button *\/\n.wp-block-button.is-style-gradient .wp-block-button__link {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n border: none;\n}\n\n\/* Rounded image *\/\n.wp-block-image.is-style-rounded img {\n border-radius: 16px;\n}\n\n\/* Polaroid image *\/\n.wp-block-image.is-style-polaroid {\n background: white;\n padding: 12px 12px 40px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n}<\/code><\/pre><\/div>Unregistering Styles<\/h2>Remove existing styles:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { unregisterBlockStyle } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Remove the "plain" style from core\/quote\n unregisterBlockStyle( 'core\/quote', 'plain' );\n \n \/\/ Remove default style from core\/image\n unregisterBlockStyle( 'core\/image', 'default' );\n} );<\/code><\/pre><\/div>PHP Registration<\/h2>Register styles from PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'highlight',\n 'label' => __( 'Highlight', 'my-plugin' ),\n ]\n );\n \n register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'large-text',\n 'label' => __( 'Large Text', 'my-plugin' ),\n 'is_default' => false,\n 'style_handle' => 'my-plugin-block-styles', \/\/ Optional: associated stylesheet\n ]\n );\n} );<\/code><\/pre><\/div>With inline styles:<\/p>php<\/span><\/use><\/svg><\/button><\/div>register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'fancy',\n 'label' => __( 'Fancy', 'my-plugin' ),\n 'inline_style' => '.is-style-fancy { \n font-family: Georgia, serif;\n font-style: italic;\n border-left: 4px solid currentColor;\n padding-left: 1em;\n }',\n ]\n);<\/code><\/pre><\/div>Unregistering Styles in PHP<\/h2>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n unregister_block_style( 'core\/quote', 'plain' );\n} );<\/code><\/pre><\/div>Note: Must run after the style is registered (priority matters).<\/p>Style Variations via theme.json<\/h2>Define styles in theme.json for theme-specific variations:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "version": 2,\n "styles": {\n "blocks": {\n "core\/button": {\n "variations": {\n "outline": {\n "border": {\n "width": "2px",\n "style": "solid",\n "color": "currentColor"\n },\n "color": {\n "background": "transparent"\n }\n }\n }\n }\n }\n }\n}<\/code><\/pre><\/div>Conditional Style Registration<\/h2>Register styles based on context:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n \/\/ Only for themes that support custom styles\n if ( current_theme_supports( 'custom-block-styles' ) ) {\n register_block_style( 'core\/group', [\n 'name' => 'boxed',\n 'label' => __( 'Boxed', 'my-plugin' ),\n ] );\n }\n} );<\/code><\/pre><\/div>Style-Specific Attributes<\/h2>Some styles might need attribute changes. Handle in edit component:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { useEffect } from '@wordpress\/element';\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { className } = attributes;\n \n \/\/ Adjust attributes based on style\n useEffect( () => {\n if ( className?.includes( 'is-style-compact' ) ) {\n setAttributes( { padding: 'small' } );\n }\n }, [ className ] );\n \n \/\/ ...\n}<\/code><\/pre><\/div>Complete Example: Card Block with Styles<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "styles": [\n {\n "name": "default",\n "label": "Default",\n "isDefault": true\n },\n {\n "name": "bordered",\n "label": "Bordered"\n },\n {\n "name": "elevated",\n "label": "Elevated"\n },\n {\n "name": "filled",\n "label": "Filled"\n }\n ],\n "style": "file:.\/style.css",\n "editorScript": "file:.\/index.js"\n}<\/code><\/pre><\/div>css<\/span><\/use><\/svg><\/button><\/div>\/* style.css *\/\n\n\/* Base styles for all cards *\/\n.wp-block-my-plugin-card {\n padding: 24px;\n border-radius: 8px;\n}\n\n\/* Default style *\/\n.wp-block-my-plugin-card.is-style-default {\n background: #ffffff;\n border: 1px solid #e2e8f0;\n}\n\n\/* Bordered style *\/\n.wp-block-my-plugin-card.is-style-bordered {\n background: transparent;\n border: 2px solid currentColor;\n}\n\n\/* Elevated style *\/\n.wp-block-my-plugin-card.is-style-elevated {\n background: #ffffff;\n border: none;\n box-shadow: \n 0 4px 6px -1px rgba(0, 0, 0, 0.1),\n 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n}\n\n\/* Filled style *\/\n.wp-block-my-plugin-card.is-style-filled {\n background: #f1f5f9;\n border: none;\n}\n\n\/* Dark mode support *\/\n@media (prefers-color-scheme: dark) {\n .wp-block-my-plugin-card.is-style-default {\n background: #1e293b;\n border-color: #334155;\n }\n \n .wp-block-my-plugin-card.is-style-elevated {\n background: #1e293b;\n box-shadow: \n 0 4px 6px -1px rgba(0, 0, 0, 0.3),\n 0 2px 4px -1px rgba(0, 0, 0, 0.2);\n }\n \n .wp-block-my-plugin-card.is-style-filled {\n background: #334155;\n }\n}<\/code><\/pre><\/div>Programmatic Style Detection<\/h2>Check active style in PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $class_name = $attributes['className'] ?? '';\n \n \/\/ Check for specific style\n if ( str_contains( $class_name, 'is-style-elevated' ) ) {\n \/\/ Add extra markup for elevated style\n }\n \n return $content;\n}<\/code><\/pre><\/div>In JavaScript:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { className } = attributes;\n \n const isElevated = className?.includes( 'is-style-elevated' );\n const isBordered = className?.includes( 'is-style-bordered' );\n \n return (\n <div { ...useBlockProps() }>\n { isElevated && <div className="shadow-overlay" \/> }\n {\/* ... *\/}\n <\/div>\n );\n}<\/code><\/pre><\/div>Style Previews<\/h2>Styles appear in the Styles panel with previews. The preview uses your block’s example<\/code>:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "example": {\n "attributes": {\n "title": "Card Title",\n "content": "Preview content for the card."\n }\n },\n "styles": [\n { "name": "default", "label": "Default", "isDefault": true },\n { "name": "bordered", "label": "Bordered" }\n ]\n}<\/code><\/pre><\/div>Best Practices<\/h2>Consistent naming:<\/strong> Use descriptive, lowercase names with hyphens.<\/p><\/li>Always include default:<\/strong> Mark one style as isDefault: true<\/code>.<\/p><\/li>Base styles first:<\/strong> Write base styles that apply to all variations.<\/p><\/li>Use specificity wisely:<\/strong> .block.is-style-name<\/code> is usually enough.<\/p><\/li>Support dark mode:<\/strong> Consider color scheme preferences.<\/p><\/li>Test in editor:<\/strong> Ensure styles render correctly in the block editor.<\/p><\/li>Keep it visual:<\/strong> Styles should create visible differences.<\/p><\/li>Limit options:<\/strong> 3-5 styles is usually plenty.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block styles provide visual variations that users can apply from the block toolbar. Defining Styles in block.json { "styles": [ { "name": "default", "label": "Default", "isDefault": true }, { "name":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5519","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions"}],"predecessor-version":[{"id":8997,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions\/8997"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5519"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5519"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5519"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
style.css<\/code> (loads in both editor and frontend) or by adding styles to editorStyle<\/code>.<\/p>JavaScript Registration<\/h2>For more control, register styles in JavaScript:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { registerBlockStyle } from '@wordpress\/blocks';\n\nregisterBlockStyle( 'core\/quote', {\n name: 'fancy',\n label: 'Fancy',\n} );\n\nregisterBlockStyle( 'core\/quote', {\n name: 'modern',\n label: 'Modern',\n isDefault: true,\n} );<\/code><\/pre><\/div>Registering Styles for Core Blocks<\/h2>Add styles to core blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { registerBlockStyle } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Add styles to core\/button\n registerBlockStyle( 'core\/button', {\n name: 'gradient',\n label: 'Gradient',\n } );\n \n \/\/ Add styles to core\/image\n registerBlockStyle( 'core\/image', {\n name: 'rounded',\n label: 'Rounded Corners',\n } );\n \n registerBlockStyle( 'core\/image', {\n name: 'polaroid',\n label: 'Polaroid',\n } );\n} );<\/code><\/pre><\/div>CSS for core block styles:<\/p>css<\/span><\/use><\/svg><\/button><\/div>\/* Gradient button *\/\n.wp-block-button.is-style-gradient .wp-block-button__link {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n border: none;\n}\n\n\/* Rounded image *\/\n.wp-block-image.is-style-rounded img {\n border-radius: 16px;\n}\n\n\/* Polaroid image *\/\n.wp-block-image.is-style-polaroid {\n background: white;\n padding: 12px 12px 40px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n}<\/code><\/pre><\/div>Unregistering Styles<\/h2>Remove existing styles:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { unregisterBlockStyle } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Remove the "plain" style from core\/quote\n unregisterBlockStyle( 'core\/quote', 'plain' );\n \n \/\/ Remove default style from core\/image\n unregisterBlockStyle( 'core\/image', 'default' );\n} );<\/code><\/pre><\/div>PHP Registration<\/h2>Register styles from PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'highlight',\n 'label' => __( 'Highlight', 'my-plugin' ),\n ]\n );\n \n register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'large-text',\n 'label' => __( 'Large Text', 'my-plugin' ),\n 'is_default' => false,\n 'style_handle' => 'my-plugin-block-styles', \/\/ Optional: associated stylesheet\n ]\n );\n} );<\/code><\/pre><\/div>With inline styles:<\/p>php<\/span><\/use><\/svg><\/button><\/div>register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'fancy',\n 'label' => __( 'Fancy', 'my-plugin' ),\n 'inline_style' => '.is-style-fancy { \n font-family: Georgia, serif;\n font-style: italic;\n border-left: 4px solid currentColor;\n padding-left: 1em;\n }',\n ]\n);<\/code><\/pre><\/div>Unregistering Styles in PHP<\/h2>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n unregister_block_style( 'core\/quote', 'plain' );\n} );<\/code><\/pre><\/div>Note: Must run after the style is registered (priority matters).<\/p>Style Variations via theme.json<\/h2>Define styles in theme.json for theme-specific variations:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "version": 2,\n "styles": {\n "blocks": {\n "core\/button": {\n "variations": {\n "outline": {\n "border": {\n "width": "2px",\n "style": "solid",\n "color": "currentColor"\n },\n "color": {\n "background": "transparent"\n }\n }\n }\n }\n }\n }\n}<\/code><\/pre><\/div>Conditional Style Registration<\/h2>Register styles based on context:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n \/\/ Only for themes that support custom styles\n if ( current_theme_supports( 'custom-block-styles' ) ) {\n register_block_style( 'core\/group', [\n 'name' => 'boxed',\n 'label' => __( 'Boxed', 'my-plugin' ),\n ] );\n }\n} );<\/code><\/pre><\/div>Style-Specific Attributes<\/h2>Some styles might need attribute changes. Handle in edit component:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { useEffect } from '@wordpress\/element';\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { className } = attributes;\n \n \/\/ Adjust attributes based on style\n useEffect( () => {\n if ( className?.includes( 'is-style-compact' ) ) {\n setAttributes( { padding: 'small' } );\n }\n }, [ className ] );\n \n \/\/ ...\n}<\/code><\/pre><\/div>Complete Example: Card Block with Styles<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "styles": [\n {\n "name": "default",\n "label": "Default",\n "isDefault": true\n },\n {\n "name": "bordered",\n "label": "Bordered"\n },\n {\n "name": "elevated",\n "label": "Elevated"\n },\n {\n "name": "filled",\n "label": "Filled"\n }\n ],\n "style": "file:.\/style.css",\n "editorScript": "file:.\/index.js"\n}<\/code><\/pre><\/div>css<\/span><\/use><\/svg><\/button><\/div>\/* style.css *\/\n\n\/* Base styles for all cards *\/\n.wp-block-my-plugin-card {\n padding: 24px;\n border-radius: 8px;\n}\n\n\/* Default style *\/\n.wp-block-my-plugin-card.is-style-default {\n background: #ffffff;\n border: 1px solid #e2e8f0;\n}\n\n\/* Bordered style *\/\n.wp-block-my-plugin-card.is-style-bordered {\n background: transparent;\n border: 2px solid currentColor;\n}\n\n\/* Elevated style *\/\n.wp-block-my-plugin-card.is-style-elevated {\n background: #ffffff;\n border: none;\n box-shadow: \n 0 4px 6px -1px rgba(0, 0, 0, 0.1),\n 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n}\n\n\/* Filled style *\/\n.wp-block-my-plugin-card.is-style-filled {\n background: #f1f5f9;\n border: none;\n}\n\n\/* Dark mode support *\/\n@media (prefers-color-scheme: dark) {\n .wp-block-my-plugin-card.is-style-default {\n background: #1e293b;\n border-color: #334155;\n }\n \n .wp-block-my-plugin-card.is-style-elevated {\n background: #1e293b;\n box-shadow: \n 0 4px 6px -1px rgba(0, 0, 0, 0.3),\n 0 2px 4px -1px rgba(0, 0, 0, 0.2);\n }\n \n .wp-block-my-plugin-card.is-style-filled {\n background: #334155;\n }\n}<\/code><\/pre><\/div>Programmatic Style Detection<\/h2>Check active style in PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $class_name = $attributes['className'] ?? '';\n \n \/\/ Check for specific style\n if ( str_contains( $class_name, 'is-style-elevated' ) ) {\n \/\/ Add extra markup for elevated style\n }\n \n return $content;\n}<\/code><\/pre><\/div>In JavaScript:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { className } = attributes;\n \n const isElevated = className?.includes( 'is-style-elevated' );\n const isBordered = className?.includes( 'is-style-bordered' );\n \n return (\n <div { ...useBlockProps() }>\n { isElevated && <div className="shadow-overlay" \/> }\n {\/* ... *\/}\n <\/div>\n );\n}<\/code><\/pre><\/div>Style Previews<\/h2>Styles appear in the Styles panel with previews. The preview uses your block’s example<\/code>:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "example": {\n "attributes": {\n "title": "Card Title",\n "content": "Preview content for the card."\n }\n },\n "styles": [\n { "name": "default", "label": "Default", "isDefault": true },\n { "name": "bordered", "label": "Bordered" }\n ]\n}<\/code><\/pre><\/div>Best Practices<\/h2>Consistent naming:<\/strong> Use descriptive, lowercase names with hyphens.<\/p><\/li>Always include default:<\/strong> Mark one style as isDefault: true<\/code>.<\/p><\/li>Base styles first:<\/strong> Write base styles that apply to all variations.<\/p><\/li>Use specificity wisely:<\/strong> .block.is-style-name<\/code> is usually enough.<\/p><\/li>Support dark mode:<\/strong> Consider color scheme preferences.<\/p><\/li>Test in editor:<\/strong> Ensure styles render correctly in the block editor.<\/p><\/li>Keep it visual:<\/strong> Styles should create visible differences.<\/p><\/li>Limit options:<\/strong> 3-5 styles is usually plenty.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block styles provide visual variations that users can apply from the block toolbar. Defining Styles in block.json { "styles": [ { "name": "default", "label": "Default", "isDefault": true }, { "name":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5519","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions"}],"predecessor-version":[{"id":8997,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions\/8997"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5519"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5519"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5519"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
editorStyle<\/code>.<\/p>JavaScript Registration<\/h2>For more control, register styles in JavaScript:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { registerBlockStyle } from '@wordpress\/blocks';\n\nregisterBlockStyle( 'core\/quote', {\n name: 'fancy',\n label: 'Fancy',\n} );\n\nregisterBlockStyle( 'core\/quote', {\n name: 'modern',\n label: 'Modern',\n isDefault: true,\n} );<\/code><\/pre><\/div>Registering Styles for Core Blocks<\/h2>Add styles to core blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { registerBlockStyle } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Add styles to core\/button\n registerBlockStyle( 'core\/button', {\n name: 'gradient',\n label: 'Gradient',\n } );\n \n \/\/ Add styles to core\/image\n registerBlockStyle( 'core\/image', {\n name: 'rounded',\n label: 'Rounded Corners',\n } );\n \n registerBlockStyle( 'core\/image', {\n name: 'polaroid',\n label: 'Polaroid',\n } );\n} );<\/code><\/pre><\/div>CSS for core block styles:<\/p>css<\/span><\/use><\/svg><\/button><\/div>\/* Gradient button *\/\n.wp-block-button.is-style-gradient .wp-block-button__link {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n border: none;\n}\n\n\/* Rounded image *\/\n.wp-block-image.is-style-rounded img {\n border-radius: 16px;\n}\n\n\/* Polaroid image *\/\n.wp-block-image.is-style-polaroid {\n background: white;\n padding: 12px 12px 40px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n}<\/code><\/pre><\/div>Unregistering Styles<\/h2>Remove existing styles:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { unregisterBlockStyle } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Remove the "plain" style from core\/quote\n unregisterBlockStyle( 'core\/quote', 'plain' );\n \n \/\/ Remove default style from core\/image\n unregisterBlockStyle( 'core\/image', 'default' );\n} );<\/code><\/pre><\/div>PHP Registration<\/h2>Register styles from PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'highlight',\n 'label' => __( 'Highlight', 'my-plugin' ),\n ]\n );\n \n register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'large-text',\n 'label' => __( 'Large Text', 'my-plugin' ),\n 'is_default' => false,\n 'style_handle' => 'my-plugin-block-styles', \/\/ Optional: associated stylesheet\n ]\n );\n} );<\/code><\/pre><\/div>With inline styles:<\/p>php<\/span><\/use><\/svg><\/button><\/div>register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'fancy',\n 'label' => __( 'Fancy', 'my-plugin' ),\n 'inline_style' => '.is-style-fancy { \n font-family: Georgia, serif;\n font-style: italic;\n border-left: 4px solid currentColor;\n padding-left: 1em;\n }',\n ]\n);<\/code><\/pre><\/div>Unregistering Styles in PHP<\/h2>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n unregister_block_style( 'core\/quote', 'plain' );\n} );<\/code><\/pre><\/div>Note: Must run after the style is registered (priority matters).<\/p>Style Variations via theme.json<\/h2>Define styles in theme.json for theme-specific variations:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "version": 2,\n "styles": {\n "blocks": {\n "core\/button": {\n "variations": {\n "outline": {\n "border": {\n "width": "2px",\n "style": "solid",\n "color": "currentColor"\n },\n "color": {\n "background": "transparent"\n }\n }\n }\n }\n }\n }\n}<\/code><\/pre><\/div>Conditional Style Registration<\/h2>Register styles based on context:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n \/\/ Only for themes that support custom styles\n if ( current_theme_supports( 'custom-block-styles' ) ) {\n register_block_style( 'core\/group', [\n 'name' => 'boxed',\n 'label' => __( 'Boxed', 'my-plugin' ),\n ] );\n }\n} );<\/code><\/pre><\/div>Style-Specific Attributes<\/h2>Some styles might need attribute changes. Handle in edit component:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { useEffect } from '@wordpress\/element';\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { className } = attributes;\n \n \/\/ Adjust attributes based on style\n useEffect( () => {\n if ( className?.includes( 'is-style-compact' ) ) {\n setAttributes( { padding: 'small' } );\n }\n }, [ className ] );\n \n \/\/ ...\n}<\/code><\/pre><\/div>Complete Example: Card Block with Styles<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "styles": [\n {\n "name": "default",\n "label": "Default",\n "isDefault": true\n },\n {\n "name": "bordered",\n "label": "Bordered"\n },\n {\n "name": "elevated",\n "label": "Elevated"\n },\n {\n "name": "filled",\n "label": "Filled"\n }\n ],\n "style": "file:.\/style.css",\n "editorScript": "file:.\/index.js"\n}<\/code><\/pre><\/div>css<\/span><\/use><\/svg><\/button><\/div>\/* style.css *\/\n\n\/* Base styles for all cards *\/\n.wp-block-my-plugin-card {\n padding: 24px;\n border-radius: 8px;\n}\n\n\/* Default style *\/\n.wp-block-my-plugin-card.is-style-default {\n background: #ffffff;\n border: 1px solid #e2e8f0;\n}\n\n\/* Bordered style *\/\n.wp-block-my-plugin-card.is-style-bordered {\n background: transparent;\n border: 2px solid currentColor;\n}\n\n\/* Elevated style *\/\n.wp-block-my-plugin-card.is-style-elevated {\n background: #ffffff;\n border: none;\n box-shadow: \n 0 4px 6px -1px rgba(0, 0, 0, 0.1),\n 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n}\n\n\/* Filled style *\/\n.wp-block-my-plugin-card.is-style-filled {\n background: #f1f5f9;\n border: none;\n}\n\n\/* Dark mode support *\/\n@media (prefers-color-scheme: dark) {\n .wp-block-my-plugin-card.is-style-default {\n background: #1e293b;\n border-color: #334155;\n }\n \n .wp-block-my-plugin-card.is-style-elevated {\n background: #1e293b;\n box-shadow: \n 0 4px 6px -1px rgba(0, 0, 0, 0.3),\n 0 2px 4px -1px rgba(0, 0, 0, 0.2);\n }\n \n .wp-block-my-plugin-card.is-style-filled {\n background: #334155;\n }\n}<\/code><\/pre><\/div>Programmatic Style Detection<\/h2>Check active style in PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $class_name = $attributes['className'] ?? '';\n \n \/\/ Check for specific style\n if ( str_contains( $class_name, 'is-style-elevated' ) ) {\n \/\/ Add extra markup for elevated style\n }\n \n return $content;\n}<\/code><\/pre><\/div>In JavaScript:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { className } = attributes;\n \n const isElevated = className?.includes( 'is-style-elevated' );\n const isBordered = className?.includes( 'is-style-bordered' );\n \n return (\n <div { ...useBlockProps() }>\n { isElevated && <div className="shadow-overlay" \/> }\n {\/* ... *\/}\n <\/div>\n );\n}<\/code><\/pre><\/div>Style Previews<\/h2>Styles appear in the Styles panel with previews. The preview uses your block’s example<\/code>:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "example": {\n "attributes": {\n "title": "Card Title",\n "content": "Preview content for the card."\n }\n },\n "styles": [\n { "name": "default", "label": "Default", "isDefault": true },\n { "name": "bordered", "label": "Bordered" }\n ]\n}<\/code><\/pre><\/div>Best Practices<\/h2>Consistent naming:<\/strong> Use descriptive, lowercase names with hyphens.<\/p><\/li>Always include default:<\/strong> Mark one style as isDefault: true<\/code>.<\/p><\/li>Base styles first:<\/strong> Write base styles that apply to all variations.<\/p><\/li>Use specificity wisely:<\/strong> .block.is-style-name<\/code> is usually enough.<\/p><\/li>Support dark mode:<\/strong> Consider color scheme preferences.<\/p><\/li>Test in editor:<\/strong> Ensure styles render correctly in the block editor.<\/p><\/li>Keep it visual:<\/strong> Styles should create visible differences.<\/p><\/li>Limit options:<\/strong> 3-5 styles is usually plenty.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block styles provide visual variations that users can apply from the block toolbar. Defining Styles in block.json { "styles": [ { "name": "default", "label": "Default", "isDefault": true }, { "name":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5519","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions"}],"predecessor-version":[{"id":8997,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions\/8997"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5519"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5519"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5519"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
For more control, register styles in JavaScript:<\/p>
import { registerBlockStyle } from '@wordpress\/blocks';\n\nregisterBlockStyle( 'core\/quote', {\n name: 'fancy',\n label: 'Fancy',\n} );\n\nregisterBlockStyle( 'core\/quote', {\n name: 'modern',\n label: 'Modern',\n isDefault: true,\n} );<\/code><\/pre><\/div>Registering Styles for Core Blocks<\/h2>Add styles to core blocks:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { registerBlockStyle } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Add styles to core\/button\n registerBlockStyle( 'core\/button', {\n name: 'gradient',\n label: 'Gradient',\n } );\n \n \/\/ Add styles to core\/image\n registerBlockStyle( 'core\/image', {\n name: 'rounded',\n label: 'Rounded Corners',\n } );\n \n registerBlockStyle( 'core\/image', {\n name: 'polaroid',\n label: 'Polaroid',\n } );\n} );<\/code><\/pre><\/div>CSS for core block styles:<\/p>css<\/span><\/use><\/svg><\/button><\/div>\/* Gradient button *\/\n.wp-block-button.is-style-gradient .wp-block-button__link {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n border: none;\n}\n\n\/* Rounded image *\/\n.wp-block-image.is-style-rounded img {\n border-radius: 16px;\n}\n\n\/* Polaroid image *\/\n.wp-block-image.is-style-polaroid {\n background: white;\n padding: 12px 12px 40px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n}<\/code><\/pre><\/div>Unregistering Styles<\/h2>Remove existing styles:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { unregisterBlockStyle } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Remove the "plain" style from core\/quote\n unregisterBlockStyle( 'core\/quote', 'plain' );\n \n \/\/ Remove default style from core\/image\n unregisterBlockStyle( 'core\/image', 'default' );\n} );<\/code><\/pre><\/div>PHP Registration<\/h2>Register styles from PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'highlight',\n 'label' => __( 'Highlight', 'my-plugin' ),\n ]\n );\n \n register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'large-text',\n 'label' => __( 'Large Text', 'my-plugin' ),\n 'is_default' => false,\n 'style_handle' => 'my-plugin-block-styles', \/\/ Optional: associated stylesheet\n ]\n );\n} );<\/code><\/pre><\/div>With inline styles:<\/p>php<\/span><\/use><\/svg><\/button><\/div>register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'fancy',\n 'label' => __( 'Fancy', 'my-plugin' ),\n 'inline_style' => '.is-style-fancy { \n font-family: Georgia, serif;\n font-style: italic;\n border-left: 4px solid currentColor;\n padding-left: 1em;\n }',\n ]\n);<\/code><\/pre><\/div>Unregistering Styles in PHP<\/h2>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n unregister_block_style( 'core\/quote', 'plain' );\n} );<\/code><\/pre><\/div>Note: Must run after the style is registered (priority matters).<\/p>Style Variations via theme.json<\/h2>Define styles in theme.json for theme-specific variations:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "version": 2,\n "styles": {\n "blocks": {\n "core\/button": {\n "variations": {\n "outline": {\n "border": {\n "width": "2px",\n "style": "solid",\n "color": "currentColor"\n },\n "color": {\n "background": "transparent"\n }\n }\n }\n }\n }\n }\n}<\/code><\/pre><\/div>Conditional Style Registration<\/h2>Register styles based on context:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n \/\/ Only for themes that support custom styles\n if ( current_theme_supports( 'custom-block-styles' ) ) {\n register_block_style( 'core\/group', [\n 'name' => 'boxed',\n 'label' => __( 'Boxed', 'my-plugin' ),\n ] );\n }\n} );<\/code><\/pre><\/div>Style-Specific Attributes<\/h2>Some styles might need attribute changes. Handle in edit component:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { useEffect } from '@wordpress\/element';\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { className } = attributes;\n \n \/\/ Adjust attributes based on style\n useEffect( () => {\n if ( className?.includes( 'is-style-compact' ) ) {\n setAttributes( { padding: 'small' } );\n }\n }, [ className ] );\n \n \/\/ ...\n}<\/code><\/pre><\/div>Complete Example: Card Block with Styles<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "styles": [\n {\n "name": "default",\n "label": "Default",\n "isDefault": true\n },\n {\n "name": "bordered",\n "label": "Bordered"\n },\n {\n "name": "elevated",\n "label": "Elevated"\n },\n {\n "name": "filled",\n "label": "Filled"\n }\n ],\n "style": "file:.\/style.css",\n "editorScript": "file:.\/index.js"\n}<\/code><\/pre><\/div>css<\/span><\/use><\/svg><\/button><\/div>\/* style.css *\/\n\n\/* Base styles for all cards *\/\n.wp-block-my-plugin-card {\n padding: 24px;\n border-radius: 8px;\n}\n\n\/* Default style *\/\n.wp-block-my-plugin-card.is-style-default {\n background: #ffffff;\n border: 1px solid #e2e8f0;\n}\n\n\/* Bordered style *\/\n.wp-block-my-plugin-card.is-style-bordered {\n background: transparent;\n border: 2px solid currentColor;\n}\n\n\/* Elevated style *\/\n.wp-block-my-plugin-card.is-style-elevated {\n background: #ffffff;\n border: none;\n box-shadow: \n 0 4px 6px -1px rgba(0, 0, 0, 0.1),\n 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n}\n\n\/* Filled style *\/\n.wp-block-my-plugin-card.is-style-filled {\n background: #f1f5f9;\n border: none;\n}\n\n\/* Dark mode support *\/\n@media (prefers-color-scheme: dark) {\n .wp-block-my-plugin-card.is-style-default {\n background: #1e293b;\n border-color: #334155;\n }\n \n .wp-block-my-plugin-card.is-style-elevated {\n background: #1e293b;\n box-shadow: \n 0 4px 6px -1px rgba(0, 0, 0, 0.3),\n 0 2px 4px -1px rgba(0, 0, 0, 0.2);\n }\n \n .wp-block-my-plugin-card.is-style-filled {\n background: #334155;\n }\n}<\/code><\/pre><\/div>Programmatic Style Detection<\/h2>Check active style in PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $class_name = $attributes['className'] ?? '';\n \n \/\/ Check for specific style\n if ( str_contains( $class_name, 'is-style-elevated' ) ) {\n \/\/ Add extra markup for elevated style\n }\n \n return $content;\n}<\/code><\/pre><\/div>In JavaScript:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { className } = attributes;\n \n const isElevated = className?.includes( 'is-style-elevated' );\n const isBordered = className?.includes( 'is-style-bordered' );\n \n return (\n <div { ...useBlockProps() }>\n { isElevated && <div className="shadow-overlay" \/> }\n {\/* ... *\/}\n <\/div>\n );\n}<\/code><\/pre><\/div>Style Previews<\/h2>Styles appear in the Styles panel with previews. The preview uses your block’s example<\/code>:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "example": {\n "attributes": {\n "title": "Card Title",\n "content": "Preview content for the card."\n }\n },\n "styles": [\n { "name": "default", "label": "Default", "isDefault": true },\n { "name": "bordered", "label": "Bordered" }\n ]\n}<\/code><\/pre><\/div>Best Practices<\/h2>Consistent naming:<\/strong> Use descriptive, lowercase names with hyphens.<\/p><\/li>Always include default:<\/strong> Mark one style as isDefault: true<\/code>.<\/p><\/li>Base styles first:<\/strong> Write base styles that apply to all variations.<\/p><\/li>Use specificity wisely:<\/strong> .block.is-style-name<\/code> is usually enough.<\/p><\/li>Support dark mode:<\/strong> Consider color scheme preferences.<\/p><\/li>Test in editor:<\/strong> Ensure styles render correctly in the block editor.<\/p><\/li>Keep it visual:<\/strong> Styles should create visible differences.<\/p><\/li>Limit options:<\/strong> 3-5 styles is usually plenty.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block styles provide visual variations that users can apply from the block toolbar. Defining Styles in block.json { "styles": [ { "name": "default", "label": "Default", "isDefault": true }, { "name":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5519","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions"}],"predecessor-version":[{"id":8997,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions\/8997"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5519"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5519"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5519"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Add styles to core blocks:<\/p>
import { registerBlockStyle } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Add styles to core\/button\n registerBlockStyle( 'core\/button', {\n name: 'gradient',\n label: 'Gradient',\n } );\n \n \/\/ Add styles to core\/image\n registerBlockStyle( 'core\/image', {\n name: 'rounded',\n label: 'Rounded Corners',\n } );\n \n registerBlockStyle( 'core\/image', {\n name: 'polaroid',\n label: 'Polaroid',\n } );\n} );<\/code><\/pre><\/div>CSS for core block styles:<\/p>css<\/span><\/use><\/svg><\/button><\/div>\/* Gradient button *\/\n.wp-block-button.is-style-gradient .wp-block-button__link {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n border: none;\n}\n\n\/* Rounded image *\/\n.wp-block-image.is-style-rounded img {\n border-radius: 16px;\n}\n\n\/* Polaroid image *\/\n.wp-block-image.is-style-polaroid {\n background: white;\n padding: 12px 12px 40px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n}<\/code><\/pre><\/div>Unregistering Styles<\/h2>Remove existing styles:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { unregisterBlockStyle } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Remove the "plain" style from core\/quote\n unregisterBlockStyle( 'core\/quote', 'plain' );\n \n \/\/ Remove default style from core\/image\n unregisterBlockStyle( 'core\/image', 'default' );\n} );<\/code><\/pre><\/div>PHP Registration<\/h2>Register styles from PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'highlight',\n 'label' => __( 'Highlight', 'my-plugin' ),\n ]\n );\n \n register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'large-text',\n 'label' => __( 'Large Text', 'my-plugin' ),\n 'is_default' => false,\n 'style_handle' => 'my-plugin-block-styles', \/\/ Optional: associated stylesheet\n ]\n );\n} );<\/code><\/pre><\/div>With inline styles:<\/p>php<\/span><\/use><\/svg><\/button><\/div>register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'fancy',\n 'label' => __( 'Fancy', 'my-plugin' ),\n 'inline_style' => '.is-style-fancy { \n font-family: Georgia, serif;\n font-style: italic;\n border-left: 4px solid currentColor;\n padding-left: 1em;\n }',\n ]\n);<\/code><\/pre><\/div>Unregistering Styles in PHP<\/h2>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n unregister_block_style( 'core\/quote', 'plain' );\n} );<\/code><\/pre><\/div>Note: Must run after the style is registered (priority matters).<\/p>Style Variations via theme.json<\/h2>Define styles in theme.json for theme-specific variations:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "version": 2,\n "styles": {\n "blocks": {\n "core\/button": {\n "variations": {\n "outline": {\n "border": {\n "width": "2px",\n "style": "solid",\n "color": "currentColor"\n },\n "color": {\n "background": "transparent"\n }\n }\n }\n }\n }\n }\n}<\/code><\/pre><\/div>Conditional Style Registration<\/h2>Register styles based on context:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n \/\/ Only for themes that support custom styles\n if ( current_theme_supports( 'custom-block-styles' ) ) {\n register_block_style( 'core\/group', [\n 'name' => 'boxed',\n 'label' => __( 'Boxed', 'my-plugin' ),\n ] );\n }\n} );<\/code><\/pre><\/div>Style-Specific Attributes<\/h2>Some styles might need attribute changes. Handle in edit component:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { useEffect } from '@wordpress\/element';\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { className } = attributes;\n \n \/\/ Adjust attributes based on style\n useEffect( () => {\n if ( className?.includes( 'is-style-compact' ) ) {\n setAttributes( { padding: 'small' } );\n }\n }, [ className ] );\n \n \/\/ ...\n}<\/code><\/pre><\/div>Complete Example: Card Block with Styles<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "styles": [\n {\n "name": "default",\n "label": "Default",\n "isDefault": true\n },\n {\n "name": "bordered",\n "label": "Bordered"\n },\n {\n "name": "elevated",\n "label": "Elevated"\n },\n {\n "name": "filled",\n "label": "Filled"\n }\n ],\n "style": "file:.\/style.css",\n "editorScript": "file:.\/index.js"\n}<\/code><\/pre><\/div>css<\/span><\/use><\/svg><\/button><\/div>\/* style.css *\/\n\n\/* Base styles for all cards *\/\n.wp-block-my-plugin-card {\n padding: 24px;\n border-radius: 8px;\n}\n\n\/* Default style *\/\n.wp-block-my-plugin-card.is-style-default {\n background: #ffffff;\n border: 1px solid #e2e8f0;\n}\n\n\/* Bordered style *\/\n.wp-block-my-plugin-card.is-style-bordered {\n background: transparent;\n border: 2px solid currentColor;\n}\n\n\/* Elevated style *\/\n.wp-block-my-plugin-card.is-style-elevated {\n background: #ffffff;\n border: none;\n box-shadow: \n 0 4px 6px -1px rgba(0, 0, 0, 0.1),\n 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n}\n\n\/* Filled style *\/\n.wp-block-my-plugin-card.is-style-filled {\n background: #f1f5f9;\n border: none;\n}\n\n\/* Dark mode support *\/\n@media (prefers-color-scheme: dark) {\n .wp-block-my-plugin-card.is-style-default {\n background: #1e293b;\n border-color: #334155;\n }\n \n .wp-block-my-plugin-card.is-style-elevated {\n background: #1e293b;\n box-shadow: \n 0 4px 6px -1px rgba(0, 0, 0, 0.3),\n 0 2px 4px -1px rgba(0, 0, 0, 0.2);\n }\n \n .wp-block-my-plugin-card.is-style-filled {\n background: #334155;\n }\n}<\/code><\/pre><\/div>Programmatic Style Detection<\/h2>Check active style in PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $class_name = $attributes['className'] ?? '';\n \n \/\/ Check for specific style\n if ( str_contains( $class_name, 'is-style-elevated' ) ) {\n \/\/ Add extra markup for elevated style\n }\n \n return $content;\n}<\/code><\/pre><\/div>In JavaScript:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { className } = attributes;\n \n const isElevated = className?.includes( 'is-style-elevated' );\n const isBordered = className?.includes( 'is-style-bordered' );\n \n return (\n <div { ...useBlockProps() }>\n { isElevated && <div className="shadow-overlay" \/> }\n {\/* ... *\/}\n <\/div>\n );\n}<\/code><\/pre><\/div>Style Previews<\/h2>Styles appear in the Styles panel with previews. The preview uses your block’s example<\/code>:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "example": {\n "attributes": {\n "title": "Card Title",\n "content": "Preview content for the card."\n }\n },\n "styles": [\n { "name": "default", "label": "Default", "isDefault": true },\n { "name": "bordered", "label": "Bordered" }\n ]\n}<\/code><\/pre><\/div>Best Practices<\/h2>Consistent naming:<\/strong> Use descriptive, lowercase names with hyphens.<\/p><\/li>Always include default:<\/strong> Mark one style as isDefault: true<\/code>.<\/p><\/li>Base styles first:<\/strong> Write base styles that apply to all variations.<\/p><\/li>Use specificity wisely:<\/strong> .block.is-style-name<\/code> is usually enough.<\/p><\/li>Support dark mode:<\/strong> Consider color scheme preferences.<\/p><\/li>Test in editor:<\/strong> Ensure styles render correctly in the block editor.<\/p><\/li>Keep it visual:<\/strong> Styles should create visible differences.<\/p><\/li>Limit options:<\/strong> 3-5 styles is usually plenty.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block styles provide visual variations that users can apply from the block toolbar. Defining Styles in block.json { "styles": [ { "name": "default", "label": "Default", "isDefault": true }, { "name":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5519","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions"}],"predecessor-version":[{"id":8997,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions\/8997"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5519"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5519"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5519"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
CSS for core block styles:<\/p>
\/* Gradient button *\/\n.wp-block-button.is-style-gradient .wp-block-button__link {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n border: none;\n}\n\n\/* Rounded image *\/\n.wp-block-image.is-style-rounded img {\n border-radius: 16px;\n}\n\n\/* Polaroid image *\/\n.wp-block-image.is-style-polaroid {\n background: white;\n padding: 12px 12px 40px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n}<\/code><\/pre><\/div>Unregistering Styles<\/h2>Remove existing styles:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { unregisterBlockStyle } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Remove the "plain" style from core\/quote\n unregisterBlockStyle( 'core\/quote', 'plain' );\n \n \/\/ Remove default style from core\/image\n unregisterBlockStyle( 'core\/image', 'default' );\n} );<\/code><\/pre><\/div>PHP Registration<\/h2>Register styles from PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'highlight',\n 'label' => __( 'Highlight', 'my-plugin' ),\n ]\n );\n \n register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'large-text',\n 'label' => __( 'Large Text', 'my-plugin' ),\n 'is_default' => false,\n 'style_handle' => 'my-plugin-block-styles', \/\/ Optional: associated stylesheet\n ]\n );\n} );<\/code><\/pre><\/div>With inline styles:<\/p>php<\/span><\/use><\/svg><\/button><\/div>register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'fancy',\n 'label' => __( 'Fancy', 'my-plugin' ),\n 'inline_style' => '.is-style-fancy { \n font-family: Georgia, serif;\n font-style: italic;\n border-left: 4px solid currentColor;\n padding-left: 1em;\n }',\n ]\n);<\/code><\/pre><\/div>Unregistering Styles in PHP<\/h2>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n unregister_block_style( 'core\/quote', 'plain' );\n} );<\/code><\/pre><\/div>Note: Must run after the style is registered (priority matters).<\/p>Style Variations via theme.json<\/h2>Define styles in theme.json for theme-specific variations:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "version": 2,\n "styles": {\n "blocks": {\n "core\/button": {\n "variations": {\n "outline": {\n "border": {\n "width": "2px",\n "style": "solid",\n "color": "currentColor"\n },\n "color": {\n "background": "transparent"\n }\n }\n }\n }\n }\n }\n}<\/code><\/pre><\/div>Conditional Style Registration<\/h2>Register styles based on context:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n \/\/ Only for themes that support custom styles\n if ( current_theme_supports( 'custom-block-styles' ) ) {\n register_block_style( 'core\/group', [\n 'name' => 'boxed',\n 'label' => __( 'Boxed', 'my-plugin' ),\n ] );\n }\n} );<\/code><\/pre><\/div>Style-Specific Attributes<\/h2>Some styles might need attribute changes. Handle in edit component:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { useEffect } from '@wordpress\/element';\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { className } = attributes;\n \n \/\/ Adjust attributes based on style\n useEffect( () => {\n if ( className?.includes( 'is-style-compact' ) ) {\n setAttributes( { padding: 'small' } );\n }\n }, [ className ] );\n \n \/\/ ...\n}<\/code><\/pre><\/div>Complete Example: Card Block with Styles<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "styles": [\n {\n "name": "default",\n "label": "Default",\n "isDefault": true\n },\n {\n "name": "bordered",\n "label": "Bordered"\n },\n {\n "name": "elevated",\n "label": "Elevated"\n },\n {\n "name": "filled",\n "label": "Filled"\n }\n ],\n "style": "file:.\/style.css",\n "editorScript": "file:.\/index.js"\n}<\/code><\/pre><\/div>css<\/span><\/use><\/svg><\/button><\/div>\/* style.css *\/\n\n\/* Base styles for all cards *\/\n.wp-block-my-plugin-card {\n padding: 24px;\n border-radius: 8px;\n}\n\n\/* Default style *\/\n.wp-block-my-plugin-card.is-style-default {\n background: #ffffff;\n border: 1px solid #e2e8f0;\n}\n\n\/* Bordered style *\/\n.wp-block-my-plugin-card.is-style-bordered {\n background: transparent;\n border: 2px solid currentColor;\n}\n\n\/* Elevated style *\/\n.wp-block-my-plugin-card.is-style-elevated {\n background: #ffffff;\n border: none;\n box-shadow: \n 0 4px 6px -1px rgba(0, 0, 0, 0.1),\n 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n}\n\n\/* Filled style *\/\n.wp-block-my-plugin-card.is-style-filled {\n background: #f1f5f9;\n border: none;\n}\n\n\/* Dark mode support *\/\n@media (prefers-color-scheme: dark) {\n .wp-block-my-plugin-card.is-style-default {\n background: #1e293b;\n border-color: #334155;\n }\n \n .wp-block-my-plugin-card.is-style-elevated {\n background: #1e293b;\n box-shadow: \n 0 4px 6px -1px rgba(0, 0, 0, 0.3),\n 0 2px 4px -1px rgba(0, 0, 0, 0.2);\n }\n \n .wp-block-my-plugin-card.is-style-filled {\n background: #334155;\n }\n}<\/code><\/pre><\/div>Programmatic Style Detection<\/h2>Check active style in PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $class_name = $attributes['className'] ?? '';\n \n \/\/ Check for specific style\n if ( str_contains( $class_name, 'is-style-elevated' ) ) {\n \/\/ Add extra markup for elevated style\n }\n \n return $content;\n}<\/code><\/pre><\/div>In JavaScript:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { className } = attributes;\n \n const isElevated = className?.includes( 'is-style-elevated' );\n const isBordered = className?.includes( 'is-style-bordered' );\n \n return (\n <div { ...useBlockProps() }>\n { isElevated && <div className="shadow-overlay" \/> }\n {\/* ... *\/}\n <\/div>\n );\n}<\/code><\/pre><\/div>Style Previews<\/h2>Styles appear in the Styles panel with previews. The preview uses your block’s example<\/code>:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "example": {\n "attributes": {\n "title": "Card Title",\n "content": "Preview content for the card."\n }\n },\n "styles": [\n { "name": "default", "label": "Default", "isDefault": true },\n { "name": "bordered", "label": "Bordered" }\n ]\n}<\/code><\/pre><\/div>Best Practices<\/h2>Consistent naming:<\/strong> Use descriptive, lowercase names with hyphens.<\/p><\/li>Always include default:<\/strong> Mark one style as isDefault: true<\/code>.<\/p><\/li>Base styles first:<\/strong> Write base styles that apply to all variations.<\/p><\/li>Use specificity wisely:<\/strong> .block.is-style-name<\/code> is usually enough.<\/p><\/li>Support dark mode:<\/strong> Consider color scheme preferences.<\/p><\/li>Test in editor:<\/strong> Ensure styles render correctly in the block editor.<\/p><\/li>Keep it visual:<\/strong> Styles should create visible differences.<\/p><\/li>Limit options:<\/strong> 3-5 styles is usually plenty.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block styles provide visual variations that users can apply from the block toolbar. Defining Styles in block.json { "styles": [ { "name": "default", "label": "Default", "isDefault": true }, { "name":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5519","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions"}],"predecessor-version":[{"id":8997,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions\/8997"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5519"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5519"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5519"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Remove existing styles:<\/p>
import { unregisterBlockStyle } from '@wordpress\/blocks';\n\nwp.domReady( () => {\n \/\/ Remove the "plain" style from core\/quote\n unregisterBlockStyle( 'core\/quote', 'plain' );\n \n \/\/ Remove default style from core\/image\n unregisterBlockStyle( 'core\/image', 'default' );\n} );<\/code><\/pre><\/div>PHP Registration<\/h2>Register styles from PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'highlight',\n 'label' => __( 'Highlight', 'my-plugin' ),\n ]\n );\n \n register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'large-text',\n 'label' => __( 'Large Text', 'my-plugin' ),\n 'is_default' => false,\n 'style_handle' => 'my-plugin-block-styles', \/\/ Optional: associated stylesheet\n ]\n );\n} );<\/code><\/pre><\/div>With inline styles:<\/p>php<\/span><\/use><\/svg><\/button><\/div>register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'fancy',\n 'label' => __( 'Fancy', 'my-plugin' ),\n 'inline_style' => '.is-style-fancy { \n font-family: Georgia, serif;\n font-style: italic;\n border-left: 4px solid currentColor;\n padding-left: 1em;\n }',\n ]\n);<\/code><\/pre><\/div>Unregistering Styles in PHP<\/h2>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n unregister_block_style( 'core\/quote', 'plain' );\n} );<\/code><\/pre><\/div>Note: Must run after the style is registered (priority matters).<\/p>Style Variations via theme.json<\/h2>Define styles in theme.json for theme-specific variations:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "version": 2,\n "styles": {\n "blocks": {\n "core\/button": {\n "variations": {\n "outline": {\n "border": {\n "width": "2px",\n "style": "solid",\n "color": "currentColor"\n },\n "color": {\n "background": "transparent"\n }\n }\n }\n }\n }\n }\n}<\/code><\/pre><\/div>Conditional Style Registration<\/h2>Register styles based on context:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n \/\/ Only for themes that support custom styles\n if ( current_theme_supports( 'custom-block-styles' ) ) {\n register_block_style( 'core\/group', [\n 'name' => 'boxed',\n 'label' => __( 'Boxed', 'my-plugin' ),\n ] );\n }\n} );<\/code><\/pre><\/div>Style-Specific Attributes<\/h2>Some styles might need attribute changes. Handle in edit component:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { useEffect } from '@wordpress\/element';\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { className } = attributes;\n \n \/\/ Adjust attributes based on style\n useEffect( () => {\n if ( className?.includes( 'is-style-compact' ) ) {\n setAttributes( { padding: 'small' } );\n }\n }, [ className ] );\n \n \/\/ ...\n}<\/code><\/pre><\/div>Complete Example: Card Block with Styles<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "styles": [\n {\n "name": "default",\n "label": "Default",\n "isDefault": true\n },\n {\n "name": "bordered",\n "label": "Bordered"\n },\n {\n "name": "elevated",\n "label": "Elevated"\n },\n {\n "name": "filled",\n "label": "Filled"\n }\n ],\n "style": "file:.\/style.css",\n "editorScript": "file:.\/index.js"\n}<\/code><\/pre><\/div>css<\/span><\/use><\/svg><\/button><\/div>\/* style.css *\/\n\n\/* Base styles for all cards *\/\n.wp-block-my-plugin-card {\n padding: 24px;\n border-radius: 8px;\n}\n\n\/* Default style *\/\n.wp-block-my-plugin-card.is-style-default {\n background: #ffffff;\n border: 1px solid #e2e8f0;\n}\n\n\/* Bordered style *\/\n.wp-block-my-plugin-card.is-style-bordered {\n background: transparent;\n border: 2px solid currentColor;\n}\n\n\/* Elevated style *\/\n.wp-block-my-plugin-card.is-style-elevated {\n background: #ffffff;\n border: none;\n box-shadow: \n 0 4px 6px -1px rgba(0, 0, 0, 0.1),\n 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n}\n\n\/* Filled style *\/\n.wp-block-my-plugin-card.is-style-filled {\n background: #f1f5f9;\n border: none;\n}\n\n\/* Dark mode support *\/\n@media (prefers-color-scheme: dark) {\n .wp-block-my-plugin-card.is-style-default {\n background: #1e293b;\n border-color: #334155;\n }\n \n .wp-block-my-plugin-card.is-style-elevated {\n background: #1e293b;\n box-shadow: \n 0 4px 6px -1px rgba(0, 0, 0, 0.3),\n 0 2px 4px -1px rgba(0, 0, 0, 0.2);\n }\n \n .wp-block-my-plugin-card.is-style-filled {\n background: #334155;\n }\n}<\/code><\/pre><\/div>Programmatic Style Detection<\/h2>Check active style in PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $class_name = $attributes['className'] ?? '';\n \n \/\/ Check for specific style\n if ( str_contains( $class_name, 'is-style-elevated' ) ) {\n \/\/ Add extra markup for elevated style\n }\n \n return $content;\n}<\/code><\/pre><\/div>In JavaScript:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { className } = attributes;\n \n const isElevated = className?.includes( 'is-style-elevated' );\n const isBordered = className?.includes( 'is-style-bordered' );\n \n return (\n <div { ...useBlockProps() }>\n { isElevated && <div className="shadow-overlay" \/> }\n {\/* ... *\/}\n <\/div>\n );\n}<\/code><\/pre><\/div>Style Previews<\/h2>Styles appear in the Styles panel with previews. The preview uses your block’s example<\/code>:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "example": {\n "attributes": {\n "title": "Card Title",\n "content": "Preview content for the card."\n }\n },\n "styles": [\n { "name": "default", "label": "Default", "isDefault": true },\n { "name": "bordered", "label": "Bordered" }\n ]\n}<\/code><\/pre><\/div>Best Practices<\/h2>Consistent naming:<\/strong> Use descriptive, lowercase names with hyphens.<\/p><\/li>Always include default:<\/strong> Mark one style as isDefault: true<\/code>.<\/p><\/li>Base styles first:<\/strong> Write base styles that apply to all variations.<\/p><\/li>Use specificity wisely:<\/strong> .block.is-style-name<\/code> is usually enough.<\/p><\/li>Support dark mode:<\/strong> Consider color scheme preferences.<\/p><\/li>Test in editor:<\/strong> Ensure styles render correctly in the block editor.<\/p><\/li>Keep it visual:<\/strong> Styles should create visible differences.<\/p><\/li>Limit options:<\/strong> 3-5 styles is usually plenty.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block styles provide visual variations that users can apply from the block toolbar. Defining Styles in block.json { "styles": [ { "name": "default", "label": "Default", "isDefault": true }, { "name":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5519","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions"}],"predecessor-version":[{"id":8997,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions\/8997"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5519"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5519"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5519"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Register styles from PHP:<\/p>
add_action( 'init', function() {\n register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'highlight',\n 'label' => __( 'Highlight', 'my-plugin' ),\n ]\n );\n \n register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'large-text',\n 'label' => __( 'Large Text', 'my-plugin' ),\n 'is_default' => false,\n 'style_handle' => 'my-plugin-block-styles', \/\/ Optional: associated stylesheet\n ]\n );\n} );<\/code><\/pre><\/div>With inline styles:<\/p>php<\/span><\/use><\/svg><\/button><\/div>register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'fancy',\n 'label' => __( 'Fancy', 'my-plugin' ),\n 'inline_style' => '.is-style-fancy { \n font-family: Georgia, serif;\n font-style: italic;\n border-left: 4px solid currentColor;\n padding-left: 1em;\n }',\n ]\n);<\/code><\/pre><\/div>Unregistering Styles in PHP<\/h2>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n unregister_block_style( 'core\/quote', 'plain' );\n} );<\/code><\/pre><\/div>Note: Must run after the style is registered (priority matters).<\/p>Style Variations via theme.json<\/h2>Define styles in theme.json for theme-specific variations:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "version": 2,\n "styles": {\n "blocks": {\n "core\/button": {\n "variations": {\n "outline": {\n "border": {\n "width": "2px",\n "style": "solid",\n "color": "currentColor"\n },\n "color": {\n "background": "transparent"\n }\n }\n }\n }\n }\n }\n}<\/code><\/pre><\/div>Conditional Style Registration<\/h2>Register styles based on context:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n \/\/ Only for themes that support custom styles\n if ( current_theme_supports( 'custom-block-styles' ) ) {\n register_block_style( 'core\/group', [\n 'name' => 'boxed',\n 'label' => __( 'Boxed', 'my-plugin' ),\n ] );\n }\n} );<\/code><\/pre><\/div>Style-Specific Attributes<\/h2>Some styles might need attribute changes. Handle in edit component:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { useEffect } from '@wordpress\/element';\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { className } = attributes;\n \n \/\/ Adjust attributes based on style\n useEffect( () => {\n if ( className?.includes( 'is-style-compact' ) ) {\n setAttributes( { padding: 'small' } );\n }\n }, [ className ] );\n \n \/\/ ...\n}<\/code><\/pre><\/div>Complete Example: Card Block with Styles<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "styles": [\n {\n "name": "default",\n "label": "Default",\n "isDefault": true\n },\n {\n "name": "bordered",\n "label": "Bordered"\n },\n {\n "name": "elevated",\n "label": "Elevated"\n },\n {\n "name": "filled",\n "label": "Filled"\n }\n ],\n "style": "file:.\/style.css",\n "editorScript": "file:.\/index.js"\n}<\/code><\/pre><\/div>css<\/span><\/use><\/svg><\/button><\/div>\/* style.css *\/\n\n\/* Base styles for all cards *\/\n.wp-block-my-plugin-card {\n padding: 24px;\n border-radius: 8px;\n}\n\n\/* Default style *\/\n.wp-block-my-plugin-card.is-style-default {\n background: #ffffff;\n border: 1px solid #e2e8f0;\n}\n\n\/* Bordered style *\/\n.wp-block-my-plugin-card.is-style-bordered {\n background: transparent;\n border: 2px solid currentColor;\n}\n\n\/* Elevated style *\/\n.wp-block-my-plugin-card.is-style-elevated {\n background: #ffffff;\n border: none;\n box-shadow: \n 0 4px 6px -1px rgba(0, 0, 0, 0.1),\n 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n}\n\n\/* Filled style *\/\n.wp-block-my-plugin-card.is-style-filled {\n background: #f1f5f9;\n border: none;\n}\n\n\/* Dark mode support *\/\n@media (prefers-color-scheme: dark) {\n .wp-block-my-plugin-card.is-style-default {\n background: #1e293b;\n border-color: #334155;\n }\n \n .wp-block-my-plugin-card.is-style-elevated {\n background: #1e293b;\n box-shadow: \n 0 4px 6px -1px rgba(0, 0, 0, 0.3),\n 0 2px 4px -1px rgba(0, 0, 0, 0.2);\n }\n \n .wp-block-my-plugin-card.is-style-filled {\n background: #334155;\n }\n}<\/code><\/pre><\/div>Programmatic Style Detection<\/h2>Check active style in PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $class_name = $attributes['className'] ?? '';\n \n \/\/ Check for specific style\n if ( str_contains( $class_name, 'is-style-elevated' ) ) {\n \/\/ Add extra markup for elevated style\n }\n \n return $content;\n}<\/code><\/pre><\/div>In JavaScript:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { className } = attributes;\n \n const isElevated = className?.includes( 'is-style-elevated' );\n const isBordered = className?.includes( 'is-style-bordered' );\n \n return (\n <div { ...useBlockProps() }>\n { isElevated && <div className="shadow-overlay" \/> }\n {\/* ... *\/}\n <\/div>\n );\n}<\/code><\/pre><\/div>Style Previews<\/h2>Styles appear in the Styles panel with previews. The preview uses your block’s example<\/code>:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "example": {\n "attributes": {\n "title": "Card Title",\n "content": "Preview content for the card."\n }\n },\n "styles": [\n { "name": "default", "label": "Default", "isDefault": true },\n { "name": "bordered", "label": "Bordered" }\n ]\n}<\/code><\/pre><\/div>Best Practices<\/h2>Consistent naming:<\/strong> Use descriptive, lowercase names with hyphens.<\/p><\/li>Always include default:<\/strong> Mark one style as isDefault: true<\/code>.<\/p><\/li>Base styles first:<\/strong> Write base styles that apply to all variations.<\/p><\/li>Use specificity wisely:<\/strong> .block.is-style-name<\/code> is usually enough.<\/p><\/li>Support dark mode:<\/strong> Consider color scheme preferences.<\/p><\/li>Test in editor:<\/strong> Ensure styles render correctly in the block editor.<\/p><\/li>Keep it visual:<\/strong> Styles should create visible differences.<\/p><\/li>Limit options:<\/strong> 3-5 styles is usually plenty.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block styles provide visual variations that users can apply from the block toolbar. Defining Styles in block.json { "styles": [ { "name": "default", "label": "Default", "isDefault": true }, { "name":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5519","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions"}],"predecessor-version":[{"id":8997,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions\/8997"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5519"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5519"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5519"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
With inline styles:<\/p>
register_block_style(\n 'core\/paragraph',\n [\n 'name' => 'fancy',\n 'label' => __( 'Fancy', 'my-plugin' ),\n 'inline_style' => '.is-style-fancy { \n font-family: Georgia, serif;\n font-style: italic;\n border-left: 4px solid currentColor;\n padding-left: 1em;\n }',\n ]\n);<\/code><\/pre><\/div>Unregistering Styles in PHP<\/h2>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n unregister_block_style( 'core\/quote', 'plain' );\n} );<\/code><\/pre><\/div>Note: Must run after the style is registered (priority matters).<\/p>Style Variations via theme.json<\/h2>Define styles in theme.json for theme-specific variations:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "version": 2,\n "styles": {\n "blocks": {\n "core\/button": {\n "variations": {\n "outline": {\n "border": {\n "width": "2px",\n "style": "solid",\n "color": "currentColor"\n },\n "color": {\n "background": "transparent"\n }\n }\n }\n }\n }\n }\n}<\/code><\/pre><\/div>Conditional Style Registration<\/h2>Register styles based on context:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n \/\/ Only for themes that support custom styles\n if ( current_theme_supports( 'custom-block-styles' ) ) {\n register_block_style( 'core\/group', [\n 'name' => 'boxed',\n 'label' => __( 'Boxed', 'my-plugin' ),\n ] );\n }\n} );<\/code><\/pre><\/div>Style-Specific Attributes<\/h2>Some styles might need attribute changes. Handle in edit component:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { useEffect } from '@wordpress\/element';\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { className } = attributes;\n \n \/\/ Adjust attributes based on style\n useEffect( () => {\n if ( className?.includes( 'is-style-compact' ) ) {\n setAttributes( { padding: 'small' } );\n }\n }, [ className ] );\n \n \/\/ ...\n}<\/code><\/pre><\/div>Complete Example: Card Block with Styles<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "styles": [\n {\n "name": "default",\n "label": "Default",\n "isDefault": true\n },\n {\n "name": "bordered",\n "label": "Bordered"\n },\n {\n "name": "elevated",\n "label": "Elevated"\n },\n {\n "name": "filled",\n "label": "Filled"\n }\n ],\n "style": "file:.\/style.css",\n "editorScript": "file:.\/index.js"\n}<\/code><\/pre><\/div>css<\/span><\/use><\/svg><\/button><\/div>\/* style.css *\/\n\n\/* Base styles for all cards *\/\n.wp-block-my-plugin-card {\n padding: 24px;\n border-radius: 8px;\n}\n\n\/* Default style *\/\n.wp-block-my-plugin-card.is-style-default {\n background: #ffffff;\n border: 1px solid #e2e8f0;\n}\n\n\/* Bordered style *\/\n.wp-block-my-plugin-card.is-style-bordered {\n background: transparent;\n border: 2px solid currentColor;\n}\n\n\/* Elevated style *\/\n.wp-block-my-plugin-card.is-style-elevated {\n background: #ffffff;\n border: none;\n box-shadow: \n 0 4px 6px -1px rgba(0, 0, 0, 0.1),\n 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n}\n\n\/* Filled style *\/\n.wp-block-my-plugin-card.is-style-filled {\n background: #f1f5f9;\n border: none;\n}\n\n\/* Dark mode support *\/\n@media (prefers-color-scheme: dark) {\n .wp-block-my-plugin-card.is-style-default {\n background: #1e293b;\n border-color: #334155;\n }\n \n .wp-block-my-plugin-card.is-style-elevated {\n background: #1e293b;\n box-shadow: \n 0 4px 6px -1px rgba(0, 0, 0, 0.3),\n 0 2px 4px -1px rgba(0, 0, 0, 0.2);\n }\n \n .wp-block-my-plugin-card.is-style-filled {\n background: #334155;\n }\n}<\/code><\/pre><\/div>Programmatic Style Detection<\/h2>Check active style in PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $class_name = $attributes['className'] ?? '';\n \n \/\/ Check for specific style\n if ( str_contains( $class_name, 'is-style-elevated' ) ) {\n \/\/ Add extra markup for elevated style\n }\n \n return $content;\n}<\/code><\/pre><\/div>In JavaScript:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { className } = attributes;\n \n const isElevated = className?.includes( 'is-style-elevated' );\n const isBordered = className?.includes( 'is-style-bordered' );\n \n return (\n <div { ...useBlockProps() }>\n { isElevated && <div className="shadow-overlay" \/> }\n {\/* ... *\/}\n <\/div>\n );\n}<\/code><\/pre><\/div>Style Previews<\/h2>Styles appear in the Styles panel with previews. The preview uses your block’s example<\/code>:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "example": {\n "attributes": {\n "title": "Card Title",\n "content": "Preview content for the card."\n }\n },\n "styles": [\n { "name": "default", "label": "Default", "isDefault": true },\n { "name": "bordered", "label": "Bordered" }\n ]\n}<\/code><\/pre><\/div>Best Practices<\/h2>Consistent naming:<\/strong> Use descriptive, lowercase names with hyphens.<\/p><\/li>Always include default:<\/strong> Mark one style as isDefault: true<\/code>.<\/p><\/li>Base styles first:<\/strong> Write base styles that apply to all variations.<\/p><\/li>Use specificity wisely:<\/strong> .block.is-style-name<\/code> is usually enough.<\/p><\/li>Support dark mode:<\/strong> Consider color scheme preferences.<\/p><\/li>Test in editor:<\/strong> Ensure styles render correctly in the block editor.<\/p><\/li>Keep it visual:<\/strong> Styles should create visible differences.<\/p><\/li>Limit options:<\/strong> 3-5 styles is usually plenty.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block styles provide visual variations that users can apply from the block toolbar. Defining Styles in block.json { "styles": [ { "name": "default", "label": "Default", "isDefault": true }, { "name":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5519","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions"}],"predecessor-version":[{"id":8997,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions\/8997"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5519"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5519"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5519"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
add_action( 'init', function() {\n unregister_block_style( 'core\/quote', 'plain' );\n} );<\/code><\/pre><\/div>Note: Must run after the style is registered (priority matters).<\/p>Style Variations via theme.json<\/h2>Define styles in theme.json for theme-specific variations:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "version": 2,\n "styles": {\n "blocks": {\n "core\/button": {\n "variations": {\n "outline": {\n "border": {\n "width": "2px",\n "style": "solid",\n "color": "currentColor"\n },\n "color": {\n "background": "transparent"\n }\n }\n }\n }\n }\n }\n}<\/code><\/pre><\/div>Conditional Style Registration<\/h2>Register styles based on context:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n \/\/ Only for themes that support custom styles\n if ( current_theme_supports( 'custom-block-styles' ) ) {\n register_block_style( 'core\/group', [\n 'name' => 'boxed',\n 'label' => __( 'Boxed', 'my-plugin' ),\n ] );\n }\n} );<\/code><\/pre><\/div>Style-Specific Attributes<\/h2>Some styles might need attribute changes. Handle in edit component:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { useEffect } from '@wordpress\/element';\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { className } = attributes;\n \n \/\/ Adjust attributes based on style\n useEffect( () => {\n if ( className?.includes( 'is-style-compact' ) ) {\n setAttributes( { padding: 'small' } );\n }\n }, [ className ] );\n \n \/\/ ...\n}<\/code><\/pre><\/div>Complete Example: Card Block with Styles<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "styles": [\n {\n "name": "default",\n "label": "Default",\n "isDefault": true\n },\n {\n "name": "bordered",\n "label": "Bordered"\n },\n {\n "name": "elevated",\n "label": "Elevated"\n },\n {\n "name": "filled",\n "label": "Filled"\n }\n ],\n "style": "file:.\/style.css",\n "editorScript": "file:.\/index.js"\n}<\/code><\/pre><\/div>css<\/span><\/use><\/svg><\/button><\/div>\/* style.css *\/\n\n\/* Base styles for all cards *\/\n.wp-block-my-plugin-card {\n padding: 24px;\n border-radius: 8px;\n}\n\n\/* Default style *\/\n.wp-block-my-plugin-card.is-style-default {\n background: #ffffff;\n border: 1px solid #e2e8f0;\n}\n\n\/* Bordered style *\/\n.wp-block-my-plugin-card.is-style-bordered {\n background: transparent;\n border: 2px solid currentColor;\n}\n\n\/* Elevated style *\/\n.wp-block-my-plugin-card.is-style-elevated {\n background: #ffffff;\n border: none;\n box-shadow: \n 0 4px 6px -1px rgba(0, 0, 0, 0.1),\n 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n}\n\n\/* Filled style *\/\n.wp-block-my-plugin-card.is-style-filled {\n background: #f1f5f9;\n border: none;\n}\n\n\/* Dark mode support *\/\n@media (prefers-color-scheme: dark) {\n .wp-block-my-plugin-card.is-style-default {\n background: #1e293b;\n border-color: #334155;\n }\n \n .wp-block-my-plugin-card.is-style-elevated {\n background: #1e293b;\n box-shadow: \n 0 4px 6px -1px rgba(0, 0, 0, 0.3),\n 0 2px 4px -1px rgba(0, 0, 0, 0.2);\n }\n \n .wp-block-my-plugin-card.is-style-filled {\n background: #334155;\n }\n}<\/code><\/pre><\/div>Programmatic Style Detection<\/h2>Check active style in PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $class_name = $attributes['className'] ?? '';\n \n \/\/ Check for specific style\n if ( str_contains( $class_name, 'is-style-elevated' ) ) {\n \/\/ Add extra markup for elevated style\n }\n \n return $content;\n}<\/code><\/pre><\/div>In JavaScript:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { className } = attributes;\n \n const isElevated = className?.includes( 'is-style-elevated' );\n const isBordered = className?.includes( 'is-style-bordered' );\n \n return (\n <div { ...useBlockProps() }>\n { isElevated && <div className="shadow-overlay" \/> }\n {\/* ... *\/}\n <\/div>\n );\n}<\/code><\/pre><\/div>Style Previews<\/h2>Styles appear in the Styles panel with previews. The preview uses your block’s example<\/code>:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "example": {\n "attributes": {\n "title": "Card Title",\n "content": "Preview content for the card."\n }\n },\n "styles": [\n { "name": "default", "label": "Default", "isDefault": true },\n { "name": "bordered", "label": "Bordered" }\n ]\n}<\/code><\/pre><\/div>Best Practices<\/h2>Consistent naming:<\/strong> Use descriptive, lowercase names with hyphens.<\/p><\/li>Always include default:<\/strong> Mark one style as isDefault: true<\/code>.<\/p><\/li>Base styles first:<\/strong> Write base styles that apply to all variations.<\/p><\/li>Use specificity wisely:<\/strong> .block.is-style-name<\/code> is usually enough.<\/p><\/li>Support dark mode:<\/strong> Consider color scheme preferences.<\/p><\/li>Test in editor:<\/strong> Ensure styles render correctly in the block editor.<\/p><\/li>Keep it visual:<\/strong> Styles should create visible differences.<\/p><\/li>Limit options:<\/strong> 3-5 styles is usually plenty.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block styles provide visual variations that users can apply from the block toolbar. Defining Styles in block.json { "styles": [ { "name": "default", "label": "Default", "isDefault": true }, { "name":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5519","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions"}],"predecessor-version":[{"id":8997,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions\/8997"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5519"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5519"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5519"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Note: Must run after the style is registered (priority matters).<\/p>
Define styles in theme.json for theme-specific variations:<\/p>
{\n "version": 2,\n "styles": {\n "blocks": {\n "core\/button": {\n "variations": {\n "outline": {\n "border": {\n "width": "2px",\n "style": "solid",\n "color": "currentColor"\n },\n "color": {\n "background": "transparent"\n }\n }\n }\n }\n }\n }\n}<\/code><\/pre><\/div>Conditional Style Registration<\/h2>Register styles based on context:<\/p>php<\/span><\/use><\/svg><\/button><\/div>add_action( 'init', function() {\n \/\/ Only for themes that support custom styles\n if ( current_theme_supports( 'custom-block-styles' ) ) {\n register_block_style( 'core\/group', [\n 'name' => 'boxed',\n 'label' => __( 'Boxed', 'my-plugin' ),\n ] );\n }\n} );<\/code><\/pre><\/div>Style-Specific Attributes<\/h2>Some styles might need attribute changes. Handle in edit component:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { useEffect } from '@wordpress\/element';\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { className } = attributes;\n \n \/\/ Adjust attributes based on style\n useEffect( () => {\n if ( className?.includes( 'is-style-compact' ) ) {\n setAttributes( { padding: 'small' } );\n }\n }, [ className ] );\n \n \/\/ ...\n}<\/code><\/pre><\/div>Complete Example: Card Block with Styles<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "styles": [\n {\n "name": "default",\n "label": "Default",\n "isDefault": true\n },\n {\n "name": "bordered",\n "label": "Bordered"\n },\n {\n "name": "elevated",\n "label": "Elevated"\n },\n {\n "name": "filled",\n "label": "Filled"\n }\n ],\n "style": "file:.\/style.css",\n "editorScript": "file:.\/index.js"\n}<\/code><\/pre><\/div>css<\/span><\/use><\/svg><\/button><\/div>\/* style.css *\/\n\n\/* Base styles for all cards *\/\n.wp-block-my-plugin-card {\n padding: 24px;\n border-radius: 8px;\n}\n\n\/* Default style *\/\n.wp-block-my-plugin-card.is-style-default {\n background: #ffffff;\n border: 1px solid #e2e8f0;\n}\n\n\/* Bordered style *\/\n.wp-block-my-plugin-card.is-style-bordered {\n background: transparent;\n border: 2px solid currentColor;\n}\n\n\/* Elevated style *\/\n.wp-block-my-plugin-card.is-style-elevated {\n background: #ffffff;\n border: none;\n box-shadow: \n 0 4px 6px -1px rgba(0, 0, 0, 0.1),\n 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n}\n\n\/* Filled style *\/\n.wp-block-my-plugin-card.is-style-filled {\n background: #f1f5f9;\n border: none;\n}\n\n\/* Dark mode support *\/\n@media (prefers-color-scheme: dark) {\n .wp-block-my-plugin-card.is-style-default {\n background: #1e293b;\n border-color: #334155;\n }\n \n .wp-block-my-plugin-card.is-style-elevated {\n background: #1e293b;\n box-shadow: \n 0 4px 6px -1px rgba(0, 0, 0, 0.3),\n 0 2px 4px -1px rgba(0, 0, 0, 0.2);\n }\n \n .wp-block-my-plugin-card.is-style-filled {\n background: #334155;\n }\n}<\/code><\/pre><\/div>Programmatic Style Detection<\/h2>Check active style in PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $class_name = $attributes['className'] ?? '';\n \n \/\/ Check for specific style\n if ( str_contains( $class_name, 'is-style-elevated' ) ) {\n \/\/ Add extra markup for elevated style\n }\n \n return $content;\n}<\/code><\/pre><\/div>In JavaScript:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { className } = attributes;\n \n const isElevated = className?.includes( 'is-style-elevated' );\n const isBordered = className?.includes( 'is-style-bordered' );\n \n return (\n <div { ...useBlockProps() }>\n { isElevated && <div className="shadow-overlay" \/> }\n {\/* ... *\/}\n <\/div>\n );\n}<\/code><\/pre><\/div>Style Previews<\/h2>Styles appear in the Styles panel with previews. The preview uses your block’s example<\/code>:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "example": {\n "attributes": {\n "title": "Card Title",\n "content": "Preview content for the card."\n }\n },\n "styles": [\n { "name": "default", "label": "Default", "isDefault": true },\n { "name": "bordered", "label": "Bordered" }\n ]\n}<\/code><\/pre><\/div>Best Practices<\/h2>Consistent naming:<\/strong> Use descriptive, lowercase names with hyphens.<\/p><\/li>Always include default:<\/strong> Mark one style as isDefault: true<\/code>.<\/p><\/li>Base styles first:<\/strong> Write base styles that apply to all variations.<\/p><\/li>Use specificity wisely:<\/strong> .block.is-style-name<\/code> is usually enough.<\/p><\/li>Support dark mode:<\/strong> Consider color scheme preferences.<\/p><\/li>Test in editor:<\/strong> Ensure styles render correctly in the block editor.<\/p><\/li>Keep it visual:<\/strong> Styles should create visible differences.<\/p><\/li>Limit options:<\/strong> 3-5 styles is usually plenty.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block styles provide visual variations that users can apply from the block toolbar. Defining Styles in block.json { "styles": [ { "name": "default", "label": "Default", "isDefault": true }, { "name":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5519","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions"}],"predecessor-version":[{"id":8997,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions\/8997"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5519"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5519"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5519"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Register styles based on context:<\/p>
add_action( 'init', function() {\n \/\/ Only for themes that support custom styles\n if ( current_theme_supports( 'custom-block-styles' ) ) {\n register_block_style( 'core\/group', [\n 'name' => 'boxed',\n 'label' => __( 'Boxed', 'my-plugin' ),\n ] );\n }\n} );<\/code><\/pre><\/div>Style-Specific Attributes<\/h2>Some styles might need attribute changes. Handle in edit component:<\/p>js<\/span><\/use><\/svg><\/button><\/div>import { useEffect } from '@wordpress\/element';\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { className } = attributes;\n \n \/\/ Adjust attributes based on style\n useEffect( () => {\n if ( className?.includes( 'is-style-compact' ) ) {\n setAttributes( { padding: 'small' } );\n }\n }, [ className ] );\n \n \/\/ ...\n}<\/code><\/pre><\/div>Complete Example: Card Block with Styles<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "styles": [\n {\n "name": "default",\n "label": "Default",\n "isDefault": true\n },\n {\n "name": "bordered",\n "label": "Bordered"\n },\n {\n "name": "elevated",\n "label": "Elevated"\n },\n {\n "name": "filled",\n "label": "Filled"\n }\n ],\n "style": "file:.\/style.css",\n "editorScript": "file:.\/index.js"\n}<\/code><\/pre><\/div>css<\/span><\/use><\/svg><\/button><\/div>\/* style.css *\/\n\n\/* Base styles for all cards *\/\n.wp-block-my-plugin-card {\n padding: 24px;\n border-radius: 8px;\n}\n\n\/* Default style *\/\n.wp-block-my-plugin-card.is-style-default {\n background: #ffffff;\n border: 1px solid #e2e8f0;\n}\n\n\/* Bordered style *\/\n.wp-block-my-plugin-card.is-style-bordered {\n background: transparent;\n border: 2px solid currentColor;\n}\n\n\/* Elevated style *\/\n.wp-block-my-plugin-card.is-style-elevated {\n background: #ffffff;\n border: none;\n box-shadow: \n 0 4px 6px -1px rgba(0, 0, 0, 0.1),\n 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n}\n\n\/* Filled style *\/\n.wp-block-my-plugin-card.is-style-filled {\n background: #f1f5f9;\n border: none;\n}\n\n\/* Dark mode support *\/\n@media (prefers-color-scheme: dark) {\n .wp-block-my-plugin-card.is-style-default {\n background: #1e293b;\n border-color: #334155;\n }\n \n .wp-block-my-plugin-card.is-style-elevated {\n background: #1e293b;\n box-shadow: \n 0 4px 6px -1px rgba(0, 0, 0, 0.3),\n 0 2px 4px -1px rgba(0, 0, 0, 0.2);\n }\n \n .wp-block-my-plugin-card.is-style-filled {\n background: #334155;\n }\n}<\/code><\/pre><\/div>Programmatic Style Detection<\/h2>Check active style in PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $class_name = $attributes['className'] ?? '';\n \n \/\/ Check for specific style\n if ( str_contains( $class_name, 'is-style-elevated' ) ) {\n \/\/ Add extra markup for elevated style\n }\n \n return $content;\n}<\/code><\/pre><\/div>In JavaScript:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { className } = attributes;\n \n const isElevated = className?.includes( 'is-style-elevated' );\n const isBordered = className?.includes( 'is-style-bordered' );\n \n return (\n <div { ...useBlockProps() }>\n { isElevated && <div className="shadow-overlay" \/> }\n {\/* ... *\/}\n <\/div>\n );\n}<\/code><\/pre><\/div>Style Previews<\/h2>Styles appear in the Styles panel with previews. The preview uses your block’s example<\/code>:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "example": {\n "attributes": {\n "title": "Card Title",\n "content": "Preview content for the card."\n }\n },\n "styles": [\n { "name": "default", "label": "Default", "isDefault": true },\n { "name": "bordered", "label": "Bordered" }\n ]\n}<\/code><\/pre><\/div>Best Practices<\/h2>Consistent naming:<\/strong> Use descriptive, lowercase names with hyphens.<\/p><\/li>Always include default:<\/strong> Mark one style as isDefault: true<\/code>.<\/p><\/li>Base styles first:<\/strong> Write base styles that apply to all variations.<\/p><\/li>Use specificity wisely:<\/strong> .block.is-style-name<\/code> is usually enough.<\/p><\/li>Support dark mode:<\/strong> Consider color scheme preferences.<\/p><\/li>Test in editor:<\/strong> Ensure styles render correctly in the block editor.<\/p><\/li>Keep it visual:<\/strong> Styles should create visible differences.<\/p><\/li>Limit options:<\/strong> 3-5 styles is usually plenty.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block styles provide visual variations that users can apply from the block toolbar. Defining Styles in block.json { "styles": [ { "name": "default", "label": "Default", "isDefault": true }, { "name":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5519","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions"}],"predecessor-version":[{"id":8997,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions\/8997"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5519"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5519"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5519"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Some styles might need attribute changes. Handle in edit component:<\/p>
import { useEffect } from '@wordpress\/element';\n\nexport default function Edit( { attributes, setAttributes } ) {\n const { className } = attributes;\n \n \/\/ Adjust attributes based on style\n useEffect( () => {\n if ( className?.includes( 'is-style-compact' ) ) {\n setAttributes( { padding: 'small' } );\n }\n }, [ className ] );\n \n \/\/ ...\n}<\/code><\/pre><\/div>Complete Example: Card Block with Styles<\/h2>json<\/span><\/use><\/svg><\/button><\/div>{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "styles": [\n {\n "name": "default",\n "label": "Default",\n "isDefault": true\n },\n {\n "name": "bordered",\n "label": "Bordered"\n },\n {\n "name": "elevated",\n "label": "Elevated"\n },\n {\n "name": "filled",\n "label": "Filled"\n }\n ],\n "style": "file:.\/style.css",\n "editorScript": "file:.\/index.js"\n}<\/code><\/pre><\/div>css<\/span><\/use><\/svg><\/button><\/div>\/* style.css *\/\n\n\/* Base styles for all cards *\/\n.wp-block-my-plugin-card {\n padding: 24px;\n border-radius: 8px;\n}\n\n\/* Default style *\/\n.wp-block-my-plugin-card.is-style-default {\n background: #ffffff;\n border: 1px solid #e2e8f0;\n}\n\n\/* Bordered style *\/\n.wp-block-my-plugin-card.is-style-bordered {\n background: transparent;\n border: 2px solid currentColor;\n}\n\n\/* Elevated style *\/\n.wp-block-my-plugin-card.is-style-elevated {\n background: #ffffff;\n border: none;\n box-shadow: \n 0 4px 6px -1px rgba(0, 0, 0, 0.1),\n 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n}\n\n\/* Filled style *\/\n.wp-block-my-plugin-card.is-style-filled {\n background: #f1f5f9;\n border: none;\n}\n\n\/* Dark mode support *\/\n@media (prefers-color-scheme: dark) {\n .wp-block-my-plugin-card.is-style-default {\n background: #1e293b;\n border-color: #334155;\n }\n \n .wp-block-my-plugin-card.is-style-elevated {\n background: #1e293b;\n box-shadow: \n 0 4px 6px -1px rgba(0, 0, 0, 0.3),\n 0 2px 4px -1px rgba(0, 0, 0, 0.2);\n }\n \n .wp-block-my-plugin-card.is-style-filled {\n background: #334155;\n }\n}<\/code><\/pre><\/div>Programmatic Style Detection<\/h2>Check active style in PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $class_name = $attributes['className'] ?? '';\n \n \/\/ Check for specific style\n if ( str_contains( $class_name, 'is-style-elevated' ) ) {\n \/\/ Add extra markup for elevated style\n }\n \n return $content;\n}<\/code><\/pre><\/div>In JavaScript:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { className } = attributes;\n \n const isElevated = className?.includes( 'is-style-elevated' );\n const isBordered = className?.includes( 'is-style-bordered' );\n \n return (\n <div { ...useBlockProps() }>\n { isElevated && <div className="shadow-overlay" \/> }\n {\/* ... *\/}\n <\/div>\n );\n}<\/code><\/pre><\/div>Style Previews<\/h2>Styles appear in the Styles panel with previews. The preview uses your block’s example<\/code>:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "example": {\n "attributes": {\n "title": "Card Title",\n "content": "Preview content for the card."\n }\n },\n "styles": [\n { "name": "default", "label": "Default", "isDefault": true },\n { "name": "bordered", "label": "Bordered" }\n ]\n}<\/code><\/pre><\/div>Best Practices<\/h2>Consistent naming:<\/strong> Use descriptive, lowercase names with hyphens.<\/p><\/li>Always include default:<\/strong> Mark one style as isDefault: true<\/code>.<\/p><\/li>Base styles first:<\/strong> Write base styles that apply to all variations.<\/p><\/li>Use specificity wisely:<\/strong> .block.is-style-name<\/code> is usually enough.<\/p><\/li>Support dark mode:<\/strong> Consider color scheme preferences.<\/p><\/li>Test in editor:<\/strong> Ensure styles render correctly in the block editor.<\/p><\/li>Keep it visual:<\/strong> Styles should create visible differences.<\/p><\/li>Limit options:<\/strong> 3-5 styles is usually plenty.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block styles provide visual variations that users can apply from the block toolbar. Defining Styles in block.json { "styles": [ { "name": "default", "label": "Default", "isDefault": true }, { "name":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5519","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions"}],"predecessor-version":[{"id":8997,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions\/8997"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5519"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5519"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5519"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
{\n "$schema": "https:\/\/schemas.wp.org\/trunk\/block.json",\n "apiVersion": 3,\n "name": "my-plugin\/card",\n "title": "Card",\n "category": "design",\n "styles": [\n {\n "name": "default",\n "label": "Default",\n "isDefault": true\n },\n {\n "name": "bordered",\n "label": "Bordered"\n },\n {\n "name": "elevated",\n "label": "Elevated"\n },\n {\n "name": "filled",\n "label": "Filled"\n }\n ],\n "style": "file:.\/style.css",\n "editorScript": "file:.\/index.js"\n}<\/code><\/pre><\/div>css<\/span><\/use><\/svg><\/button><\/div>\/* style.css *\/\n\n\/* Base styles for all cards *\/\n.wp-block-my-plugin-card {\n padding: 24px;\n border-radius: 8px;\n}\n\n\/* Default style *\/\n.wp-block-my-plugin-card.is-style-default {\n background: #ffffff;\n border: 1px solid #e2e8f0;\n}\n\n\/* Bordered style *\/\n.wp-block-my-plugin-card.is-style-bordered {\n background: transparent;\n border: 2px solid currentColor;\n}\n\n\/* Elevated style *\/\n.wp-block-my-plugin-card.is-style-elevated {\n background: #ffffff;\n border: none;\n box-shadow: \n 0 4px 6px -1px rgba(0, 0, 0, 0.1),\n 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n}\n\n\/* Filled style *\/\n.wp-block-my-plugin-card.is-style-filled {\n background: #f1f5f9;\n border: none;\n}\n\n\/* Dark mode support *\/\n@media (prefers-color-scheme: dark) {\n .wp-block-my-plugin-card.is-style-default {\n background: #1e293b;\n border-color: #334155;\n }\n \n .wp-block-my-plugin-card.is-style-elevated {\n background: #1e293b;\n box-shadow: \n 0 4px 6px -1px rgba(0, 0, 0, 0.3),\n 0 2px 4px -1px rgba(0, 0, 0, 0.2);\n }\n \n .wp-block-my-plugin-card.is-style-filled {\n background: #334155;\n }\n}<\/code><\/pre><\/div>Programmatic Style Detection<\/h2>Check active style in PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $class_name = $attributes['className'] ?? '';\n \n \/\/ Check for specific style\n if ( str_contains( $class_name, 'is-style-elevated' ) ) {\n \/\/ Add extra markup for elevated style\n }\n \n return $content;\n}<\/code><\/pre><\/div>In JavaScript:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { className } = attributes;\n \n const isElevated = className?.includes( 'is-style-elevated' );\n const isBordered = className?.includes( 'is-style-bordered' );\n \n return (\n <div { ...useBlockProps() }>\n { isElevated && <div className="shadow-overlay" \/> }\n {\/* ... *\/}\n <\/div>\n );\n}<\/code><\/pre><\/div>Style Previews<\/h2>Styles appear in the Styles panel with previews. The preview uses your block’s example<\/code>:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "example": {\n "attributes": {\n "title": "Card Title",\n "content": "Preview content for the card."\n }\n },\n "styles": [\n { "name": "default", "label": "Default", "isDefault": true },\n { "name": "bordered", "label": "Bordered" }\n ]\n}<\/code><\/pre><\/div>Best Practices<\/h2>Consistent naming:<\/strong> Use descriptive, lowercase names with hyphens.<\/p><\/li>Always include default:<\/strong> Mark one style as isDefault: true<\/code>.<\/p><\/li>Base styles first:<\/strong> Write base styles that apply to all variations.<\/p><\/li>Use specificity wisely:<\/strong> .block.is-style-name<\/code> is usually enough.<\/p><\/li>Support dark mode:<\/strong> Consider color scheme preferences.<\/p><\/li>Test in editor:<\/strong> Ensure styles render correctly in the block editor.<\/p><\/li>Keep it visual:<\/strong> Styles should create visible differences.<\/p><\/li>Limit options:<\/strong> 3-5 styles is usually plenty.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block styles provide visual variations that users can apply from the block toolbar. Defining Styles in block.json { "styles": [ { "name": "default", "label": "Default", "isDefault": true }, { "name":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5519","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions"}],"predecessor-version":[{"id":8997,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions\/8997"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5519"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5519"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5519"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\/* style.css *\/\n\n\/* Base styles for all cards *\/\n.wp-block-my-plugin-card {\n padding: 24px;\n border-radius: 8px;\n}\n\n\/* Default style *\/\n.wp-block-my-plugin-card.is-style-default {\n background: #ffffff;\n border: 1px solid #e2e8f0;\n}\n\n\/* Bordered style *\/\n.wp-block-my-plugin-card.is-style-bordered {\n background: transparent;\n border: 2px solid currentColor;\n}\n\n\/* Elevated style *\/\n.wp-block-my-plugin-card.is-style-elevated {\n background: #ffffff;\n border: none;\n box-shadow: \n 0 4px 6px -1px rgba(0, 0, 0, 0.1),\n 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n}\n\n\/* Filled style *\/\n.wp-block-my-plugin-card.is-style-filled {\n background: #f1f5f9;\n border: none;\n}\n\n\/* Dark mode support *\/\n@media (prefers-color-scheme: dark) {\n .wp-block-my-plugin-card.is-style-default {\n background: #1e293b;\n border-color: #334155;\n }\n \n .wp-block-my-plugin-card.is-style-elevated {\n background: #1e293b;\n box-shadow: \n 0 4px 6px -1px rgba(0, 0, 0, 0.3),\n 0 2px 4px -1px rgba(0, 0, 0, 0.2);\n }\n \n .wp-block-my-plugin-card.is-style-filled {\n background: #334155;\n }\n}<\/code><\/pre><\/div>Programmatic Style Detection<\/h2>Check active style in PHP:<\/p>php<\/span><\/use><\/svg><\/button><\/div>function render_my_block( $attributes, $content, $block ) {\n $class_name = $attributes['className'] ?? '';\n \n \/\/ Check for specific style\n if ( str_contains( $class_name, 'is-style-elevated' ) ) {\n \/\/ Add extra markup for elevated style\n }\n \n return $content;\n}<\/code><\/pre><\/div>In JavaScript:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { className } = attributes;\n \n const isElevated = className?.includes( 'is-style-elevated' );\n const isBordered = className?.includes( 'is-style-bordered' );\n \n return (\n <div { ...useBlockProps() }>\n { isElevated && <div className="shadow-overlay" \/> }\n {\/* ... *\/}\n <\/div>\n );\n}<\/code><\/pre><\/div>Style Previews<\/h2>Styles appear in the Styles panel with previews. The preview uses your block’s example<\/code>:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "example": {\n "attributes": {\n "title": "Card Title",\n "content": "Preview content for the card."\n }\n },\n "styles": [\n { "name": "default", "label": "Default", "isDefault": true },\n { "name": "bordered", "label": "Bordered" }\n ]\n}<\/code><\/pre><\/div>Best Practices<\/h2>Consistent naming:<\/strong> Use descriptive, lowercase names with hyphens.<\/p><\/li>Always include default:<\/strong> Mark one style as isDefault: true<\/code>.<\/p><\/li>Base styles first:<\/strong> Write base styles that apply to all variations.<\/p><\/li>Use specificity wisely:<\/strong> .block.is-style-name<\/code> is usually enough.<\/p><\/li>Support dark mode:<\/strong> Consider color scheme preferences.<\/p><\/li>Test in editor:<\/strong> Ensure styles render correctly in the block editor.<\/p><\/li>Keep it visual:<\/strong> Styles should create visible differences.<\/p><\/li>Limit options:<\/strong> 3-5 styles is usually plenty.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block styles provide visual variations that users can apply from the block toolbar. Defining Styles in block.json { "styles": [ { "name": "default", "label": "Default", "isDefault": true }, { "name":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5519","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions"}],"predecessor-version":[{"id":8997,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions\/8997"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5519"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5519"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5519"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Check active style in PHP:<\/p>
function render_my_block( $attributes, $content, $block ) {\n $class_name = $attributes['className'] ?? '';\n \n \/\/ Check for specific style\n if ( str_contains( $class_name, 'is-style-elevated' ) ) {\n \/\/ Add extra markup for elevated style\n }\n \n return $content;\n}<\/code><\/pre><\/div>In JavaScript:<\/p>js<\/span><\/use><\/svg><\/button><\/div>export default function Edit( { attributes } ) {\n const { className } = attributes;\n \n const isElevated = className?.includes( 'is-style-elevated' );\n const isBordered = className?.includes( 'is-style-bordered' );\n \n return (\n <div { ...useBlockProps() }>\n { isElevated && <div className="shadow-overlay" \/> }\n {\/* ... *\/}\n <\/div>\n );\n}<\/code><\/pre><\/div>Style Previews<\/h2>Styles appear in the Styles panel with previews. The preview uses your block’s example<\/code>:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "example": {\n "attributes": {\n "title": "Card Title",\n "content": "Preview content for the card."\n }\n },\n "styles": [\n { "name": "default", "label": "Default", "isDefault": true },\n { "name": "bordered", "label": "Bordered" }\n ]\n}<\/code><\/pre><\/div>Best Practices<\/h2>Consistent naming:<\/strong> Use descriptive, lowercase names with hyphens.<\/p><\/li>Always include default:<\/strong> Mark one style as isDefault: true<\/code>.<\/p><\/li>Base styles first:<\/strong> Write base styles that apply to all variations.<\/p><\/li>Use specificity wisely:<\/strong> .block.is-style-name<\/code> is usually enough.<\/p><\/li>Support dark mode:<\/strong> Consider color scheme preferences.<\/p><\/li>Test in editor:<\/strong> Ensure styles render correctly in the block editor.<\/p><\/li>Keep it visual:<\/strong> Styles should create visible differences.<\/p><\/li>Limit options:<\/strong> 3-5 styles is usually plenty.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block styles provide visual variations that users can apply from the block toolbar. Defining Styles in block.json { "styles": [ { "name": "default", "label": "Default", "isDefault": true }, { "name":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5519","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions"}],"predecessor-version":[{"id":8997,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions\/8997"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5519"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5519"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5519"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
In JavaScript:<\/p>
export default function Edit( { attributes } ) {\n const { className } = attributes;\n \n const isElevated = className?.includes( 'is-style-elevated' );\n const isBordered = className?.includes( 'is-style-bordered' );\n \n return (\n <div { ...useBlockProps() }>\n { isElevated && <div className="shadow-overlay" \/> }\n {\/* ... *\/}\n <\/div>\n );\n}<\/code><\/pre><\/div>Style Previews<\/h2>Styles appear in the Styles panel with previews. The preview uses your block’s example<\/code>:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "example": {\n "attributes": {\n "title": "Card Title",\n "content": "Preview content for the card."\n }\n },\n "styles": [\n { "name": "default", "label": "Default", "isDefault": true },\n { "name": "bordered", "label": "Bordered" }\n ]\n}<\/code><\/pre><\/div>Best Practices<\/h2>Consistent naming:<\/strong> Use descriptive, lowercase names with hyphens.<\/p><\/li>Always include default:<\/strong> Mark one style as isDefault: true<\/code>.<\/p><\/li>Base styles first:<\/strong> Write base styles that apply to all variations.<\/p><\/li>Use specificity wisely:<\/strong> .block.is-style-name<\/code> is usually enough.<\/p><\/li>Support dark mode:<\/strong> Consider color scheme preferences.<\/p><\/li>Test in editor:<\/strong> Ensure styles render correctly in the block editor.<\/p><\/li>Keep it visual:<\/strong> Styles should create visible differences.<\/p><\/li>Limit options:<\/strong> 3-5 styles is usually plenty.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block styles provide visual variations that users can apply from the block toolbar. Defining Styles in block.json { "styles": [ { "name": "default", "label": "Default", "isDefault": true }, { "name":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5519","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions"}],"predecessor-version":[{"id":8997,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions\/8997"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5519"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5519"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5519"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Styles appear in the Styles panel with previews. The preview uses your block’s example<\/code>:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "example": {\n "attributes": {\n "title": "Card Title",\n "content": "Preview content for the card."\n }\n },\n "styles": [\n { "name": "default", "label": "Default", "isDefault": true },\n { "name": "bordered", "label": "Bordered" }\n ]\n}<\/code><\/pre><\/div>Best Practices<\/h2>Consistent naming:<\/strong> Use descriptive, lowercase names with hyphens.<\/p><\/li>Always include default:<\/strong> Mark one style as isDefault: true<\/code>.<\/p><\/li>Base styles first:<\/strong> Write base styles that apply to all variations.<\/p><\/li>Use specificity wisely:<\/strong> .block.is-style-name<\/code> is usually enough.<\/p><\/li>Support dark mode:<\/strong> Consider color scheme preferences.<\/p><\/li>Test in editor:<\/strong> Ensure styles render correctly in the block editor.<\/p><\/li>Keep it visual:<\/strong> Styles should create visible differences.<\/p><\/li>Limit options:<\/strong> 3-5 styles is usually plenty.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block styles provide visual variations that users can apply from the block toolbar. Defining Styles in block.json { "styles": [ { "name": "default", "label": "Default", "isDefault": true }, { "name":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5519","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions"}],"predecessor-version":[{"id":8997,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions\/8997"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5519"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5519"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5519"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
example<\/code>:<\/p>json<\/span><\/use><\/svg><\/button><\/div>{\n "example": {\n "attributes": {\n "title": "Card Title",\n "content": "Preview content for the card."\n }\n },\n "styles": [\n { "name": "default", "label": "Default", "isDefault": true },\n { "name": "bordered", "label": "Bordered" }\n ]\n}<\/code><\/pre><\/div>Best Practices<\/h2>Consistent naming:<\/strong> Use descriptive, lowercase names with hyphens.<\/p><\/li>Always include default:<\/strong> Mark one style as isDefault: true<\/code>.<\/p><\/li>Base styles first:<\/strong> Write base styles that apply to all variations.<\/p><\/li>Use specificity wisely:<\/strong> .block.is-style-name<\/code> is usually enough.<\/p><\/li>Support dark mode:<\/strong> Consider color scheme preferences.<\/p><\/li>Test in editor:<\/strong> Ensure styles render correctly in the block editor.<\/p><\/li>Keep it visual:<\/strong> Styles should create visible differences.<\/p><\/li>Limit options:<\/strong> 3-5 styles is usually plenty.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block styles provide visual variations that users can apply from the block toolbar. Defining Styles in block.json { "styles": [ { "name": "default", "label": "Default", "isDefault": true }, { "name":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5519","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions"}],"predecessor-version":[{"id":8997,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions\/8997"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5519"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5519"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5519"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
{\n "example": {\n "attributes": {\n "title": "Card Title",\n "content": "Preview content for the card."\n }\n },\n "styles": [\n { "name": "default", "label": "Default", "isDefault": true },\n { "name": "bordered", "label": "Bordered" }\n ]\n}<\/code><\/pre><\/div>Best Practices<\/h2>Consistent naming:<\/strong> Use descriptive, lowercase names with hyphens.<\/p><\/li>Always include default:<\/strong> Mark one style as isDefault: true<\/code>.<\/p><\/li>Base styles first:<\/strong> Write base styles that apply to all variations.<\/p><\/li>Use specificity wisely:<\/strong> .block.is-style-name<\/code> is usually enough.<\/p><\/li>Support dark mode:<\/strong> Consider color scheme preferences.<\/p><\/li>Test in editor:<\/strong> Ensure styles render correctly in the block editor.<\/p><\/li>Keep it visual:<\/strong> Styles should create visible differences.<\/p><\/li>Limit options:<\/strong> 3-5 styles is usually plenty.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block styles provide visual variations that users can apply from the block toolbar. Defining Styles in block.json { "styles": [ { "name": "default", "label": "Default", "isDefault": true }, { "name":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5519","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions"}],"predecessor-version":[{"id":8997,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions\/8997"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5519"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5519"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5519"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Consistent naming:<\/strong> Use descriptive, lowercase names with hyphens.<\/p><\/li>Always include default:<\/strong> Mark one style as isDefault: true<\/code>.<\/p><\/li>Base styles first:<\/strong> Write base styles that apply to all variations.<\/p><\/li>Use specificity wisely:<\/strong> .block.is-style-name<\/code> is usually enough.<\/p><\/li>Support dark mode:<\/strong> Consider color scheme preferences.<\/p><\/li>Test in editor:<\/strong> Ensure styles render correctly in the block editor.<\/p><\/li>Keep it visual:<\/strong> Styles should create visible differences.<\/p><\/li>Limit options:<\/strong> 3-5 styles is usually plenty.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block styles provide visual variations that users can apply from the block toolbar. Defining Styles in block.json { "styles": [ { "name": "default", "label": "Default", "isDefault": true }, { "name":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5519","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions"}],"predecessor-version":[{"id":8997,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions\/8997"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5519"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5519"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5519"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Always include default:<\/strong> Mark one style as isDefault: true<\/code>.<\/p><\/li>Base styles first:<\/strong> Write base styles that apply to all variations.<\/p><\/li>Use specificity wisely:<\/strong> .block.is-style-name<\/code> is usually enough.<\/p><\/li>Support dark mode:<\/strong> Consider color scheme preferences.<\/p><\/li>Test in editor:<\/strong> Ensure styles render correctly in the block editor.<\/p><\/li>Keep it visual:<\/strong> Styles should create visible differences.<\/p><\/li>Limit options:<\/strong> 3-5 styles is usually plenty.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block styles provide visual variations that users can apply from the block toolbar. Defining Styles in block.json { "styles": [ { "name": "default", "label": "Default", "isDefault": true }, { "name":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5519","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions"}],"predecessor-version":[{"id":8997,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions\/8997"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5519"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5519"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5519"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
isDefault: true<\/code>.<\/p><\/li>Base styles first:<\/strong> Write base styles that apply to all variations.<\/p><\/li>Use specificity wisely:<\/strong> .block.is-style-name<\/code> is usually enough.<\/p><\/li>Support dark mode:<\/strong> Consider color scheme preferences.<\/p><\/li>Test in editor:<\/strong> Ensure styles render correctly in the block editor.<\/p><\/li>Keep it visual:<\/strong> Styles should create visible differences.<\/p><\/li>Limit options:<\/strong> 3-5 styles is usually plenty.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block styles provide visual variations that users can apply from the block toolbar. Defining Styles in block.json { "styles": [ { "name": "default", "label": "Default", "isDefault": true }, { "name":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5519","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions"}],"predecessor-version":[{"id":8997,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions\/8997"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5519"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5519"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5519"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Base styles first:<\/strong> Write base styles that apply to all variations.<\/p><\/li>Use specificity wisely:<\/strong> .block.is-style-name<\/code> is usually enough.<\/p><\/li>Support dark mode:<\/strong> Consider color scheme preferences.<\/p><\/li>Test in editor:<\/strong> Ensure styles render correctly in the block editor.<\/p><\/li>Keep it visual:<\/strong> Styles should create visible differences.<\/p><\/li>Limit options:<\/strong> 3-5 styles is usually plenty.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block styles provide visual variations that users can apply from the block toolbar. Defining Styles in block.json { "styles": [ { "name": "default", "label": "Default", "isDefault": true }, { "name":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5519","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions"}],"predecessor-version":[{"id":8997,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions\/8997"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5519"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5519"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5519"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Use specificity wisely:<\/strong> .block.is-style-name<\/code> is usually enough.<\/p><\/li>Support dark mode:<\/strong> Consider color scheme preferences.<\/p><\/li>Test in editor:<\/strong> Ensure styles render correctly in the block editor.<\/p><\/li>Keep it visual:<\/strong> Styles should create visible differences.<\/p><\/li>Limit options:<\/strong> 3-5 styles is usually plenty.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block styles provide visual variations that users can apply from the block toolbar. Defining Styles in block.json { "styles": [ { "name": "default", "label": "Default", "isDefault": true }, { "name":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5519","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions"}],"predecessor-version":[{"id":8997,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions\/8997"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5519"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5519"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5519"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
.block.is-style-name<\/code> is usually enough.<\/p><\/li>Support dark mode:<\/strong> Consider color scheme preferences.<\/p><\/li>Test in editor:<\/strong> Ensure styles render correctly in the block editor.<\/p><\/li>Keep it visual:<\/strong> Styles should create visible differences.<\/p><\/li>Limit options:<\/strong> 3-5 styles is usually plenty.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block styles provide visual variations that users can apply from the block toolbar. Defining Styles in block.json { "styles": [ { "name": "default", "label": "Default", "isDefault": true }, { "name":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5519","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions"}],"predecessor-version":[{"id":8997,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions\/8997"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5519"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5519"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5519"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Support dark mode:<\/strong> Consider color scheme preferences.<\/p><\/li>Test in editor:<\/strong> Ensure styles render correctly in the block editor.<\/p><\/li>Keep it visual:<\/strong> Styles should create visible differences.<\/p><\/li>Limit options:<\/strong> 3-5 styles is usually plenty.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block styles provide visual variations that users can apply from the block toolbar. Defining Styles in block.json { "styles": [ { "name": "default", "label": "Default", "isDefault": true }, { "name":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5519","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions"}],"predecessor-version":[{"id":8997,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions\/8997"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5519"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5519"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5519"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Test in editor:<\/strong> Ensure styles render correctly in the block editor.<\/p><\/li>Keep it visual:<\/strong> Styles should create visible differences.<\/p><\/li>Limit options:<\/strong> 3-5 styles is usually plenty.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block styles provide visual variations that users can apply from the block toolbar. Defining Styles in block.json { "styles": [ { "name": "default", "label": "Default", "isDefault": true }, { "name":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5519","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions"}],"predecessor-version":[{"id":8997,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions\/8997"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5519"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5519"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5519"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Keep it visual:<\/strong> Styles should create visible differences.<\/p><\/li>Limit options:<\/strong> 3-5 styles is usually plenty.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block styles provide visual variations that users can apply from the block toolbar. Defining Styles in block.json { "styles": [ { "name": "default", "label": "Default", "isDefault": true }, { "name":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5519","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions"}],"predecessor-version":[{"id":8997,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions\/8997"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5519"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5519"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5519"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Limit options:<\/strong> 3-5 styles is usually plenty.<\/p><\/li><\/ol>","protected":false},"excerpt":{"rendered":"Block styles provide visual variations that users can apply from the block toolbar. Defining Styles in block.json { "styles": [ { "name": "default", "label": "Default", "isDefault": true }, { "name":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5519","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions"}],"predecessor-version":[{"id":8997,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions\/8997"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5519"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5519"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5519"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Block styles provide visual variations that users can apply from the block toolbar. Defining Styles in block.json { "styles": [ { "name": "default", "label": "Default", "isDefault": true }, { "name":…<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[600],"project_type":[749],"class_list":["post-5519","documentation","type-documentation","status-publish","hentry","project-block-development","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions"}],"predecessor-version":[{"id":8997,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5519\/revisions\/8997"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5519"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5519"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5519"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}