Pattern editor style issue (in comparison to pattern preview)

[webmandesign]

Describe the bug

I've noticed there were some changes to Patterns Directory, which broke my patterns (spacing between columns was messed up, for example).

Today I wanted to fix the patterns in the directory, update them to current Patterns Directory editor features/changes, but I was surprised how badly the pattern editor displayed my patterns.

The styles are very different in comparison to the pattern preview at Patterns Directory. For example, in the editor:

• blocks are no longer fullwidth,
• typography is different,
• text colors are different,
• button border radius is different,...

Can you please fix the issue?

---

To Reproduce

Steps to reproduce the behavior:
If you can, open these patterns for editing in WordPress.org Patterns Directory:

• https://wordpress.org/patterns/pattern/elegance-page-intro-section-with-half-width-overlay-with-call-to-action/
• https://wordpress.org/patterns/pattern/elegance-simple-call-to-action-with-background-stretched-to-the-right-edge/

---

Expected behavior

I expect pattern editor to have the same styles as the pattern preview.

---

Screenshots

---

Desktop:

• OS: Windows 10
• Browser: Chrome 109

[webmandesign]

Hi @ryelle,

Thank you for fixes! Much better now. However, I still experience some issues:

1. Typography font family is off in comparison to preview.
2. I can not save/update the pattern as I always get error about insufficient number of blocks, although there are more than 3 blocks used.
3. It seems the spacing (vertical margins) of elements (paragraph, heading, buttons container) in preview is wrong as it uses browser default styles instead of the theme/editor styles.

I've checked your screenshots at #557 and the typography is correct there, so I'm not sure what could be wrong at my side. I've tried to flush the cache and also tested in incognito mode and the result is the same as on screenshot provided.

Can you please check these too? Thank you.

[ryelle]

I've checked your screenshots at #557 and the typography is correct there, so I'm not sure what could be wrong at my side.

I can reproduce this when I'm not sandboxing the site, so there's something strange going on there. I'm looking into it.

I can not save/update the pattern as I always get error about insufficient number of blocks, although there are more than 3 blocks used.

Are you having this problem consistently? Does it happen on other patterns?

It seems the spacing (vertical margins) of elements (paragraph, heading, buttons container) in preview is wrong as it uses browser default styles instead of the theme/editor styles.

I think the root cause there is probably the same as 1, the preview styles are not applied correctly.

[webmandesign]

Thank you @ryelle

Are you having this problem consistently? Does it happen on other patterns?

I've tried to edit a different pattern of mine and it seems to be working fine there. Also when creating a new pattern I don't experience the issue.

Do you think I should recreate the affected pattern anew? Or is there some other trick I can use when editing the pattern so I don't get the error message?

---

Block settings sidebar issue
Also, I think I've found another issue. The block options (settings) sidebar panel behaves somehow strange:
First, it does not open when I am editing a block. I need to enable it in "More tools & options" menu in the upper right corner (the 3 dots).
And then, when I close the panel, I can no longer open it. And yet, it has checkmark in the "More tools & options" menu even if it's closed/hidden.

[webmandesign]

Hi @ryelle,

This morning I was unpleasantly greeted with some 30+ emails saying:

Hello,
Your pattern, Stencil title, has been unlisted from the Block Pattern Directory due to the following reason:
This pattern was determined to be spam.
If you would like to resubmit your pattern, please make sure it follows the guidelines:
https://wordpress.org/patterns/about/

It's one of the patterns I've tested editing on yesterday (see my previous reply). The pattern has 24 likes and was available for probably 6 months. But now it has a "Declined" badge:

https://easycaptures.com/fs/uploaded/1560/2667884885.jpg

Is there any way I can revert this and make sure the same pattern is published? Or should I create a new one?

I'm really confused about what's going on with Patterns directory. When I started creating patterns there, almost a year ago if I'm not mistaken, everything worked fine. I know there have been a lot of changes in Gutenberg since (had my time with updating my themes) but I didn't expect issues with patterns I submitted to WPORG. Is the Pattern directory usable still?

[webmandesign]

Forgot to mention, I also received 30+ emails of the same pattern being published:

Hello!
Thank you for submitting your pattern, Stencil title. It is now live in the Block Pattern Directory!
https://wordpress.org/patterns/pattern/stencil-title-2/

I noticed the number at the end of the pattern URL - it is changed in each of those emails. So, is that the reason why the pattern was unlisted? WordPress Pattern directory somehow thought I submitted the pattern 30+ times and that's why it considers it a spam?

I can assure you I just clicked "Update" button once after editing the pattern yesterday and I edited this particular pattern only once, when testing pattern editor behavior as per your request.

[ryelle]

I've just re-published your stencil-title pattern. The stencil-title-2 pattern looks to be the Albanian translation for that pattern… and I think that's the issue. stencil-title has 30 translations, so you're getting emails about every pattern being published or unlisted. (sorry if you get 30 more emails about it being published again) — added an issue to track this here.

I'll look in to why it was considered spam.

[ryelle]

I can not save/update the pattern as I always get error about insufficient number of blocks, although there are more than 3 blocks used.

It looks like this pattern is only sending an empty cover block when it's saving, so the validation thinks there's only one block.

I think there was an issue with the Cover block, perhaps from a change in Gutenberg. I tried copying your pattern to a regular post, and it triggered a block validation error. Once I tweaked the cover settings, it started working. I've updated your pattern and it should work now.

I think the core change was this one, the timing is right, but I'm not sure why the deprecation didn't catch it. If you can replicate it on a default WP install, you could open an issue in the Gutenberg repo for it.

[ryelle]

@webmandesign I've tried another approach to getting the pattern preview & editor to match, can you take a look and see if that's working for you now?

[webmandesign]

Hi @ryelle,

Thank you for all your help and explanation.

I didn't get a chance to check the issue last couple of days, so I'll do my best to test it tomorrow and will let you know how it goes.

[webmandesign]

Hi @ryelle,

I've tried another approach to getting the pattern preview & editor to match, can you take a look and see if that's working for you now?

I was able to test the editing now and it seems to work much better than before. There are some discrepancies still, but they are pretty minor things I can adapt to.
Although, I have pretty good understanding of what I need to do in Gutenberg editor to obtain the design I want, so it might still prove confusing for some Pattern directory contributors. I am planning to fix (update for latest Gutenberg changes) all of patterns, so I will collect the issues I experience then and will open a new issue ticket here, if you don't mind (sorry for finding so much issues).

I think there was an issue with the Cover block, perhaps from a change in Gutenberg. I tried copying your pattern to a regular post, and it triggered a block validation error. Once I tweaked the cover settings, it started working. I've updated your pattern and it should work now.

Thank you, I've redesigned the pattern anew and everything seems to be working now.

A lot has changed in Gutenberg since I created those patterns and so most of them seem to be "broken" now. That's why I want to fix them. Funny enough, looking at some of them, they look really broken and I don't really remember how they were suppose to look... I guess installing an older WP + Gutenberg (versions relevant roughly to time I created those patterns at WPORG) and copying the pattern into such setup should provide me with the original preview :)

I have one more issue to report, but I will open a new ticket for it. I guess you can close this ticket as resolved. Thank you for help!

[ryelle]

I will collect the issues I experience then and will open a new issue ticket here, if you don't mind (sorry for finding so much issues).

Thanks for reporting the issues, and being so responsive about whether they're fixed 🙂