Gutenberg + Themes: Week of May 25, 2020

Hi everyone! Here’s the third 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/. We’re going to try something new out this week, and highlight one issue/thread in particular. If you’re only going to look at one issue today, we recommend this one: 

  •  🌟 A new iteration of experimental-theme.json, complete with draft documentation. This merged PR establishes a new baseline for how 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 might end up defining styles in the context of Global Styles. 20290 (Documentation)

Since conversations are ongoing, some of the issues & PRs mentioned were also present in previous weeks. We’ve tried to put brand new ones at the top of each of the bulleted lists. 

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

In progress / Discussions:

General

  • PR to remove form control resets and include in components instead. 22596
  • PR to adjust max-width setting for reusable blocks. 22632
  • PR for adding color controls to the list block. 21387
  • PR to change CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. specificity of default font-size rules. 22671
  • New issue to discuss themes setting font-styles rules for the heading block. 22641
  • Issue & PR to fix the appearance of Group block children in the editor. 22742 22746
  • Fixes for the issue where custom theme colors don’t work in the editor after Gutenberg 7.9.1. 22356
  • An attempt to remove some of the extra canvas padding in the editor. 22213
  • A conceptual discussion about removing all default margins for blocks in the editor. 22208
  • A discussion around standardizing classnames for blocks with backgrounds. 21439
  • A draft for converting pixel values to rem 22505
  • A PR to add darker colors to the blockquote + pullquote blocks when a theme opts into default block styles and dark mode. 22451

Block-based Themes

  • Tracking issue for Template Tags in Full Site Editing 22724 
  • Issue noting that the featured imageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts. block is available in the full-site editor, even when a theme does not declare support for featured images. 22313
  • Issue discussing the ability for theme files to be edited externally and synced with the full-site editor. 22469
  • Issue for creating a new Post Title block. 22621 
  • Syncing theme templates to the block editor in all contexts: 22469
  • Figuring out a way to handle inline dynamic content in theme templates. 21932
  • FSE blocks are missing classnames on the front end. 21903

Global Styles

  • Recap and next steps for Global Styles. 22296
  • Allowing themes to override global defaults & block settings using Global Styles. 22655 22657
  • Keep track of what block style attributes are supported. 22700
  • Take block data for Global Styles from block.json. 22698
  • Document how “features” works in theme.json. 22622 

Merged:

General

  • A new option for alignment in cover blocks. 21091
  • Sync up Group block markup in the editor with the front end. 21867
  • Use theme color for focus states. 22261
  • Fix for broken default color palettes. 22526
  • Fix for gradient presets that use named orientations and colors. 22239
  • Fix CSS bleed in button component. 22460
  • Fix visual bug in buttons that had a border radius of zero. 22293

Global Styles

  • A new iteration of experimental-theme.json, complete with draft documentation. 20290 (Documentation)

General Resources:


Thanks to @itsjusteileen, @jffng, and @joen for help pulling this post together. Please let us know if it was helpful in the comments!

#gutenberg-themes-roundup

Gutenberg + Themes: Week of May 18, 2020

Hi everyone! Here’s the second 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/. It can be hard to stay up to date, so hopefully this can serve as a quick reference. 

Since conversations are ongoing, some of the issues & PRs mentioned were also present last week. In those cases, we’ve tried to put any brand new ones at the top of each of the bulleted lists. 

Please weigh in to discuss solutions — your voice and feedback are welcome! 

In progress / Discussions:

General

  • Fixes for the issue where custom theme colors don’t work in the editor after Gutenberg 7.9.1. 22356 22526
  • An attempt to remove some of the extra canvas padding in the editor. 22213
  • A conceptual discussion about removing all default margins for blocks in the editor. 22208
  • A discussion around standardizing classnames for blocks with backgrounds. 21439
  • A draft PR to begin converting px values to rem 22505
  • A PR to add darker colors to the blockquote + pullquote blocks when a theme opts into default 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 and dark mode. 22451

Block-based Themes

  • Syncing theme templates to the block editor in all contexts: 22469
  • Discussion around using PHPPHP PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML. http://php.net/manual/en/intro-whatis.php. inside of block-based templates. 21932
  • FSE blocks are missing classnames on the front end. 21903

Global Styles

  • Recap and next steps for Global Styles 22296

Merged:

General

  • Prevent theme editor style bleed into the button component. 22460
  • Fix a bug related to buttons with a border radius of zero. 22393
  • Simplify cover block markup in the editor, to make theme styling easier. 22348

Block-based Themes

  • New page-based navigation in the full-site editor. 22368

Global Styles

  • Framework for how themes could specify design choices for blocks. 20290
  • Allow experimental-theme.json to be processed in the front end as well as all block editors. 22520
  • Documentation for experimental-theme.json. 22518

General Resources:


Thanks to @itsjusteileen, @jffng, and @joen for help pulling this post together. Please let us know if it was helpful in the comments!

#gutenberg-themes-roundup

Gutenberg + Themes: Week of May 11, 2020

Hi everyone! As discussed in last week’s block-based themes meeting, we’ll be trying out weekly posts that aim to improve awareness, communication, and collaboration between theme folks and those working on 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 can be hard to stay up to date with changes and discussions, so hopefully this can serve as a quick reference each week. 

Many of these issues and PRs are still open. Please weigh in to discuss solutions — your voice and feedback are welcome! 

In progress / Discussions:

General

  • An attempt to remove some of the extra canvas padding in the editor. 22213
  • A conceptual discussion about removing all default margins for blocks in the editor. 22208
  • Issues with custom colors in editor styles after Gutenberg 7.9.1. 21931 (Followup PR in 22356)
  • Discussion about clearer classnames for blocks that have custom backgrounds. 21439
  • Discussion around adding grids 20000

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

  • Figuring out a way to handle inline dynamic content in theme templates. 21932
  • Discussion around HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. and block features for template parts. 20997
  • Work is happening on bringing feature parity between the FSE blocks and existing blocks. 21087
  • Discussion around adding a button (perhaps just in the pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party) for exporting a theme directly from the full-site editor. 19260 
  • FSE blocks are missing classnames on the front end. 22097
  • Featured ImageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts. block appears broken in the editor. 22081

Global Styles

  • Recap and next steps for Global Styles. 22296
  • Exploring a way to manage theme CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. for Global Styles. 20290
  • Discussing the shape of the theme config file. 22291 21538 21490 

Merged:

General

  • Reduced specificity base block margins. 22051
  • Group blocks now have zero top/bottom margins by default. 22209
  • Better alignment between the front end and editor markup for the Cover block. 22348
  • Improvements to font size specificity in the editor. 21969 
  • Centered blocks now clear floats by default. 21608
  • The default inserter now correctly inherits paragraph font styles. 21725
  • The top and bottom margin from individual column blocks has been removed. 22018
  • In case you missed it, button issues from Gutenberg 7.9.1 were reverted in version 8.0. 21923 21816
  • Unset the “inherit” for link colors. 22160

Block-based Themes

  • The first version of a query block has been merged in. 22199
  • The gray background in the full-site editor has been fixed for themes that did not declare editor styling. 22182
  • The author block includes new options. 19894

General Resources:

Testing Explorations

Evergreen resources


Thanks to @itsjusteileen, @jffng, and @joen for help pulling this post together. This is the first of many, so please let us know if it was helpful in the comments!

#gutenberg-themes-roundup