Tag Archives: gutenberg-themes-roundup

matiasbenedetto 7:15 pm on April 28, 2022
Tags: gutenberg-themes-roundup   

Latest changes in Gutenberg + Themes: 13.0 release

Hello! This is the 79th 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/ coinciding with the 13.0 release.

New Features

#39899 Add color support to the quote 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.

Improvements for Theme Export:

#39751 Convert spaces to tabs 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.

#39775 If the theme declares a version number then add a schema

#39842 Sort theme.json properties

#39848 Remove default theme.json properties on export

Bug fixes

#39895 Add a box-sizing border-box to lists

Global Styles

#39845 Revert “Global styles: remove block gap control” 

#39846 Block Styles: Revert changing default overflow-wrap to all headers, lists, and paragraphs

Open Pull Requests

#40513 Add Global Styles CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. to inline block CSS

#40260 Adds support for button elements to theme.json

#40335 Use a var for user presets to avoid having to use ! important to enforce them

Latest open issues

#40181 Global Styles: Allow themes to opt out of coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. theme.json

#40371 customTemplates: unable to remove postType support 

#40432 Clear customizations after template export & adding to theme files

#40469 wp_enqueue_block_style no longer adds styles in the site editor if Gutenberg 13.0 is active

#40491 Use title in default theme.json to override “Default” label in Site Editor Style Variations

#40621 Block style for specific block variation

General Resources:

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

#gutenberg-themes-roundup

Jeff Ong 5:48 pm on February 18, 2022
Tags: gutenberg-themes-roundup   

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

Ben Dwyer 9:21 am on January 31, 2022
Tags: gutenberg-themes-roundup   

Gutenberg + Themes: Week of January 24th, 2022

Hello! This is the 75th 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/. It’s been a quiet few weeks because of the release of WordPress 5.9.

Global Styles variations switching

#35619 introduced a mechanism in Global Styles to switch between different preset styles for a theme. This allows themes to provide a wide variety of design options by simply creating different 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. files. This is an alternative to child themes that opens up a lot of opportunities for creating variations of a theme very easily.

Allow pattern registration from the Pattern Directory with theme.json

#38323 is a proposal to allow themes to register patterns from the Pattern Directory.

Transparency added to color controls

Since #37731 merged it is now possible to set colors with transparency. This should make it possible to create more interesting layouts as blocks overlap and colors bleed into each other.

Typography support on the 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.

In #37456 we added typography controls to the group block. This will make it easier to define different styles for different areas of your theme.

Design controls for interactive states

#38277 is a proposal to add design tools to help us manage interactive states in blocks, like :hover and :focus. This is a particularly challenging issue and could use input to get the ball rolling.

Improving the Site Editor export

The Site Editor already lets us export our edited templates. It would be great if this export also contained the other pieces needed to create a theme, which is what #38199 is proposing. Are there other things that we would need to make a complete theme? How could we incorporate a screenshot for example?

The style engine

Gutenberg has a wide range of block supports to customize the look of different styles: borders, colors, background, spacing, layout, duotone, typography. These things have been implemented organically, resulting in a system with different approaches depending on the styles we’re changing and their values. The style engine (#37978) is an attempt to unify these approaches in one package that will (in time) be able to support each of these customizations.

As always, please weigh in on these issues and pull requests — your feedback is crucial and appreciated. 

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 @jeffikus and @onemaggie for your help with this week’s summary. 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

Maggie Cabrera 3:57 pm on December 17, 2021
Tags: gutenberg-themes-roundup   

Gutenberg + Themes: Week of December 13th, 2021

Hello! 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/. This will be the last weekly update until next year. 

Typography supports for group and row blocks

PR #37456 adds typography supports for group and row blocks such as font size, weight, line height, letter spacing, etc

Nameless font sizes

#37410 proposes that a theme shouldn’t need to include a name to define a font size 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., just the slug and the size value should be enough. This PR is a follow-up after #37381 was merged.

Approach to global padding

The discussion around global padding continues and no definite solution has been found in time to make it to 5.9. It has been decided that in the interim Twenty Twenty Two will provide a CSS fix that will cover most of the cases until a better solution is reached in Gutenberg.

Default font sizes renamed

#37381 renames the font sizes by default when a theme doesn’t provide any in theme.json. It’s a follow-up to #37038

Template parts in child themes

There was a bug that was preventing 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. child themes that didn’t provide an index template from inheriting the parent’s template parts, this has been fixed by #36910

As always, please weigh in on these issues and pull requests — your feedback is crucial and appreciated. 

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 @scruffian for your help with this week’s summary. 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

Ben Dwyer 9:57 pm on December 3, 2021
Tags: gutenberg-themes-roundup   

Gutenberg + Themes: Week of November 29th, 2021

Hello! This is the 74th 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/. This week we are trying a digest format. Please let us know what you think in the comments.

New directory names for 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

In #36647 the names of the `block-templates` and `block-template-parts` changed to `templates` and `parts` respectively. The old directory names will continue to work as before. Please see this post for more details.

Changes to the navigation block

In #36863 the `__unstableLocation` attribute of the navigation block was given a lower priority than the contents of the block. This allows themes to provide a default navigation for users who don’t have classic menus set up, while at the same time allowing sites that have already implement classic menu locations to override them.

Templates in the Site Editor

#36613 proposes moving the 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 templates to the top level of the Editor navigation. This seems like a good way to surface templates that are commonly used. The drawback is that it makes it harder for users to discover and understand other template parts. More input needed here.

Relatedly, #36612 suggests that “used” templates are marked so that users can see which ones are currently being rendered to users.

New Global Styles keys

In #36748 and #36645 the keys used when creating Global Styles were changed from `coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.` and `user` to `default` and `custom` respectively. Block themes will be unaffected by this change, but any plugins that hook into Global Styles maybe impacted.

Layout changes when selecting background colors.

When adding background colors to blocks, Gutenberg adds padding. #36971 raises some of the challenges that this presents. Without this padding blocks can look quite broken as content touches the edge of the block. Should we expect users to add this padding? Can we connect the selection of a background color to the padding setting? What do you think?

Exporting 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. files

In #36619 theme.json files are added to the Site Editor export tool. This seems like a very useful addition for anyone who builds block themes. Let’s get it merged!

Sort keys alphabetically in theme.json

In #36968 the keys of the “core” theme.json file were reordered so that they are alphabetical. This seems like a good practice that all theme.json files should implement. Having a predictable order for keys makes it easier to find what you are looking for and helps avoid duplicate items.

As always, please weigh in on these issues and pull requests — your feedback is crucial and appreciated. 

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 @jeffikus and @pbking for your help with this week’s summary. 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