Gutenberg + Themes: Week of Apr 9, 2021

Hello! This is the 44nd 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/.  

Please weigh in on the tickets below — your feedback is welcome and appreciated!

Issues / Discussions & PRs

  • 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.: New milestone — Full Site Editing Gradual Adoption 30662
  • FSE: Fix nested template parts not loading (“Run inject and remove theme attribute recursively”) 30416
  • FSE: Term Description 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.: Don’t output if there’s no description 30564
  • FSE: Post Comments & Post Comments Form Block: Provide HTML5 markup by default 30502
  • FSE: Discussion on Editor Styles Wrapper Padding for block themes 30545
  • FSE: Add post classes in the 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. 30497
  • FSE: Update customize link from Appearance menu for block themes 30643
  • FSE: Finalizing the name and menu item placement proposal 29630

Merged/Fixed

  • Global Styles: add transform utility from v0 to v1 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. 30600
  • Global Styles: Use “Custom Styles” title to signal there are global styles changes https://github.com/WordPress/gutenberg/pull/30521
  • FSE: Allow creating custom block templates in classic themes 30438
  • FSE: Add do_block_template_part function 30345
  • FSE: Fix template hierarchy fallbacks 30599

General Resources

Please comment if there’s something you’d like to highlight 🙂

#gutenberg-themes-roundup

Block Themes Meeting Notes — April 7, 2021

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 theme updates 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/ 

  1. Gutenberg 10.3 (and its minor releaseMinor Release A set of releases or versions having the same minor version number may be collectively referred to as .x , for example version 5.2.x to refer to versions 5.2, 5.2.1, 5.2.3, and all other versions in the 5.2 (five dot two) branch of that software. Minor Releases often make improvements to existing features and functionality. follow ups) have been released. This release included a couple cool block-based theme enhancements
  2. Block-based themes now get alignment styles automatically in the front and back end.
  3. Themes can now use any existing theme.json property for any block, even if the block doesn’t explicitly support it in the 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. yet.

TT1 Blocks update 

  1. Version 0.4.5 came out last week, in tandem with the Gutenberg release. This version supports the new alignments settings, and also restores the correct, lighter font-weight for all headings in the theme. Please update if you haven’t yet!
  2. The theme team been seeing a few GitHub issues roll in from the #fse-outreach-experiment call for testing, which is great. Keep your eyes out for those, and feel free to help fix and respond to them if anyone is able to!
  3. TT1 Blocks and the emptytheme migrated over to this approach in these PRs:
    • https://github.com/WordPress/theme-experiments/pull/236
    • https://github.com/WordPress/theme-experiments/pull/233

Discussion topics


New tools for transitioning to Block-based Themes.

A couple PRs that should help with transitioning existing themes to be block-based:

  • New gutenberg_block_template_part(), gutenberg_block_header_area(), and gutenberg_block_footer_area() functions to help pull block-based template parts into existing PHP templates: https://github.com/WordPress/gutenberg/pull/30345
  • Allowing people to create and use block-based page template for certain pages on their site, even while using a non-block-based theme: https://github.com/WordPress/gutenberg/pull/30438

These issues relate to some prior discussions the theme team had about bridging the gap between existing themes and block based themes.

@aristath Tried both of them. The first one will allow theme-authors to start transitioning parts of their themes (headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes./footer) using block-based templates. The second one allows users to create a completely custom template for any page on their website! So they can use any theme they want, and still be able to build a 100% custom frontpage

@poena said the first 30345 is ready to be merged but she thinks 30438 has UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. issues and should get reviewed. For the issue 30438 she thinks after and coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. update users will suddenly see a new link with no explanation. Users are familiar with selecting templates in the page attribute section, but this is called “template” and it is in a completely different position. This makes user experience confusing

@kjellr also agrees on the UX part, and thinks this needs to be thought holistically, alongside the rest of the 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. templating work.

How are the new alignments controls working so far? 

@youknowriad merged https://github.com/WordPress/gutenberg/pull/29335 into Gutenberg 10.3. This means themes don’t have to provide front-end alignment CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. to match the alignments in the editor.

Open Floor / Q&A

@poena thinks more docs are needed to get more exposure and explanation for both users and theme authors.

@poena highlighted the margin settings issue: https://github.com/WordPress/theme-experiments/issues/244 

She also highlighted a review request for https://github.com/WordPress/gutenberg/pull/30564

Block-based Themes Meeting Agenda: April 7, 2021

Below is the agenda for this week’s Block-based Themes meeting.

Time: Wednesday, April 7, 2021, 11:00 AM EDT

Channel: #themereview

Agenda

  • 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 theme updates 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/
  • TT1 Blocks update
  • Discussion topics:
  • Open Floor / Q&A

Please comment if you have any additional topics you’d like to see discussed!

+make.wordpress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org//coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress./ #agenda #meeting

Gutenberg + Themes: Week of Apr 2, 2021

Hello! This is the 43nd 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/.  

Please weigh in on the tickets below — your voice and feedback are welcome! 

Issues / Discussions & PRs

  • 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.: Add do_block_template_part function 30345
  • FSE: Add a theme slug to nested template parts 30413
  • FSE: Add basic CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. to post comments 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. 30382
  • FSE: Finalizing the name and menu item placement proposal 29630
  • FSE: Post hierarchical Terms Block: add icon 30348
  • Global Styles: Add CSS vars for root level settings 29714

Merged/Fixed

  • Global Styles: Add padding server-side block support 30332
  • Restore the inner div of group block for classic themes 30453
  • Revert column-gap spacing for custom sized buttons 30449
  • FSE: Add gutenberg_support_block_templates 30465
  • FSE: Use WordPress 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. for query block 30405
  • FSE: Load block-editor scripts & styles in the site-editor 30448
  • FSE: Fix template hierarchy for custom, user-generated templates 30464

General Resources:

Thanks to @kjellr for help pulling this post together. Please let us know if it was helpful in the comments! 

#gutenberg-themes-roundup

#block-based-themes

Gutenberg + Themes: Week of March 25, 2021

Hello! This is the 43nd 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/.  

Please weigh in on the tickets below — your voice and feedback are welcome! 

Issues / Discussions & PRs

  • Themes: Wrong stylesheet loading order in the editor. 30246 
  • 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.: Attempt to create 404 template from Site Editor results in 400 Bad Request 30135 
  • Themes: Blocks: Differences between editor and frontend 29976 
  • Themes: Changes to 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. 29891 
  • FSE: theme data for Global Styles and Templates 30191 
  • FSE: Attempt to create 404 template from Site Editor results in 400 Bad Request 30135 
  • FSE: Fixed Position HeaderHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. and Footer Template Parts 30121 
  • FSE: Most site building blocks need previews and placeholders 30029 
  • FSE: Group 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.: Pass “inherit layout” to child blocks 29983
  • FSE: Block Editor: Standardize loading default block editor settings 30245 
  • FSE: Try clickthrough to edit template part children. 30156 
  • Themes: Global Styles: Add child themeChild theme A Child Theme is a customized theme based upon a Parent Theme. It’s considered best practice to create a child theme if you want to modify the CSS of your theme. https://developer.wordpress.org/themes/advanced-topics/child-themes/. support 30147 
  • FSE: Fix Empty Block Templates output string 30145 
  • FSE: Docs: Add description for templateParts in theme json. 30118 
  • Themes: CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site.: Add a reset for image heights 30092 
  • FSE: Rename experimental-theme.json to theme.json and add a fallback for backwards-compatibility 29981 
  • Themes: Fix the archives block frontend/editor parity 30141 
  • Themes: Expose layout values from theme.json as css-variables 30081 
  • FSE: wip: Responsive Navigation 30047

Merged/Fixed

  • FSE: Fix Template Part Alignments behavior 30099 
  • FSE: Site Editor (Experiment): Automatically open the 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. to the appropriate template sub-menu 30098 
  • FSE: Fix post editor layout regression 30093 
  • FSE: Remove alignments from the root level of the site editor 30079 
  • FSE: Add layout support to the template part block 30077 
  • FSE: Fix edge case where the default layout could be undefined 30024 
  • FSE: Add “theme” categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. and better present template parts in the inserter 30020 
  • FSE: Post Content: Add support for experimental layout 29982 
  • FSE: [Query block] Remove unused QueryProvider 29947 
  • Themes: Reset wp admin styles for hr 30235 
  • Prevent the columns block from having a width > 100% 30229 
  • File block: Make the editor markup match the frontend 30148 
  • Remove latest comments editor styles 30134 
  • Restore the default editor font for the non FSE themes 30080 
  • Better CSS reset style loader order 30034 
  • Allow themes to use any styles in the theme.json whether or not the block supports it 29941 

Overview Issues:

  • Themes: Alignments Overview 29506

General Resources:

Thanks to @kjellr for help pulling this post together. Please let us know if it was helpful in the comments! 

#gutenberg-themes-roundup