Building Beautiful Websites Quickly With Patterns

Building Websites With Patterns
WordPress Hartford CT Meetup
February 20, 2024
[ Make Current ]

Watch Recording

Click below to watch our January 2024 meetup on YouTube, or visit
https://www.youtube.com/watch?v=1y_0U59DsqE

[ Make Current ]

Agenda

  • Speaker Introductions
  • What are Block Patterns? (Ray)
  • How do you create a Block Pattern? (Ray)
  • Where can you find community-made Patterns? (Peter)
  • How can you quickly build a Page using Patterns? (Peter)
  • Wrap-Up
[ Make Current ]

Ray Michno

Cute Yellow Wapuu WordPress Mascot
ray@ctwebgeek.com
  • Hartford WordPress Co-Organizer
  • 25+ years in IT
  • Developer/Software Architect
  • Pratt & Whitney, Aetna, UnitedHealthGroup
  • 7+ years using WordPress
  • Self-employed – CTWebGeek
  • Married, No Kids, Lives in Newington, CT
  • Geek
[ Make Current ]

Peter Ingersoll

peter@ingersollinteractive.com
  • Hartford WordPress Co-Organizer
  • 25+ working on the Web
  • Marketing, communications, design, tech guy
  • Hartford Courant, logistics, agency
  • 10 years using WordPress
  • Self-employed – Ingersoll Interactive
  • Married, two adult kids, lives in South Windsor, CT
  • WordPress Admin and DIY Advocate – IngersollWP.com
[ Make Current ]

What are Block Patterns?

  • A group of WordPress Blocks combined to create reusable layouts and page sections.
  • Can be as small as a single block or as large as a full-page layout.
  • Can also be part of a Template, Template Part, or even nested inside other Block Patterns.
  • They can be grouped using categories (either custom or using the default WordPress ones).
  • Themes and plugins can add custom patterns, and you can find user-created ones online.
[ Make Current ]

Synced vs. Non-Synced Patterns

  • Created the same way, but the difference is what happens after its inserted into your page or template.
  • If you insert a Non-Synced pattern and need to make changes later, your changes are not synced across the site. You need to find where you used the pattern and repeat the same change on every page or post where you used it.
  • Once you insert a Non-Synced pattern, the blocks look like any other blocks in your content. You can’t tell they used to be a block pattern.
  • If you insert a Synced pattern and need to make changes later, the changes are applied everywhere that pattern was used.
  • A Synced pattern behaves like a single unit. It stays grouped and is labeled with the pattern name. It also has a different color in the Block Editor.
[ Make Current ]

Synced Patterns With Overrides

  • Coming in WordPress 6.5
  • Allows you to maintain a synced layout and style across patterns while enabling each instance of the pattern to have customized content.
  • The creator of the pattern decides which content parts/blocks of the pattern can be changed.
[ Make Current ]

Creating Block Patterns

  • Since WordPress 6.3, you can create Block Patterns directly in a Page/Post using the Block Editor.
  • When you have multiple blocks in your pattern, place them inside a “container” (like a group or row) and then use the “Create pattern” option on this outer block. This will keep your blocks together.
  • If you’re using a Non-Block Theme, you can manage your Block Patterns by opening the Options menu in the block toolbar, and selecting “Manage patterns”.
  • If you’re using a Block Theme, go to Appearance > Editor > Patterns to open the new patterns list.
[ Make Current ]

Creating Block Patterns

  • You can edit, copy, and delete patterns you created, but you can’t edit patterns from Themes and Plugins.
  • You can duplicate any existing pattern and then modify it. This will then become a “user-created” pattern.
  • If you Delete a Synced pattern you created, the pattern will stop showing on the front end but you can still see it when you edit the page.
  • Export and Import patterns as JSON files – useful if you have created a pattern on one site and want to use it on a different site.
  • If your pattern includes non-core WordPress Blocks you will need the corresponding blocks installed on any sites where you want to Import the pattern.
  • Themes can register patterns by adding .PHP files with a specific file header to a folder named “patterns” – located under the theme folder.
[ Make Current ]

Live Demo

Wapuu Dev
It’s Demo Time!

The Standing WordPress Reminder

Rubiks Wapuu
Your WordPress experience is defined by your theme, plugins, and custom code. WordPress environments can vary greatly!
Understanding concepts is more helpful than specifics.

Design Benefits of Sourced Patterns

  • Deliver attractive designs – even if you are not a designer
  • Apply design consistency to your site by using patterns that are meant to work together
  • Avoid blank-page panic, be inspired
  • Page elements, fully designed pages, or wireframe layouts – whatever works for you
  • Quickest way to get going
  • Block patterns deliver what themes used to promise
[ Make Current ]

Where to Find Designed Block Patterns

  • WordPress.org / Extend / Patterns
  • Than can also be found in the pattern inserter in the editor
  • Your theme(s)
  • Installed block collection / pattern plugins
  • Third-party pattern designers (free and paid)
  • AI-generated block pattern sources
[ Make Current ]

Block Patterns on WordPress.org

  • WordPress.org / Extend / Patterns (wordpress.org/patterns/)
  • If you are signed in, you can favorite patterns or even create your own – and share to the repository!
  • Filter patterns by category, curated or community, newest or popular
  • If you find a designer you like, you can view just theirs
  • All block patterns in the repository use core blocks – no plugins used!
[ Make Current ]

Patterns Included in Themes

  • Newer quality block themes often include their own patterns
  • Nice block themes using core blocks: Twenty Twenty-Four, Neve FSE, Ollie, Powder, Raft, Variations
  • Allows for quicker creation of coherent, harmonious sites
  • Block themes often use core blocks and include global style variations that work with its patterns
  • Classic themes can also include patterns, but often use complementary plugins
  • Advanced themes with starter sites often require plugin(s)
[ Make Current ]

Block Collection & Pattern Plugins

  • Plugins are often used to add block patterns
  • May be used with block themes or classic themes
  • Some plugins are meant for specific themes
  • Sites using custom block plugins require the plugin to remain active for any patterns added with it
  • Plugins may have free and premium versions
  • Premium often offer more designs and starter sites
  • There are plugins that use core blocks and can be deactivated and removed
[ Make Current ]

Block Collection & Pattern Plugin Examples

  • Twentig – designed for Twenty Twenty-Four but works with other block themes, uses core blocks
  • Extendify – theme agnostic, nice designs, full suite may be offered by hosting, uses core blocks
  • PatternsWP – plugin makes it easier, uses core blocks
  • Kadence Blocks – patterns based on custom blocks, great with Kadence theme but not required
  • Spectra – patterns based on custom blocks, great with Astra theme but not required
  • Several other popular custom block packages offer excellent patterns
[ Make Current ]

Third-Party Designers / Developers / Sites

  • Similar to plugins, there are free and paid sites for patterns
  • Sites using core blocks usually offer simple ways to copy and paste patterns
  • Some examples:
  • GutenbergHub: Uses core blocks, no plugins
  • PatternsWP, has PatternsWP plugin, uses core blocks, wireframe-like style, plugin can be deactivated
  • Demosites.io – designed for Neve theme, works with others
  • Tyler.com: Uses core blocks, no plugins, full pages layouts or just grab patterns, works with Variations theme (not required)
[ Make Current ]

The Next Level: AI-Generated Patterns

  • Artificial intelligence is becoming available to create block patterns that are even closer to what users want
  • Generic content becomes closer to that of the actual site
  • Can make prototyping much more quickly
  • Some will still prefer wireframes or minimalistic patterns for development
  • Content in AI-generated patterns should still be edited
  • Sources: ZipWP.com, Kadence Blocks & Kadence Starter Sites for Kadence Theme, Tyler.com
[ Make Current ]

Building with Pre-Designed Patterns

  • Patterns are stacked groups of blocks and insert just like blocks
  • Once placed, (unsynced) patterns are fully editable
  • Content are placeholders
  • Edit text, replace images, etc.
  • Don’t feel limited to the pattern’s design
  • You can add, subtract, move, adjust patterns as you wish
  • If you like a modified pattern, save it as your own
  • Build your own patterns library with your branding
  • Use patterns to design full pages, enhance posts
[ Make Current ]

Live Demo

Wapuu Dev
It’s Demo Time!

Wrap Up & Q&A

Wapuu with laptop and cat
[ Make Current ]