Block-based Themes Meeting Summary: Aug 5, 2020

This week we held our bi-weekly 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 meeting in the #themereview channel. The conversation starts here.

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/ Theme-related Updates

Keeping up with Gutenberg” was launched, a single place to follow Gutenberg related posts across the make blog universe. 

Discussion: porting existing themes to block-based themes

We had a discussion about easing the path for theme authors to make the switch to 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., by allowing block templates to work with existing php templates. Specifically, the group discussed how template resolution could work, and the challenges that will arise around how the site editor will handle pages that use existing php templates.

The discussion arose from this GitHub issue, and continues there.

Open Floor

  • “it is difficult to get an overview of what we are working towards”
  • “Is FSE still targeted to being stable, in core, in 5.6? Or stable in Gutenberg at the release of 5.6?”

WCEU office hours and contributor day

Office hours 2nd of june

The Themes team office hours will be on Tuesday June 2 @ 17:00 UTC.

During the office hours, you are welcome to ask questions about the team and how you can contribute.

To join, you need a WordPress.org slack account. Our channel is called #themereview.

If you are not able to attend, team members are usually available on 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/. during EU hours. You can post your questions and we can get back to you when we are available.


Contributor dayContributor Day Contributor Days are standalone days, frequently held before or after WordCamps but they can also happen at any time. They are events where people get together to work on various areas of https://make.wordpress.org/ There are many teams that people can participate in, each with a different focus. https://2017.us.wordcamp.org/contributor-day/ https://make.wordpress.org/support/handbook/getting-started/getting-started-at-a-contributor-day/. 4th of june

We would love to hear what you would like to learn more about during the contributor day. -Our plans are flexible depending on what you would like to do.

We would like to start with a one hour introduction to theme reviewing, between 14:00-15:00 UTC and we will do that in two groups, using Zoom. You do not need to use a camera or a microphone to participate.

We will talk about why we do reviews, how we perform reviews, and perhaps do a quick theme review together.

After our break, we would like to focus on full site editing and 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. So, for this part, we will have to wing it :). The goal is to test, learn and to create a theme together that eventually can be added to the theme directory.
You can join even if you have never tried or looked in to full site editing before.

Team members and team representatives will also be available on slack during the afternoon.


What you will need

You will need a 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/ account and a WordPress slack account.

You will also need a WordPress install that you can use for testing.


Where to find information for new contributors

You can read more about the Themes team here.

On this page, you can read about how to get started at a contributor day:

Here, you can learn about reviewing themes:

#themes-team

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 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. 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 Theme Meeting Notes for 1 April 2020

This post summarizes the latest bi-weekly 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 meeting, held in the #themereview 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/., on Wednesday, 1 April 2020, 16:00 UTC. These meetings coordinate collaboration in the development evolution of the 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/ project as related to the development of Block-Based Themes geared to support Full Site Editing. Moderated by @kjellr.

Block-based Theme-related updates in Gutenberg 7.8

  1. PR to add semantic tag Group block variations has been merged. This allows block-based themes to use the Group block to denote things like <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>, and <section>. This solves one of the most common structural issues with building block-based themes. There’s no way to specify this from 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, but block-based themes should be able to use it manually by adding an extra tagName attribute.
  • New line-height controls for Paragraph and Heading blocks are available. These use new –wp–typography–line-height CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. variables to adjust the line-height. We should expect to see more of those “official” variables make their way in as we get ready for Global Styles.
  • “Lighter DOM” block updates removes unnecessary wrappers and tags from the editor, so that the editor DOM for blocks matches the front end more closely. Which will allow theme authors to eventually share code between the front and back end.
  • The Site Editor 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. is receiving a steady stream of small updates to bring it more on par with the standard editor.
    • PR 20691 Site Editor beta supports full-screen mode
    • PR 20549 Site Editor beta supports custom blocks
  • Soon, it’ll be pulled out into its own top-level 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. item when the full-site editing experiment is active.
    • PR 20530 adding the Global Styles sidebar

It’s had some solid new updates this week and is getting closer to MVPMinimum Viable Product "A minimum viable product (MVP) is a product with just enough features to satisfy early customers, and to provide feedback for future product development." - WikiPedia. Small heads up that a few of the standard variables recommended for experimental-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 have changed a little bit since last time. See details in the PR

Block Styles

A handful of default block patterns were added to Gutenberg 7.7. The new version 7.8 takes that further by including an API for plugins and themes to supply their own block patterns

The 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. for this is relatively straightforward, and just needs two properties:

  • The title for the block pattern
  • The actual content, which is just an escaped copy/paste from Gutenberg

Here’s a quick example:

register_pattern(
    'my-plugin/hello-world',
    array(
        'title'   => __( 'Hello World', 'my-plugin' ),
        'content' => "<!-- wp:paragraph -->\n<p>Hello world</p>\n<!-- /wp:paragraph -->",
    )
);

What is a Block Pattern?

The broader topic for discussion was the introduction of Block Patterns. By definition Block Patterns are related to smaller sections of a page/post. Templates and template parts are the pieces that are tied to the layout of an entire page (ie. header, sidebar, etc) while Block Patterns create the layouts within those sections.

Now that this APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. exists, it’s possible for themes to ship their own recommended block patterns. For instance, if your theme targets a restaurant, you could ship a set of menu layouts as block patterns. opening up a whole new way for themes to share layout/content suggestions with their users. Possible block patterns are listed on GitHub.

Meeting discussion centered around:

  • How do you envision using Block Patterns in your themes?
  • What sorts of Block Patterns would you like to see included with WordPress by default?

How Can Block Patterns Be Used in Themes?

  • They can provide layouts for 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..
  • Themes could bundle reusable patterns for the sorts of things seen in the theme demo. So using 2020 as an example, it could bundle a pattern for this group of blocks, as seen on the demo’s about page.
  • It was suggested and agreed that only minimal patterns should be added to coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. and only patterns that are very common and used by the 90%.

What Patterns Would You Like to See Available?

  • A menu example for restaurant themes
  • About or Team patterns for a business theme — a team pattern could be 3 columns, each column containing image/header/paragraph, for example
  • Services Provide Pattern but will need option for selectable SVGs
  • Testimonial
  • Card (title + photo + text + link)
  • Features
  • Text layouts with quotes, pull quotes, and media integrated for themes whose primary purpose is for displaying content

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. Validation

The Custom tag for group blocks that don’t use “block markup” doesn’t need HTML validation.  For right now the tag entered as the tagName just needs to be one of the elements listed in GitHub.

Contributors are encouraged to continue testing Block Patterns, Templates, Block-Based Themes and Full Site Editing using the follow Issues and PRs discussed in this meeting. Block-Based Theme Experiments can be submitted at https://github.com/wordpress/theme-experiements and there is a call out for experimental theme submissions.