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