WordPress / WordPress/create-block-theme

Allow creating/registering block variations from the UI

Open
#698 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement Style variations
Dominant language
JavaScript
Stars
417
Forks
66
PR merge metrics
No merged PRs in 30d

Description

Allow registering new block variations and style them without leaving the editor.

Idea:

A theme can register new buttons variations such as pill, rounded, circular and style them to be used in the editor.

Pill Rounded Circular
image image image

Currently it is not possible to create such variations from the editor.
A block variations can be registered with javascript

const { registerBlockStyle } = wp.blocks;
registerBlockStyle('core/button', {
  name: 'pill',
  label: _x('Pill', 'block style', 'theme-name'),
});

this creates a new button variations and adds a css class wp-block-button is-style-pill which can be styled from the editor global styles.

Proposal:

Create block theme can have a UI to create a new block variation, (which adds the required javascript code and enqueues is safely).

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No files, tests, or entry points are named. Start by mapping the existing editor UI and block-variation registration flow, then define the UI, generated JavaScript, enqueueing, and styling behavior. Done means a theme author can create and style a variation from the editor without leaving it.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, tooling
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
28/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.