Author Archives: Jeff Ong

Jeff Ong 5:48 pm on February 18, 2022
Tags:   

Gutenberg + Themes: Week of February 14th, 2022

Hello! This is the 76th roundup of theme-related discussions, fixes, and developments in GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/.

New features:

Pattern Directory: Allow pattern registration from directory with theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML.

#38232 This PR enables themes to register patterns from the Pattern Directory through theme.json. It checks for a pattern’s top level key that is an array of pattern slugs from the directory.

Contrast Checker: check link color 

#38100 adds the contrast checker feature to the link color control.

Fixes: 

Site Editor: Remove extra div on post content

#38451 removes an unwanted extra div that the post content blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. outputs and additional div when being rendered in the Site Editor.

Fix global styles loading logic

#38745 loads global styles using this logic, no matter the WordPress version:

  1. Block theme. Always load in the .
  2. Classic theme that hasn’t opted into loading coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. assets separately. Load in the .
  3. Classic theme that has opted into loading core assets separately. Load in the .

Duotone: Allow users to specify custom filters

#38442 allows themes to specify their own custom duotone filters.

Search Block: Fix border radius reset

#38478 fixes the reset border functionality.

Documentation updates:

Add a high-level intro to styles in the block editor

#38208 adds a new document to the handbook: a high-level intro to how styles work in the block editor.

Overview Issues

DT: Design Tools Overview #33447

FSEFSE Short for Full Site Editing, a project for the Gutenberg plugin and the editor where a full page layout is created using only blocks.: Building with Patterns #38529

FSE:  Updated scope for site editing projects #33094

Open PRs

GS: Fix default duotone preset SVG and style generation #38681

GS: Fix display of color palettes for border panel #38798

General Resources:

Thanks @mmaattiiaass for compiling this week’s update, and @onemaggie helping! Please comment if there’s something you’d like to highlight 🙂

Abbreviation key:

  • DT: Design Tools
  • FSE: Full Site Editing
  • GS: Global Styles

#gutenberg-themes-roundup

Jeff Ong 6:13 pm on February 2, 2022
Tags: ,   

Block Themes Meeting Notes — Feb 2, 2022

Location: #themereview in Make SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/.

Facilitator: @onemaggie

Full discussion begins here: https://wordpress.slack.com/archives/C02RP4Y3K/p1643817659583729

CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. / GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ + Themes Updates

WordPress 6.0 Roadmap

There’s a lot of great items in the roadmap that will impact blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. themes:

  • Embrace style alternates driven by jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. variations (35619)
  • Complete the scope of global styles. Introduce easy export & import; support for revisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision.; etc. (27941, 38199)
  • Introduce various new blocks to power the display of comments on themes. (34994, 38107)
  • Incorporate more definitive responsive handling (min/max containers) into the current flex-based tools. (34641)
  • Introduce responsive fonts with good defaults. (33543)
  • Add a Web Fonts APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. connected with global styles. (37140)

Open Floor

We discussed whether this meeting should continue, now that block themes are in core and the format of the #core-editor chat may be changing and it could make most sense to focus our discussion there.

If you have thoughts, leave them in a comment below. There will be a follow-up post for more visibility and feedback.

#block-based-meeting, #meeting-notes

Jeff Ong 5:59 pm on December 10, 2021  

Gutenberg + Themes: Week of Dec 5

This is the 75th weekly roundup of theme-related discussions, fixes, and developments in GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/. Here are some highlights from the last week:

Update Color Picker UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing.

The existing UI for selecting a color can become unwieldy due to multiple duplicated color palettes being stacked. #37067 updates the color picker to improve this situation.

Alternative approach to global padding

The discussion to add a global padding to your site, that still allows some items to be full-width, is on-going. The current idea for solving this is here, and there are some issues / drawbacks with the approach that will take more consideration.

Opt into blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. styles via theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML.

Most theme supports can be now set in theme.json. There is an issue to allow wp-block-styles to also be opted into via theme.json: #37255

#37262 reported an issue about the behavior of global link styles, with styles of block’s that contain links (e.g. the Post Title, Post Date, Post Categories). The global link styles are currently always taking precedence over the theme.json and block styles.

Overview Issues

  • Default Theme (Twenty Twenty Two): Overview of Gutenberg issues: #75
  • GS: The Global Styles Interface #34574  
  • FSEFSE Short for Full Site Editing, a project for the Gutenberg plugin and the editor where a full page layout is created using only blocks.: Post Comments LoopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. Block: Tracking issue #34994 
  • FSE: Site Editing block placeholders #35501
  • FSE: Templates list screen overview #36597
  • DT: Typography Tools: Tracking defaults for blocks #35604
  • Tracking: ToolsPanel Follow Ups #36165 

General Resources:

Thanks @pbking for helping to compile this week’s update. Please comment if there’s something you’d like to highlight!

Abbreviation key:

DT: Design Tools

FSE: Full Site Editing

GS: Global Styles

#gutenberg-themes-roundup

Jeff Ong 5:12 pm on November 3, 2021
Tags: ,   

Block themes meeting Notes — Nov 3

Location: #themereview, the full transcript begins here.

Facilitated by @mikachan

GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ + Themes Updates

Themes team representative nominations

Friday, November 5 2021 is the deadline to nominate themes team representatives. You can read more and nominate someone here: https://make.wordpress.org/themes/2021/10/27/nominations-call-for-the-themes-team-representatives/

Open Floor

There was a nice conversation around Full Site editing, designing block themes, and sharing resources beginning here: https://wordpress.slack.com/archives/C02RP4Y3K/p1635956395106000

Some questions that were asked:

  • Can you create Gutenberg theme from scratch without templates?
  • How can I design my theme if I create all the default folders and files?
  • Can I use CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. in the editor?
  • With FSE, is there a need to build custom themes the old way?
  • Do ACF work with FSE?

Thanks everyone for participating, please comment if there’s something you would like to add.

#block-based-meeting, #block-based-themes

Jeff Ong 8:48 pm on September 1, 2021
Tags: ,   

Block-based Themes Meeting Notes — Sept 1

When: September 1st, 2021

Where: #themereview

For the full conversation, here is a link to where the slack discussion starts.

GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ + Themes Updates

We spent most of the meeting discussing two recent features particularly relevant to blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. themes:

1. Flex layout support: https://github.com/WordPress/gutenberg/pull/33359

  • For now, flex layouts can only be defined via theme (templates and some layout options in theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML.), there is no UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. for setting a flex layout on a group block / container yet.

2. Adding a “gap” spacing around blocks globally: https://github.com/WordPress/gutenberg/pull/33812

  • A follow-on PR related to setting margins for first direct descents (:first-child) was raised: https://github.com/WordPress/gutenberg/issues/34441
  • There was some discussion around how the global gap and margin styles on the block should work together. The general consensus was the following behavior would be expected, from highest to lowest precedence:
    • Margin set by user in UI (eventually) – inline style
    • theme.json individual block margins
    • theme.json global gap
  • And if you want to keep following along, here is an overview issue about dimension controls: https://github.com/WordPress/gutenberg/issues/28356

Block Theme Resources created by Community Members

There have been some awesome block-theme resources recently created and shared by folks around the community! Here are a few highlights:

@Ellen wrote about her studio’s experience building their first block theme:  https://www.elmastudio.de/en/lessons-learned-building-our-first-block-theme-for-full-site-editing/

@poena published an in depth look at the typography options available in theme.json, filled with useful code examples to demonstrate: https://fullsiteediting.com/lessons/theme-json-typography-options/ and fullsiteediting.com is great for block related resources in general.

@richtabor came out with a 3 part series on standardizing how we build block themes. This is part 1 about everyone’s favorite — colors: https://richtabor.com/standardizing-theme-json-colors/

@karmatosed’s post was a great follow up alongside similar topic as the above — https://ephemeralthemes.com/2021/08/31/the-need-for-standardisation/

Please comment if you have any questions or notes to add!

#block-based-meeting