Pattern Creator: Give the title wrapper a width so it can be clicked

[obenland]

Fixes #793

Root cause

.pattern-visual-editor__post-title-wrapper has max-width: 960px and auto side margins but no width, and its parent .pattern-visual-editor is a column flexbox. In a column flex container, auto cross-axis margins override stretch, so the wrapper shrinks to its content width. The contenteditable title is empty on a new pattern, so the wrapper is 0px wide and can't be clicked. Once a title has text, the wrapper is only as wide as that text, so clicking anywhere else in the title band misses. Typing initially works only because Gutenberg autofocuses the title on a clean new post, which is why it looks like "once you click out, you can't click back in".

Both rules date from 2021. Gutenberg removing the rich-text element's inline min-width: 1px (WordPress/gutenberg#75370) took the wrapper from 1px to 0px, but the layout was the underlying problem.

Fix

Give the wrapper width: 100% so the existing max-width and auto margins center a full-width title.

Testing

1. Open /new-pattern/ and dismiss the welcome guide.
2. Type a title, click into the canvas, then click anywhere in the dark title band.
3. The title gets focus and shows a focus outline across the full band width.

Verified against Gutenberg 24.2.0. Before the fix the wrapper measured 0px wide; after, 960px.

🤖 Generated with Claude Code

Summary by CodeRabbit

• Style
  • Expanded the pattern editor’s post title wrapper to use the full available width.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: 26e2a7af-3c77-415b-8283-9b00dff4c137

📥 Commits

Reviewing files that changed from the base of the PR and between f6d3705 and 3e06718.

📒 Files selected for processing: 1

• public_html/wp-content/plugins/pattern-creator/src/components/block-editor/style.scss

Included review availability: This review used your included allowance. Your plan provides up to 2 included reviews per hour; 1 remain after this review.

📝 Walkthrough

The post-title wrapper in the pattern editor now has a width of 100%.

Changes: Pattern title editor

Layer / File(s)	Summary
Set title wrapper width public_html/wp-content/plugins/pattern-creator/src/components/block-editor/style.scss	The post-title wrapper now has a width of 100%.

Priority: ➖ Normal

Estimated code review effort: 1 (Trivial) | ~5 minutes

Change: Bug fix · Severity of issue fixed: Medium

Merge Risk: ⚪ Minimal · up to 3e067

The title wrapper now fills the available editor width up to its existing 960px cap, addressing the reported collapsed click area. No concrete merge-blocking risk remains in the supplied change.

Pre-merge checks: 5

Passed checks: 5 passed

Check name	Status	Explanation
Description check		The description explains the root cause, the fix, the related issue, and the testing steps. It omits the optional Props entry and screenshots, but it provides the required implementation and validatio…
Title check		The title clearly identifies the Pattern Creator change and explains that the title wrapper receives a width to improve click behavior.
Linked Issues check		The PR adds width: 100% to .pattern-visual-editor__post-title-wrapper in style.scss. This addresses issue #793 by giving the title wrapper a clickable full-width area while preserving its `max-w…
Out of Scope Changes check		The reported change is limited to the title wrapper layout rule. It directly supports issue #793 and does not show unrelated production changes.
Docstring Coverage		No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0…

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}