WordPress / WordPress/pattern-directory

Row item justification not displaying properly in Editor

Open
#618 0 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

Describe the bug
If you put Blocks in a Row with a centered Justification, the items are not centered in the editor.

To Reproduce
I think the easiest way to demonstrate is to show an existing pattern that looks wildly different on the front and back end.
https://wordpress.org/patterns/pattern/new-cta-section/
Copy the pattern into the Pattern editor for the Pattern Directory.
Notice how the buttons are not centered in the Editor.

Expected behavior
The Buttons should be centered in the editor.

Screenshots
Pattern in the editor:
2024-01-19 10_28_15-New Pattern _ WordPress org

Pattern on the directory:
2024-01-19 10_29_04-New CTA Section – Block Pattern _ WordPress org

Desktop (please complete the following information):
Windows 10, Chrome

Additional context
There seem to be bigger issues with Rows/Stacks, but this was the easiest to demonstrate. If you simply fixed-width items in a Group, then toggle between a row and a stack, nothing happens there at all (when they should switch from next to each other and on top of each other). I think the editor CSS around Groups likely needs some updates.

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

Reproduce the issue by copying the linked CTA pattern into the Pattern editor and compare its Row justification with the directory rendering. Start by inspecting the editor CSS around Groups, Rows, and Stacks. Done means centered Row items render correctly in the editor and fixed-width items switch between Row and Stack layouts as expected.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.