• Skip to secondary menu
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
  • Blog
  • Web Design SIG Archive
  • WordPress SIG Archive
  • pacsnet.org

PACS WordPress SIG

A Special Interest Group of the Philadelphia Area Computer Society

  • .ORG
  • Codex
  • Design Resources
  • PACS Web SIGs
    • Python
    • JavaScript
You are here: Home / How To / Block Editor Patterns: What and How

Block Editor Patterns: What and How

June 21, 2023 by Matt Leave a Comment

Pattern Page Hero image from wordpress.org
Pattern Page Hero image from wordpress.org

This Month’s WordPress SIG Topics

  • Topics from the Trenches segment.
  • What’s new in WordPress since we last met.
  • Discussion and live demo on building a page using Patterns.

Topics from the Trenches

Anyone, anyone? Yes, in the back!

Oops. Nope – just stretching. Maybe next time.


What’s new with WordPress?

  • The Month In WordPress – May 2023 – WordPRess is 20!
  • Automattic’s AI is here in the form of JetPack AI Assistant that allows quick generation of content like headlines, entire posts, and translations.
  • AI related plugins at wordpress.org -> Search Results for “ai” | WordPress.org
  • Meetup group I recently found: Learn WordPress Online Workshops (San Francisco, CA) | Meetup
    • Upcoming Session: Create a four page WordPress website: Explore Plugins + Contact Forms https://www.meetup.com/learn-wordpress-online-workshops/events/294215062/?%2F= Meetup is free to join and this meetup is free to attend online. The times vary since it is for a worldwide audience. They make recordings available afterwards on the meetup page.
  • WordCamp Montclair Jun 24, 2023 in New Jersey. About 1.5 hours NNE from Giant in Willow Grove via I95 and the Garden State Pkwy.
  • One more note -> Google Domains was acquired by Squarespace. Google Domains is shutting down, and its assets are going to Squarespace – The Verge

Featured Topic: Block Editor Patterns: What they are? How to use Them to Build a Page

  • An introductory video by Wes Theron on Learn.Wordpress.org gives us an excellent starting point for our discussion. It is high level enough that we can see how patterns fit into the larger website, but offering enough details to permit us to try it on our own.
    • Using Block Patterns | Learn WordPress
  • I launched into the live demo portion of our session using a local development site built on LocalWP. The site uses the TwentyTwentyThree theme with a few images I pre-installed from Unsplash.
    • Add home page pattern to change layout.
    • Use patterns available from the theme. They are available using the inserter and selecting ‘patterns’. Alternatively, we visited the Pattern library on wordpress.org and found a pattern to try.
    • Copy pattern from page to page using the ‘Copy Styles’ link under the 3 dot menu.
    • Change the layout on the second page and note that the two pages are distinct. The patterns are individual elements that you control separately.

Resources

  • Using Block Patterns | Learn WordPress
  • Building a page with only patterns | Learn WordPress
  • How to Create Low-Code Block Patterns | Learn WordPress
  • 500+ Flower Images [HQ] | Download Free Flower Pictures on Unsplash
  • Block Pattern Directory | WordPress.org
  • Local – Local WordPress development made simple (localwp.com)
  • WordPress Playground -> build sites in the browser

Zoom recording of the session

Filed Under: How To, WordPress SIG Tagged With: blocks, Content, patterns

About Matt

Web developer and designer. Learning all the time. Founder & CEO - Cap Web Solutions

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Get SIG News & Meeting Invites

Notes and invites for upcoming meetings, wrap-ups from previous meetings.

  • This field is for validation purposes and should be left unchanged.

Posts By Category

Tags

accessibility backend Beaver Builder blocks block themes CodePen CoffeeCup Software color ColorZilla Content css CSS Grid design development ecommerce email firefox framework GDPR git Gutenberg HSTS HTTPS JavaScript layouts Lets Encrypt local development material design media library pagebuilders patterns plugins Rachel Andrew resources responsive RSS Security SMTP srcset SSL tools troubleshooting updates WooCommerce WordPress

Footer

Have an idea for a future meeting? Let us know.

  • This field is for validation purposes and should be left unchanged.

Search

PACS Disclaimers

Next Gathering

21 Oct
October 2023 - In-person
21 Oct 23
Willow Grove
  • View Upcoming Meetings
  • Email SIG Leader: Matt Ryan

    Privacy Policy · Terms & Conditions
    Copyright © 2023 PACS WordPress SIG · All Rights Reserved.
    Website by Cap Web Solutions
    Lifestyle Pro Theme on Genesis Framework
    Top of page