Block-based Theme Meeting Notes — July 15, 2020

Happened in #themereview, facilitated by @kjellr!

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/ Roundup

Open Floor

  • Can we submit block-based themes to the themes directory yet?
    • The theme may not pass the themecheck due to experimental-theme.json but maybe an exception can be made?
    • May be good to allow Block-based themes in a little before FSE is merged in CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. This is open to discussion.
  • There are some open PRs in theme-experiments that could use review:

#block-based-meeting

Block-based Themes Meeting Agenda – May 20, 2020

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

Time: Wednesday, May 2020, 16:00 UTC
Channel: #themereview

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/ Updates
    • New weekly Gutenberg + Themes update post format
    • FSE progress + open call for betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. testing
    • Global styles recap + next steps
  • Discussion
    • Global styles — “how do we allow themes to style the same things a user can at the 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. level?” (without writing fragile CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site.)
  • Q&A

If someone wanted to volunteer to take notes, that would be great!

#agenda, #block-based-meeting

Block-based Themes Meeting Notes – May 6, 2020

Happened in #themereview channel, facilitated by @kjellr.

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/ Roundup

Gutenberg 8.0 was released! Here are some highlights:

Folks are working to bring feature parity between FSE blocks and other existing coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks, eliminating a lot of extra CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. we’ve had to write for block-based themes: https://github.com/WordPress/gutenberg/issues/21087

Lots of good discussion around whether template parts should specify their own 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. tag, and include group block controls: https://github.com/WordPress/gutenberg/issues/20997

Support for dynamic content (relative media paths, translations) in block templates: https://github.com/WordPress/gutenberg/issues/21932

Adding a button to the full-site editor to download a theme including changes you’ve made: https://github.com/WordPress/gutenberg/pull/21958

  • There are concerns about the increased volume of themes that are essentially copies of other themes.

Discussion Topic: Keeping up with Gutenberg Changes

@poena recently asked:

Where does your news and updates come from?

  • GithubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ notifications
  • #core-editor chat summaries
  • Release changelog
  • Tags for in-progress work, e.g. [Feature] Full-site Editing, [Feature] Themes

A longer, nuanced discussion ensued around the challenge of influencing changes before they are made / released happened in 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/..

Two primary suggestions emerged that the team is going to try out!

  1. A weekly news digest focused on in-progress work and changes related to themes. @itsjusteileen and @kjellr will take a pass at the first post next week!
  2. Using the [Feature] Themes tag on the Gutenberg repo more often as relevant, and using tags in general.

#block-based-meeting

Block-based Themes Meeting Notes for April 15, 2020

Moderated by @kjellr, the full meeting transcript can be found in the 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/. #themereview channel, starting here.

Updates from 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/ Land

  • The Group, Columns, and Media & Text blocks all support gradients: https://github.com/WordPress/gutenberg/pull/21375
  • Line height control is available in both the paragraph + heading blocks:
    https://github.com/WordPress/gutenberg/pull/20775
  • The Heading 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. has a font size control:
    https://github.com/WordPress/gutenberg/pull/21431
  • More block patterns ship by default now:
    Hero Two Columns
    Numbered Features
    “It’s Time”
  • Explorations happening now around how to integrate block patterns into the standard block inserter: https://github.com/WordPress/gutenberg/issues/21080
  • Talks from April’s WPBlockTalk are now online: https://wordpress.tv/event/wpblocktalk-april-2020/

Discussion: Tips, Q&A to get started developing Block-based Themes

We had a lively discussion around getting started developing block-based themes. The whole discussion starts here, but here are some highlights:

  • General tips
    • There are “Block Templates” and “Block Template Parts” sections of the Appearance admin menu. That section won’t be in the final release of full-site editing, and it does not include theme-provided templates. Instead, you can find your templates listed in the full-site editor up here: https://cloudup.com/cOLu0gVpu5e
    • “I find it easier to design block templates directly in a post, copy the resulting block markup via the code editor, and put that into a template file.”
    • “Currently, if you enqueue an editor stylesheet via add_editor_style(), this will not effect the full-site editor. That’s coming soon though.”
    • Ian Stewart shared his notes from developing a block-based theme recently: “this was one of my top five moments in theming… The whole system and idea of building templates out of Gutenberg blocks themselves and then, consequently, being able to edit them in an editor, and having a block template hierarchy sitting on top of a template hierarchy … that’s all pretty brilliant.” Full notes / geek out here: https://wordpress.slack.com/archives/C02RP4Y3K/p1586971159193300
  • Where should you host things like images and video files?
    • “Such content should be packaged with the theme ZIP, at least images.  Videos via reputable providers, such as YouTube, could be off-site.”
  • How should demo content be handled?
    • “templates themselves should definitely not contain any kind of content. A template should lay out the structure, not content.”
    • “Block Patterns currently do bundle + display some sort of demo content”
    • “TRT will need to review their stance on demo content in a block-based theme system, which is going to be different from themes of the past”
  • The site title block doesn’t work as expected
    • “Is it going to inherit all the [styles] from the heading block?”
    • “the heading block should just have a “dynamic source” param where users can select if they want the actual text of the title to be inherited from som other property – like the site-title or post-title and things like that”
  • Line-height
    • “Wouldn’t it be better to have line-height support an opt-in theme feature and based on classes rather than or in addition to, I’m assuming, an inline style?  Something like .has-line-height-medium?  Make it work similar to font sizes.  If the user chooses something custom, that’s their choice, but let the theme offer some smart options based on whatever design system they’re using.”
    • “Great themes are great because they keep things simple and users can do what they want to do without spending 2 hours playing with a line-height control to figure out what’s best.”

.has-background

We had a discussion around a proposal about how background classes are applied: https://github.com/WordPress/gutenberg/issues/21439#issuecomment-614165717

The main question at hand was whether introducing .has-background class to all elements with any custom background would break existing themes. The general consensus was that it wouldn’t, but the change and history should be documented.

Is there a better time for this meeting?

We’d love to include more people in this meeting, but realize this is challenging because of timezones. Currently it is 16:00 UTC. Please comment with thoughts or if you could participate if the time was moved.

#block-based-meeting

Block-based Themes Meeting Notes for March 4, 2020

Moderated by @kjellr, the full conversation can be found here: https://wordpress.slack.com/archives/C02RP4Y3K/p1583337635468900

Global Styles Update

A PR led by @nosolosw has Global Styles working within the betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. site editor: https://github.com/WordPress/gutenberg/pull/20530

The main takeaway for theme folks is that this update pulls in style variables from a theme file (currently named experimental-theme.json).

You can see how this is applied in two PRs in the theme experiments repository:

Updating CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks to support the Global styles variables is one of the main focuses for 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 month, so expect to see more developments soon.

Blocks for full site editing

The comments count, comments form, 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., and tags blocks were all included in Gutenberg 7.6, which came out last week. The following blocks are in progress:

Lighter DOM

Please check out two PRs led by @ella on the Lighter DOM:

The goal is to create 1:1 parity between blocks’ front-end and editor DOM structure. This gets us a bit closer to being able to provide one set of styles that cover both the front-end and editor.

You can follow along the Lighter DOM work here: https://github.com/WordPress/gutenberg/pulls?q=is%3Apr+%22Lighter+block+DOM%22+

Block Patterns Overview

@nrqsnchz provided an overview of the Block Patterns concept.

“Block patterns are predefined block layouts that users can add to a document. Think of them as a combination of blocks that create a specific layout. These can be used to let users quickly add a contact form, a testimonials sections, an editorial section, etc.”

GithubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ issue with more details and explorations can be found here here: https://github.com/WordPress/gutenberg/issues/17335

The team has been exploring how to surface block patterns to users in this PR: https://github.com/WordPress/gutenberg/pull/20354

Your feedback and suggestions are requested!

Call for Experimental Themes

@poena wanted to remind folks that all kinds of submissions are welcome in a call for experimental themes:

Q&A

Following the updates, a lively discussion ensued. Please refer to those conversations in 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/. if they are of interest to you:

#block-based-meeting, #meeting, #meeting-notes, #trt