Block-Based Concerns & React Blocks

When developing block themes or hybrid layouts in WP Rig, you must understand standard Gutenberg engineering practices.

In this lesson, we will explore managing Full Site Editing (FSE) theme style variations, registering block styles, and authoring custom React blocks.

1. Theme Style Variations (`/styles`)

WordPress FSE themes allow you to offer multiple pre-packaged color and typography schemes. These are known as **Style Variations**.

Creating a Style Variation

2. Managing Custom Block Styles & Variations

You can extend existing core WordPress blocks without building complete custom blocks from scratch.

Custom Block Styles

register_block_style(
    'core/button',
    array(
        'name'         => 'dotted-border',
        'label'        => __( 'Dotted Border', 'wp-rig' ),
        'inline_style' => '.is-style-dotted-border { border: 2px dashed var(--color-primary); }',
    )
);

Custom Block Variations

3. Authoring Custom React Blocks

For complex custom elements requiring advanced frontend behavior, authoring custom React-based Gutenberg blocks is necessary.

Scaffolding a React Block

Example: A Minimal `edit.js`

export default function Edit( { attributes, setAttributes } ) { const blockProps = useBlockProps(); return (

setAttributes( { heading: val } ) } placeholder=”Enter card heading…” />

); } “`

Example: A Minimal `save.js`

export default function Save( { attributes } ) { const blockProps = useBlockProps.save(); return (

); } “`

By mastering these block layout approaches, you can build visually stunning editorial designs that remain highly customizable for site authors!