WordPress / WordPress/pattern-directory

Question: How will patterns work with custom block styles?

Open
#79 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

[Component] Pattern Creator
Dominant language
PHP
Stars
134
Forks
46
Avg merge
9h 4m
Merged PRs (30d)
19

Description

In the patterns, the creator can add attributes to the blocks, as long as the block supports it (color, font size, padding etc, and soon, borders).
But what if I want to create a pattern that needs CSS that can't be achieved with the block support?
For example, box shadow, or positioning a block so that it overlaps (See for example Twenty Twenty-One).
Or if the pattern needs to have a mobile and a desktop width style.
Then I would need to add a CSS class to the block inside the pattern and register a custom block style.

If I was making a theme or plugin, that style would break when the plugin or theme was switched, only the content and the block markup would remain on the users install. How will this be solved with the patterns?
Are the block patterns from the block pattern directory going to be accompanied with custom block styles that are saved to a global custom CSS field (think, the additional CSS field in the customizer)?
Or something else? Registered when the pattern is placed?
What would happen to that CSS if the block that has that class is deleted from the saved content?

Or are all block patterns going to be limited to the global styles?

Contributor guide

No contributing guide indexed for this repository

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 identified. Start by reviewing the questions about custom block styles, CSS classes, responsive widths, and CSS persistence when patterns or blocks change. Done would require a decided design for how pattern-specific styling is stored, applied, and removed.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.