Blocks, Patterns, and Layouts

Gutenberg is diving deep into customization leading into 2020. With customization, and eventual full site editing, comes new terminology that needs to be defined.

Blocks

Blocks are the smallest, most atomic unit in the WordPress editor. The Paragraph is the default block. Blocks can be static (an image) or dynamic (a list of posts).

Think of blocks as a single LEGO brick.


Patterns

Patterns are curated collections of blocks, often organized around a specific section or purpose. They make up common patterns across the web.

For example, a Contact pattern could contain:

  • A contact information block on one side, with fields for address, phone number, and email address.
  • A contact form block on the right.

A Team pattern could contain:

  • A column block
  • Inside each column, a group block containing:
    • An image block with a round mask for headshots
    • A header block for names
    • A paragraph block for biographies
    • A social links block

Think of patterns as several LEGO bricks stuck together to make just a castle gate. It’s a feature in itself, but only part of the greater whole of your post or page.

But doesn’t that mean something like Cover or Media & Text are patterns, not layouts?

That’s a great question! It requires more discussion before there’s a definitive answer. Should Cover / Media & Text / etc. be patterns, rather than blocks? What do you think?


Layouts

Layouts are one step up from patterns. They can be groupings of patterns or specific blocks that make up the entire design of your page — including your header, footer, and any additional global or repeating block areas, like sidebars.

Think of layouts as the entire castle — gates, towers, ramparts, catapults, flags, and all.

But isn’t this just a page template?

The short answer is yes, “layout” new way of saying page template. Template, however, is a pre-existing term that carries a lot of baggage. Page templates, as they exist in WordPress now, are technical entities with design implications. On the admin side, changing your page template is a pretty poor user experience. Selecting a different template for your page should be a visual process, but instead, we offer different templates in a dropdown. You can’t preview them, so you have to guess what they’ll look like, or search for a theme demo.

(Additionally, there isn’t any sort of native UI for selecting different post templates, or any UI at all for post formats.)

By creating layouts as a block-first concept, complete with visual placeholders for filling in content instead of creating pages from scratch, we can start to deprecate templates as a design concept.


Putting it all together

To summarize:

Layouts > Patterns > Blocks

(If you’re familiar with atomic design, you can also think of blocks as atoms and molecules, patterns as organisms, and layouts as templates.)


Does this terminology make sense? Are you left with any lingering doubts or questions?

#blocks, #layouts, #patterns

Design meeting notes 13 Nov 2019

These are the weekly notes for the design meeting that happens on Wednesday’s. You can read the full transcript on our Slack channel and find the meeting’s agenda here. You can join the Slack channel by following the instructions in our handbook.

@karmatosed starts off with two suggestions to keep us working more organised and focused.

Firstly, one of the common issues when starting to contribute or finding your way to is to discover what is going on and what the context behind it is. @michael-arestad suggest to add our focus projects to the Handbook, like full site editing for gutenberg for instance, it will be easier to read up, and could also include a timeline if known, links to where the work is happening and who is involved.

This could go hand in hand with the Make blogposts, that maybe the Handbook page can curate. The lead on a project would have the responsibility of keeping the info up to date as the project progresses. Meta has something similar at https://make.wordpress.org/meta/projects/

Secondly, @karmatosed suggests iterating and bringing our Trello board back from not being at the heart with a new workflow structure:

  • Inbox
  • Needs design
  • Needs feedback: this will be what we pull weekly meeting from
  • Building
  • Blocked
  • Icebox

The icebox could become a place where ideas go to die, but as @foletto remarks, that will happen anyway with some ideas no matter how we sort the project.

This also frees up the labels from being part of the workflow, and allows them to be used the way they are intended to.

Both suggestions will go up as proposal on the Make blog for further discussion.

A discussion about Github vs Trello spun off of this idea that will be continued at a later time.

Next, @mapk brings Gutenberg updates. Gutenberg 6.9 is almost out! Lots of things being worked on. Do note that the Gutenberg plugin v6.5+ needs WP 5.3 now.

For WP 5.4, there are some Gutenberg focuses left this month https://make.wordpress.org/core/2019/10/29/whats-next-in-gutenberg-november/. @mapk and @shaunandrews will run some usability tests on the new nav block, which is almost done.

Then, some interesting reading material was shared:

@hedgefield noted he would ask the team at Yoast that worked on this Gutenberg-based storytelling page if they had any wishes or suggestions to improve the workflow next time around.

And finally, @melchoyce would love some feedback on this idea for multi-block layout patterns for the block editor: https://github.com/WordPress/gutenberg/issues/17335

#meeting-notes

Design meeting agenda for Wednesday 13th November

This is the agenda for the weekly design chat meeting on Wednesday, 13th November 2019, 19:00 UTC.

  • Housekeeping
    • Trello board organising suggestion
    • Handbook organising suggestion
  • Updates from any specific focuses
    • Gutenberg design update
  • Discussion
  • Open floor

This meeting is held in the #design channel in the Making WordPress Slack.

Leave a comment if you would like something reviewed, design help or something added to the agenda.

#meeting-agenda

Gutenberg Phase 2 Friday Design Update #39

It’s Friday!! I hope everyone who made the trek to WCUS or WordCamp Tokyo this year made it back home safely and your travels were uneventful. Just a reminder that WordPress 5.3 is due to release on November 12!

If you didn’t catch it, @matveb posted an update to the Full Site Editing experience recently.

Priorities for the coming month include:

  • Block Content Areas,
  • Menu Navigation Block, and 
  • Tightening up existing interactions

For more details, consult this recent post. Now let’s take a look at where we’re at today.

Merged

In Progress

Edit media flow control

Get involved

Now’s a great time to get involved. While the work on this project is intense, it’s always important to glean new perspectives from other WordPress users and community members. Just drop into any of the links provided above to read up on the details and contribute.

Thanks for reading, staying informed, and contributing anywhere you can!

#design, #gutenberg-weekly, #phase-2

WordCamp US 2019 fire, forage and treasure exercise

During WordCamp US there was a fire, forage and treasure exercise for WordPress. During this, we decided things to:

  • 🔥Fire: That we wanted to get rid of.
  • 🍄Forage: Wanted to borrow from somewhere else.
  • 👑Treasure: What we wanted to keep.

🔥 Fire

  • Images: replacing, organising
  • Media library
  • WP Admin menu page
  • Non-Gutenberg baked building blocks
  • Notification (alert UI spam)
  • Badly formed notifications
  • Page edit button going to the wrong page
  • Changing color on the backend and it not showing up on the front
  • !working
  • Importer UI and experience
  • Hidden settings
  • Gutenberg gradient panel
  • Menu inflexibility and mobile issues
  • Mobile fonts whacky
  • Structure
  • Bloated (unorganised) admin menu
  • Finding stuff in admin issues
  • Access to dashboard issues
  • Plugins that don’t play well
  • Messy dashboard
  • WP way
  • Customizer > WP Admin > Gutenberg journey
  • Themes being everything
  • Inconsistency with CSS classes

🍄 Forage

  • Spotify buttons
  • Shopify dashboard consistency
  • Super cool proudly made with WordPress badges
  • Elementor type theme building in Gutenberg
  • Design system – Bootstrap, Polaris
  • Design creative ambassador program
  • Role manager
  • Mailchimp media image styles
  • Shopify ease of payment
  • Forms and lists of entries
  • Newsletter signup
  • Mobile layout visual editor
  • Image sorts
  • Easily organized files
  • Easier file management
  • Bear markdown
  • Development version control built in

👑 Treasure

  • Flexibility
  • Open to customization
  • Plugin updating experience
  • WP-CLI
  • API
  • Blocks
  • Cover block
  • Block templates
  • Writing drafts in Gutenberg
  • Social aspect of post
  • Meta boxes
  • Page buttons
  • One-click install
  • Gutenberg
  • Child themes

What would you fire, forage or treasure?

#wordcamp-us #workshop

Design meeting notes for November 6, 2019

These are the weekly notes for the design meeting that happens on Wednesday’s. You can read the full transcript on our Slack channel and find the meeting’s agenda here. You can join the Slack channel by following the instructions in our handbook.

Housekeeping

Because of time changes around the world, meeting times will be moved back by an hour. The new meeting times are now reflected in the welcome box on make.wordpress.org/design/ and are as follows:

Monday triage: 17:30 UTC
Tuesday triage: 17:00 UTC
Wednesday meeting: 19:00 UTC

Updates

Gutenberg

@mapk shared a recent update from @matveb about Full Site Editing. It’s a good primer to help people get started with contributing to Gutenberg Phase 2.

Design Experiments Plugin

@karmatosed invited folks to use and test the Design Experiments Plugin, where a few of our current projects can be found for testing.

The team also discussed where would be the best place to leave feedback on these experiments, and it was agreed to include a link to a post so folks can learn more about each experiment and know where they can leave feedback.

Open Floor

@joyously shared a bug in Gutenberg that affects the Media + Text block when RTL text alignment is enabled and an issue about the block inserter visibility when a left aligned pullquote is present in the new Twenty Twenty theme.

@mapk shared @francina‘s feedback on the About page.

@richtabor asked for feedback on a concept for adding block patterns on a document in Gutenberg.

#meeting-notes

Design meeting agenda for Wednesday 6th November

This is the agenda for the weekly design chat meeting on Wednesday, 6th November 2019, 18:00 UTC.

  • Housekeeping
  • Updates from any specific focuses
  • Discussion
  • Open floor

This meeting is held in the #design channel in the Making WordPress Slack.

Leave a comment if you would like something reviewed, design help or something added to the agenda.

#meeting-agenda

Proposal: a consistent spacing system for WordPress

Much like a type scale, a spacing system enforces consistency and simplifies decision making for UI design. This post aims to standardize one for WordPress.

What is a spacing system?

Spacing is the atomic element of an overall spatial system. A spatial system includes spacing, grid, and layout. Spacing is the foundation on which the others are built.

A spacing system is simply a set of predefined values and guidelines for how to apply them in the UI.

Continue reading

Design meeting notes for Oct 30 2019

These are the weekly notes for the design meeting that happens on Wednesday’s. You can read the full transcript on our Slack channel and find the meeting’s agenda here. You can join the Slack channel by following the instructions in our handbook.

Firstly @karmatosed would like to know if we are all OK with the design meeting time staying at 18:00 UTC in the winter. So far it seems so.

Next, @mapk reports that Gutenberg 6.8 is out with a performance boost and some cool new features. A monthly post detailing the next focus tasks will now also be published, with the post for November Gutenberg dev focus being up. Also, there is news about the efforts to support full site editing with Gutenberg.

@drw158 would like some feedback on a proposal to improve the button design that was merged in WordPress 5.3. Looks like an improvement already, but there are some factors to consider. Good discussion was had, results will be posted in the linked trac ticket.

@itsjonq has done work on designing a page header component, something in the Gutenberg style that could be used by folks using the wordpress/components library.

Finally, @boemedia wonders if there will be any remote contribution at this year’s WCUS. @karmatosed will write a post about that later. Everyone that will be at WCUS in person, have fun!

#meeting-notes

Design meeting agenda for Wednesday 30th October

This is the agenda for the weekly design chat meeting on Wednesday, 30th October 2019, 18:00 UTC.

  • Housekeeping
  • Updates from any specific focuses
  • Discussion
  • Open floor

This meeting is held in the #design channel in the Making WordPress Slack.

Leave a comment if you would like something reviewed, design help or something added to the agenda.

#meeting-agenda