Skip to content

Pattern Creator: pattern previews are misleading due to lack of full width and layout features in the post editor #658

@miksansegundo

Description

@miksansegundo

Related to #628

Describe the bug

When creating a pattern using the Pattern Directory editor (aka pattern creator) in the directory, contributors can get confused by the editor preview because the directory uses the post editor, which lacks support for:

  • Full width
    The width is limited by the theme's contentWidth (680px) on the preview. This seems expected because the directory uses the Post editor to create patterns.
  • Layout toggle
    This toggle to switch between flow and constrained layout does not work on the preview.

To Reproduce

Steps to reproduce the behavior:

  1. Go to https://wordpress.org/patterns/new-pattern/ to contribute to the directory creating patterns
  2. Add a gallery of images and expect to see the columns borked on the preview.
  3. Add a group with an image in it, use the Layout toggle, and expect to see no effect on the preview.
  4. Rather than design your pattern directly in the Pattern Directory editor, go to the Site editor of one of your sites, design a full-width pattern, then copy-paste it into the Pattern Directory editor to submit a pattern to the directory, and expect to see your pattern borked because the max-width of the editor preview is 680px.

Expected behavior

Pattern previews in the Pattern Directory editor should look like pattern previews in the Pattern Directory.

Screenshots

See in the following screenshots how patterns look as expected in the Site Editor and the Pattern Details of the Pattern Directory but look borked in the Pattern Directory editor.

Pattern Directory Editor Pattern Details Site Editor
Screenshot 2567-04-11 at 18 45 45 Screenshot 2567-04-11 at 18 46 33 Screenshot 2567-04-11 at 18 45 16
Pattern Directory Editor Pattern Details Site Editor
Screenshot 2567-04-11 at 18 53 07 Screenshot 2567-04-11 at 18 53 26 Screenshot 2567-04-11 at 18 53 37

Please look at the following recording of how the Layout toggle doesn't work.

Pattern Directory Editor Site Editor
Screen.Recording.2567-04-11.at.19.04.37.mov
Screen.Recording.2567-04-11.at.19.07.32.mov

Additional context

Submitting a pattern confuses contributors because of the misleading editor preview. As a workaround, we use the Site editor in our sites to design patterns and then copy-paste them into the Pattern Directory editor to submit them.

Ideally, patterns should be created from the Site editor because that is the pattern creation flow contributors have been using since WordPress 6.3 to create custom patterns. As a reference: https://learn.wordpress.org/tutorial/creating-your-own-custom-synced-or-non-synced-patterns/

Screenshot 2567-04-11 at 17 51 57

I'd like to help to improve this experience. cc: @annezazu @richtabor @ryelle Any ideas?

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Component] Pattern CreatorAnything related to the pattern front end editor or preview

    Type

    Projects

    Status

    ⚠ On Hold/Blocked

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions