X-post: FSE Program Exploration: Help with the future of Block Theme Switching

X-comment from +make.wordpress.org/test: Comment on FSE Program Exploration: Help with the future of Block Theme Switching

Gutenberg + Themes: Week of August 30, 2021

Hello! This is the 63rd 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/.

As always, please weigh in on the tickets below — your feedback is crucial and appreciated. 

Active Issues / Discussions & PRs

  • Themes: 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. v2 #34349
  • Themes: 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. Gap: Add configuration for horizontal and vertical block gaps #34347
  • Themes: Disable the wide width control if the theme does not provide a layout.wideWidth value #34507
  • Themes: Allow disabling text and background color via theme.json #34414
  • Themes: Track changes in the size of the global stylesheet #34329
  • Themes: Allow filtering the alignment options of blocks via theme.json #34317
  • Themes: Allow themes with theme.json to opt-out of block gap styles #34491
  • Themes: Add default editor styles applied to themes without theme.json and without editor styles #34439
  • Themes: Add basic support for child themes #34354
  • Themes: SidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme./widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. block #33952
  • Themes: Make it possible to define duotone settings in theme.json #34073
  • 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.: Site editor template mosaic view #33770
  • GS: Remove custom prefixes from properties that did not land in 5.8 #34485
  • GS: merge block CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. with theme.json styles #34180
  • GS: 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. to allow blocks to access global styles. #34178
  • Blocks: Post Navigation Link: Add typography settings #34381
  • Typography Tools: Tracking #34345

Merged/Fixed/Announced

  • Themes: Make global styles available to all themes #34334

General Resources:

#gutenberg-themes-roundup

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

Block-based Meeting Agenda — Sept 1

There is a 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.-based themes meeting tomorrow (Wednesday) Sept 1 at 16:00 UTC in the #themereview 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/. channel.

Find your local time here: https://www.timeanddate.com/worldclock/fixedtime.html?msg=Block-based+Themes+%E2%80%94%C2%A0Monthly+Meeting&iso=20210901T12&p1=179&ah=1

Agenda

  • 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
  • Spotlight on recent 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. posts and tutorials from the community
  • Open Floor

Please comment with anything you’d like to discuss!

#block-based-meeting

Gutenberg + Themes: Week of August 23, 2021

Hello! This is the 62nd 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/. Thanks @mikachan for compiling!

As always, please weigh in on the tickets below — your feedback is crucial and appreciated. 

Active Issues / Discussions & PRs

  • Themes: CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. Output when 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. is empty #34205
  • Themes: Consider adding form elements to the theme.json elements 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. #34198
  • Themes: consider loading user styles after theme styles #34141
  • Themes: Allow for Global Block-level configuration of duotone #34122
  • Themes: [Columns] Width listed in px rather than percentage #34096 
  • Themes: Enable transparency for duotone #34130
  • 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.: get_the_permalink should reflect the FSE permalink when used with Blocks #34271
  • FSE: ​​Explore “Site Branding” patterns for Site Title, Site Logo, Site Tagline #34123
  • FSE: Improve the error handling for invalid JSON #34119
  • FSE: Directory for Templates and Template Parts #34081
  • FSE: Add basic support for child themes #34354
  • GS: [RNMobile] Pullquote Block: Changes to Colours Not Reflected in Editor #34358
  • GS: Track changes in the size of the global stylesheet #34329
  • GS: Make the global stylesheet available for all themes #34328
  • GS: Allow filtering the alignment options of blocks via theme.json #34317
  • GS: Border control: Add padding when a border is set #34315
  • GS: SidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme.: allow resetting the value of the line-height provided by the user #34260
  • GS: Theme.json -Adding color to the search block changes the wrong element #34216
  • GS: Provide means to enable/disable Global-level configuration of blocks #34206

Merged/Fixed/Announced

  • GS: Fix block-level global styles color panels #34293

Overview Issues

  • Global Styles: Design Tools Overview #33447
  • Block Styles Breakdown #20331

General Resources:

#gutenberg-themes-roundup