Patterns - tips and tricks for developers

[justintadlock]

Discussed in #226

^{Originally posted by bph February 20, 2024}
Now that patterns are a massive component of block theme development, and theme developers might want to reuse certain patterns over multiple sites/theme, it would be good to know what tips designers can give who have published a series of block themes. What to think about when you want to create site-agnostic patterns?

What makes patterns most manageable ( wrap it in a top-level group block )
How best to use styles? What about colors and typography?

How to handle content and media assets?

[justintadlock]

This topic was approved in the March Editorial Group meeting.

@beafialho - If you comment on this ticket, someone from the team can assign it to you.

[beafialho]

Thank you, I'm currently working on this

[beafialho]

👋 Here's a draft for the post.

[justintadlock]

This looks like a pretty good set of practices. I've finished the second review and left my suggestions in the doc.

I did have one other nit-pick about the overall tone of the draft:

The biggest issue for me when reading was that it felt impersonal. It is a very opinionated piece on recommended practices but was detached from the person. The authority here feels like the Dev Blog. But the authority should be you and your experience. I'd love to see you integrate more of yourself and your experience in the intro section. It doesn't have to be over the top. Something simple like this would work:

Here are the lessons that I've learned working with patterns while building...

Think of the post more as "My Best Practices for Patterns" rather than "The Best Practices for Patterns." I think you can really capture that with a short paragraph in the intro that lets the reader know where you're coming from.

Hope that helps. Anyway, good work!

[ironnysh]

That's a great article, @beafialho. I really like that you're bringing a designer's perspective to the Developer blog

[bph]

@beafialho I added your as an author to the WordPress Developer Blog and you should have received an invitation.

[bph]

When you are worked through the feedback, you are ready to publish:

Pre-publishing checklist: (updated 1/29/2024)

• Post Title and subheaders in sentence case
• Are Category or Categories selected?
• Are Tags identifies?
• Is there an explicit Excerpt?
• Are all images files uploaded to the media library
• Do all images have an alt-text?
• Assign or upload a featured image
• Props added? (See Guidelines)
• add copy for a social post as comment to this issue (example)
  🙌 Publish! 📗

Post-publishing checklist

• add Props for reviews to #props channel in WP Slack (Example) (use Slack handles)
• close the issue with a comment to link to the published post
• close the accompanying discussion with the link to the published post.

[beafialho]

Thanks everyone for your feedback!

The biggest issue for me when reading was that it felt impersonal. It is a very opinionated piece on recommended practices but was detached from the person. The authority here feels like the Dev Blog. But the authority should be you and your experience. I'd love to see you integrate more of yourself and your experience in the intro section. It doesn't have to be over the top.

@justintadlock great point! I have suggested a different intro paragraph in the Google Doc. If you want to take a look, I am ready of bring it to the editor.

[justintadlock]

@beafialho - Looks great!

[beafialho]

Thank you! I've created the post (preview here), and have verified all in the pre-publishing checklist.

Here is the copy for social post:

What makes a well designed pattern? And what ensures that a pattern integrates flawlessly into any WordPress site? A designer shares some of the lessons they've learned while building themes and websites.

[bph]

Published it! Pattern design tips and tricks for developers

[abhansnuk]

Well done @beafialho and hope you will write more pieces like this for the blog.

[bph]

@beafialho Can you please double-check on the slide show you used if it's display all the information you wanted it to display.

The editor view has some explanatory text that goes with each slide.

The text does not display on the frontend.

Do we need to see for a different way to relay the information? Or check in with @ryelle or @renintw if there is a bug in the theme?

[beafialho]

Can you please double-check on the slide show you used if it's display all the information you wanted it to display.

I confirm, it's visible on the editor but not on the front end.

[bph]

Pattern design tips and tricks for developers