Block-Based Themes chat summary: 19 Feb 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, February 5, 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 development of Block-Based Themes geared to support Full Site Editing. Moderated by @kjellr.

Important Project Links

Global Styles Update

@kjellr Some recent full-site editing work affects themes. The first one is this PR 20047 by @nosolosw — Consolidate overall Global Styles mechanics in the server. This PR is a foundational step for the Global Styles work. It lets themes start specifying global values in  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. file. There are a couple example PRs in the `theme-experiments` repository to show how that would work. Technically, what this all does is convert the JSON into CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. variables, which will be able to change on the fly from in the Global Styles interface. It’s still very early, but it’s a good time to take a look and discuss in 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/ PR 17  and  PR 22

Speaking of the Global Styles interface I’d like to highlight PR 20061 by @itsjonq which introduces an initial interface for Global Styles in 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. Everything lives within a single 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. for now. Like the Gutenberg PR noted above, this is an early foundational piece. It’s a good starting point for later work.

New Full-Site Editing Blocks

@kjellr These will all come in handy for block-based themes. Many of these have been merged in already, but I wanted to list them all so that we’re all up to date. These are already available for use in block-based themes.

Some of the new blocks that have been merged in recently include:

  • Post Title
  • Post Content
  • Post ExcerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox.
  • Post Author
  • Post Date
  • Post comments form
  • Post comments count
  • Post comments
  • 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.

The post tags one is still in the works. Here’s a good place to follow along.

Semantic Tags in Gutenberg Blocks

@kjellr  There’s also an effort going on to figure out how Gutenberg blocks should render semantic tags 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.>, <main>, <section>, <aside>, and <footer>. This is a great structural question allowing blocks to render semantic tags for full-site editing.  Follow along here at Issues 20200. There’s already a PR as well.

Query Block

@kjellr  A major new block that’s being worked on is the Query block – PR 20106. This will be the driving force behind archive pages or really anything with a list of posts on it. The query block is the equivalent of the 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..

Theme Demo: Go

This is a time for us all to learn a bit about how others are building block-friendly themes today. @richtabor is going to tell us a bit about how and why the Go theme uses CSS variables, and how that made it easier to style blocks.

@richtabor I’m here to share about the Go Theme from my team at GoDaddy: why we made it, what’s now possible with Go (and potentially coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. themes in the future), and how it works. We wanted to develop an experimental design system where folks may easily adapt Go by modifying, or even add a whole new style. Pretty much an initial concept of what Global Styles is aiming for. This means that with WordPress, one theme (Go), and one 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 (CoBlocks – though you don’t have to use a block plugin) – you can make all the themes here. Some of my favorite website demos are:

Now onto how the design styles work. Currently we’re leveraging the CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. for much of the heavy lifting of the user-facing design choices – though we’ll migrate the theme to global styles as soon as it’s stable. We provide five different design styles, which can be swapped out at any time. These design styles are built using CSS variables (custom properties) and are defined within the theme – although are easily manipulated anywhere (as the nature of CSS variables). And we do have fallbacks in place, so not every variable needs defining within a design style – making things simple to manipulate

Here’s an example of what the Modern design style looks like in code:

:root {

    /* Content width */
    --go--max-width: 38rem;
    --go--max-width--alignwide: 90rem;

What’s particularly great about using CSS variables is that these style declarations are not only easily manipulated/overwritten when necessary but they’re easy enough to provide within the block editor, making one-to-one visual editing MUCH simpler to implement. Here’s a look to the screen shot in Slack into the editor of the same website I previewed in the Customizer above. Pretty much one-to-one visually

Global Styles will be defined a bit differently, although in theory — they should perform similarly to what we have in Go — a set of declarations that define a site’s design that may be overwritten by the end user. It’s not block-based yet, but an experiment of what global styles could be capable of. We’ll port over to FSE and global styles as soon as it’s stable.

If we extend the idea of Global Styles a bit more, like the following experiment, perhaps WordPress makes way for something like this in core

In this video, we’re declaring a site’s spacing/rhythm using a singular control. Note that the control/UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. in the experiment above is just to show how setting spacing could work in theory, not how we’ll implement it at all.

So that’s what we’ve been working on, experimenting on a design style system that’s portable, easily manageable, but ultimately empowers folks to publish beautiful websites that looks and feels right to them.

Transitioning Legacy Themes

@aristath discussed ideas for transitioning older themes to block-based themes. He published a great post. While experimenting with block-based themes it’s becoming more and more clear that there is no easy way for themes to be “updated” to take advantage of FSE. It’s either a new theme or nothing. And though that’s OK looking 5 years in the future, it’s not OK for businesses and authors that have spent countless hours building solid products and a user base of thousands. There are 2 ways to look at this situation:

  • It is an opportunity to start fresh. No baggage, no nothing. It’s a new beginning for everyone – which will benefit new authors.
  • No way forward for existing themes – which is bad for existing authors.

That’s not to say that existing themes MUST convert to block-based. They will surely continue to work the way they are for many years. But some themes will definitely want to. And we want to avoid issues of the past where every theme tries to reinvent the wheel and 90% of them are doing it wrong. That’s why we’re suggesting in that post that a library be built, allowing themes that wish to upgrade to do it in a consistent fashion, using a method that we properly test and implement.

We’d love your feedback on the post so we can figure out how to move forward. It won’t be an easy task, but we feel a lot of existing theme authors will benefit from something like that. So far there is no code to look at, just ideas and experiments, so feel free to share your thoughts 

Q & A

CSS vars are becoming the norm, so we should encourage them. But so far I don’t think we dropped IE11 support. What about that?

@dingo_d

@richtabor IE 11 support is tricky. We do have fallbacks in place – also utilizing polyfills – though the end result is not the best.

@johnstonphilip There was a lot of discussion on polyfills for IE 11 in this GitHub Issue 19611 My understanding of the takeaway there is that ie11 should work, but it doesn’t have to be pretty

@kjellr There’s also some relevant discussion that happened in the CSS Meeting in #core-css last week.

@aristath Saying a theme “supports” IE11 is not the same as saying that IE11 will display things the same way a less-than-10-year-old browser will display them. The way most of us treat IE is that things need to function properly, users must be able to use the site and interact with it. But if the color scheme for example is not the same or the paddings are different because css-vars are not supported then I’m fine with that. Most users are.

I was building my first block based theme today. The site title block is not fully developed yet? I don’t understand either what will happen with translations.

@acalfieri

@kjellr The site title block should be available as of today PR 17207

Are there any plans for dropping IE11 support in the near future?

@acosmin

@dingo_d There was a discussion in metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. regarding dropping IE support, and we cannot do that completely (not for a number of years at least) because some companies are pretty much tied down to use IE (corporate mostly).

@kjellr  In general, it sounds like the IE11 question doesn’t have an answer yet, but folks are all in agreement that some sort of fallback is required.

Reading through the migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. proposal from @aristath this still has theme authors creating site templates in Gutenberg and then copy/paste the resulting block code. What is the point in the migration/script if that is the exact same process for creating a Block Based theme? Before running the migration, it seems a new theme has been created, no? The “migration” simply takes into account existing user settings. Simple example: If on my current theme I have defined that the background-color of the copyright area is red, then I want on the new version my background-color to remain red.

@BMO

@aristath The “migration” simply takes into account existing user settings. Simple example: If on my current theme I have defined that the background-color of the copyright area is red, then I want on the new version my background-color to remain red.

What’s the benefit of using an 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. approach shown by @aristath instead of just adding a header.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. template in the old theme?

@kjellr 

@aristath  Your theme will still have a header.html. But in your header.html you’re defining the initial state of the header, correct? So basically what users see when they first install a theme, with its default settings. But on my site I don’t use the defaults… I went in the customizer and changed colors, font-sizes or whatever other settings my theme has. When I update the theme on my site, it should not reset everything. That’s where the “migration” part comes in. It will help users of existing themes not lose their settings when/if they update a theme.

@kjellr Ah ok, I think that makes sense. I think that’s something global styles would solve though, right? Since you’d specify those new colors/font sizes/etc via global styles too? Or I guess with your approach, you could not have to do that?

@aristath it depends…. If I have a setting on my theme “Top-header/Side-Header”, then the structure of the blocks would change. A migration could take care of that if the theme-author writes if this setting is set to side-header, then inject this template

@allancole  What was the process used in the Go theme to determine which style rules would be CSS-variable-ized? And related to that, what happens when replacing the available variables isn’t enough to achieve a certain design? Can the variables be extended or do you resort back to normal CSS?

@allancole 

@richtabor  Customizer settings will likely have to be mapped into styles manually (other than core defined settings) Most design-level choices are variables, though fallbacks are available on most variables so that each design styles doesn’t have to have a lot of variables designed – only what they need.

Have there any conversations around having a block based theme’s .html files listed in `Admin -> Appearance -> Templates`? This would make it easier for a user to open a copy/clone of the template, make their changes, then save as a new template override. Right now, a user would have to know the name of the .html file, create a new template with the same slug, then start from scratch. I also know that the Beta Site Editor is solving for parts of this, but is there value in seeing all of the templates listed out?

@BMO 

@kjellr  I could be wrong, but I think that’s the goal. I’m pretty sure I saw a PR about that and for Template Parts. I think discussion is here Issues 20252 I also checked with @epiqueras, who noted that the Appearance sections are just for development. Eventually this will all be available contextually within the full-site editing 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.. I believe “Appearance” > “Templates” is just a temporary home.

We covered a lot of new template blocks but what about navigation? It is in the plugin (experimental) but using it is still not a good user experience. Is this planned for later than 5.4 releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software.?

@dingo_d

@kjellr  There is a lot of iteration planned for that block which is part of the reason it was left out of the upcoming release. See the full post here. 

The next meeting is Wednesday, March 4, 2020, 16:00 UTC.

Meeting notes, Tuesday 11 February 2020

Yesterday we hold a meeting with the proposed agenda. The recap of the meeting is below and you can read the meeting transcript in the slack archives (a Slack account is required).

Weekly Updates

  • Suspended themes they have security issues.
  • In the past seven days
    • 359 tickets were opened
    • 387 tickets were closed:
    • 347 tickets were made live.
      • 13 new Themes were made live.
      • 334 Theme updates were made live.
    • 10 more were approved but are waiting to be made live.
    • 39 tickets were not-approved.
    • 1 ticket was closed-newer-version-uploaded.

WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. Asia 2020 Theme Review Team – How can we make it more fruitful?

The 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/. format is not suitable for reviews. The following suggestions could make it better:

  • to work on existing tickets, for example, the tickets of the default themes.
  • create a theme together or, better, create a 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 and document the issues found in the process, keeping notes to share with 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/ team.
  • ask the attendees what they want to do, as there will likely be a range of different experience levels + interests.
  • take lots of breaks
  • make sure every contributor gets some 1-1 time.
  • make sure the wifi connection is stable.

Unfortunately, these ideas will not be used in WordCamp Asia, as it has been canceled due to fear of the spread of the disease caused by the new coronavirus COVID-19. They could be useful, however, for future WordCamps.

Open floor

We continued discussing the difficulty for authors to respect accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) requirements and what we can do to help. At the moment, we have two requirements:

  • Skip links, which are very easy to implement, and
  • Keyboard navigation, which is more complicated, but where we have a lot of useful examples. In the post Planning for keyboard navigation, you can find help and resources to improve the implementation of this important feature.

In the meeting, we had a reminder that for accessibility the best thing to do is to use semantic 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 don’t style much. Browsers are accessible by default but using too much CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. and, especially, JS can mess things up.

Finally, there was also a small discussion about custom controls not being accessible with the keyboard. As the status of the CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. after the introduction of block-based themes is not known, this discussion seemed unfruitful for the moment.

#meeting, #meeting-notes, #trt

Theme Review Team Meeting Agenda for February 11

Theme review team (TRT) conducts a meeting on the second and fourth Tuesday of the month. Along with the fixed agendas, we have open floor meeting at the end where you can ask or share anything related to themes.

We encourage all members and anyone interested to attend.

Channel: #themereview | Time: Tuesday, 11th February 2020, 17:00 UTC

Meeting Agenda

  1. Weekly Updates
  2. WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. Asia 2020 Theme Review Team – How we can make it more fruitful?
  3. Open floor

The discussion about the meeting agenda can be held in the comments below. You are encouraged to propose the topic for the agenda.

Meetings usually last around 60 minutes. Attend and share your valuable feedback and suggestions.

Block-Based Themes Chat Summary: 5 Feb 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, February 5, 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 development of Block-Based Themes geared to support Full Site Editing.

Overview

This meeting is the first of its kind and serves to introduce topics around block-based theme engineering to the wider community. It was moderated by @kjellr, @jffng presented an overview on Block-Based Themes and Full Site Editing and @karmatosed presented an overview on Global Styles. There was a lengthy Question and Answer period to discuss issues and concerns from theme authors and reviewers.

@kjellr As most of you probably know, Gutenberg is in the process of expanding beyond the editor. As we’ve already seen, Gutenberg allows for a great deal of user-customization inside of post & page content. It allows any user to create custom layouts all by themselves, and style adjustments too. These will all usually be retained even after a user switches themes. With full-site editing on the horizon, Gutenberg is aiming to do something similar with the rest of the site. By turning elements like 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 into block areas, users will have the flexibility to place any sort of content wherever they want. It allows for a lot of creativity! They’ll theoretically be able to click and edit their header in place, or change their sites entire color scheme without needing to jump into an entirely separate interface. Themes have to figure out the role they play in this future, and that’s why we’re here today. This meeting should be a place for us to sort out that role together by learning, discussing, and experimenting.

What is a Block-Based Theme?

At the moment, it’s a theme made up of 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. templates, which are composed of blocks.

@jffng provided an overview of Block-Based Themes and Full Site Editing:

  • The early draft spec for block-based themes is in the Handbook with an overview which at the moment is a theme made up of html templates, which are composed of blocks.
  • You’ll notice two “new” directories in that folder structure: block templates and block template parts. Block templates function similar to how existing php templates we’re used to in themes.
  • Block template parts define an area of the site that would be reused across multiple block templates.
  • The WordPress theme-experiments repo on GitHub contains a few examples of this implementation. These examples are not intended for production. They are experiments to try and break how this works, ultimately identifying how block theme development should work and could be improved.
  • To try out these demos, install the latest version of the Gutenberg 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, and enable the “Full Site Editing” option under the plugin’s “Experiments” section.
  • A video demo of Full Site Editing is available by @epiqueras on Gutenberg Times.
  • A good place to see the work-in-progress (both design and dev) related to full-site editing is on GitHub.
  • New blocks are being added to make full-site editing possible on GitHub.
  • This is all very early so your feedback, testing, and iteration is so important. In general, a good way to provide feedback is to open an issue in Gutenberg. That will provide necessary visibility so theme authors voices are heard.

What are Global Styles?

@karmatosed shared an overview and some tools that are going to be available as part of Global Styles and also gives some links to start following as this is explored. This is all still in very early stages (imagine we’re still at the ‘what goes in cake’ stage of baking) and as you’ll see from some tickets lots of early sketch and map sharing.

What are global styles? In short, it’s style you can apply across your site right there in the browser. Pretty neat! Think of it as a kit full of component tools you can activate and take advantage of. Tried, tested and ready to go. It’s your decorating kit to get your site space just the way you want it.

In the kit comes:

  • Colours: text, background and primary (themes can set defaults)
  • Typography: change font size, scale (including line height) and alignment.

However, is that enough? This is currently a big question being questioned. There needs to be exploration on what are common things needed and what needs to be available.

Currently on issues, I will share there is some exploration as to what really we need as baselines to create those layouts users have dreamed of.

These are tools available in the editor, so addressing what is needed or not is key, over allowing everything and creating a complicated experience. A personal point I’m thinking about here is how when I had a crowded art box I could never find that ‘one pencil’ I wanted, we want to avoid that.

There is a project board you can follow along as this work happens over in GitHub.

Open Floor Questions

Is it possible we can discuss a sort of middle ground that doesn’t jump us completely over into block-based themes? I think a lot of theme authors were excited about the idea of defining custom block areas within the scope of their themes, sort of like how sidebars work. Right now, there’s certainly some valid concern that by making the entire theme based on blocks, which can be moved around and changed, that it could take away some of the artistry of designing themes. This calls into question whether there is a real need for themes in the future. Assuming everything can be customized by the end-user, themes seem to be little more than styles for individual blocks. While that can be a good thing for some people, not all overall designs can be broken down to the block level.

@greenshady

@kjellr (responded) not all overall designs can be broken down to the block level: I think this is the sort of thing that is best answered by some experimentation. The best plan of action at the moment is to try making our best theme-design wishes into blocks, and see where they fall apart and when those holes present themselves, let the Gutenberg team know.

@allancole I’ve been thinking about this too @greenshady but the craft and artistry that themers are used to doesn’t go away with Block-Based Themes in my view. Instead that craft appears in how we design, organize and layout blocks on a given page or set of templates. You end up using Gutenberg itself to express that same creativity, rather than doing it with 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. and JS and theme options where it’s harder for users to change and modify.

@karmatosed One thing I wanted to answer about artistry. A frame of thinking about it for me is art direction. In many respects a lot of this is bringing more artistry, allowing a tone to be set. Think of it as creating a theme that has a style boundary.

Are any of the experimental block themes magazine-style themes?

@Carike

@kjellr not yet, but there are only a few of them. The main thing holding back a magazine-style theme so far is a posts/query block (which is in the works!)

Global styles sound great. Are there plans on how to handle font-sizes on smaller devices/screens? Currently if you add a large font-size in the editor, it is added inline, thus it is nearly impossible to make it smaller using media queries, unless of course you add a special class for each use-case.

@ianbelanger

@itsjonq Are there plans on how to handle font-sizes on smaller devices/screens? The technology for Global Styles that we’re exploring is CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. Variables (if not that, than something that works very similarly.) This would make it possible to do media query targeted adjustments in CSS without a lot of forced overrides.

The issue brought up, that being inlined style values, makes it very difficult to customize after the fact, the CSS specificity is way too high. The variable system’s specificity is way lower, giving blocks/theme CSS more flexibility/control when it comes to adjustments.

Style conflicts (theme vs plugins) has existed in WP for a long time. Adding Gutenberg editor along with custom 3rd party blocks makes the problem worse. The reason is, there was never an underlying style system that connects all of them together. We’re hoping to help solve that with Global Styles. At least from a Gutenberg x Blocks x Theme x User Customization perspective.

Is there a coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software. target for either block-based themes or global styles at the moment?

@modernnerd

@karmatosed Global Styles likely will be this year but there is no release date set yet. There will be plenty of notice of these fun tools coming in to a release. So that information should be clear as time goes and they are worked on.

How far in the future do you think block based themes would be working in a normal installation?

@acalfieri

@kjellr the rough timeline at the moment is experimental through mid-year, with something basic in place by the end of the year.

How does theme switching work? HTML is preserved in content but what about styles? When the theme switches are the custom styles of the author lost? I am trying to understand the role of the existing theme author here, and how they differentiate their design philosophies from other authors.

@kevinhaig

@karmatosed The styles can be limited by providing solid defaults that’s a setting for someone to use. A good example is the colour palettes in paragraph block. A crucial bit is this has to make sense to the user on switch, nobody likes surprising things done by their theme or by their editor.

@kjellr There’s some discussion around hierarchy of styles happening in 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/. Essentially, there are tiers of styles, and some are retained during switches.

Providing support for the users own templates may become difficult for theme authors… it is already difficult for users to explain the problem they are experiencing.

@poena

@kjellr That’s a great point. It would be great to come up with a way to make support/troubleshooting easier.

Global styles: Are they theme-specific, or site-specific? If site-specific, will/should themes be able to set the global style on activation so they can guarantee the theme matches the demo?

@modernnerd

@Carike Most users want to pick a picture and have their site look like that – with only small colour / font size / etc. adjustments that can be done by overriding the CSS.

@aristath Right now they are site-specific, and the theme can set the defaults. Right now the discussion is to set them using a 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. file, but that is not yet a decision set in stone.

@melchoyce That’s going to be the beauty of Gutenberg patterns, you activate a theme and it can actually look like the demo

It sounds like the scope of design will be narrowed for theme authors.

@kevinhaig

@karmatosed With the new space I get to set the tone of things, create the experience and unlock the power of blocks. I also get to set boundaries for how things could look and guide users with theme palettes.

@melchoyce I’m not personally concerned about this decreasing creativity — I think we’ll actually be able to be more creative because we won’t have to stress about “is this a widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user., is it an option, etc.” For example, here’s an experimental theme @jffng, @allancole and I are working on now Portfolio: Nwaneri

@kjellr It depends on how you look at it. A large part of this is actually just changing the tools — giving theme authors a different place to define things they’re currently defining in many different ways. Themes will still provide those color/size combos by default.

@Carike I think this demo looks really cool. I just don’t think the average user is going to easily find a colour / size combo that is actually going to create a cohesive feel.

@karmatosed An early example of that is our a11yAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) color check right now and theme palettes. What if a theme could offer a pairing of fonts or preset color combinations? There is also a future of plugins extending this to create full art direction.

Block templates: Is the plan still to allow users to override theme templates and template parts via the admin area? If so, doesn’t this mean theme developers can no longer assume their theme templates/parts will be used when their theme is activated? (Users could be overriding a named template in their old theme that the new theme also uses.)

@modernnerd

Will it be possible for theme authors to lock certain block templates / template parts? e.g. users are allowed to change navigation and site title with Gutenberg, but not the overall header layout (parent column blocks)?

@themezee

@kjellr Will it be possible for theme authors to lock certain block templates / template parts? e.g. users are allowed to change navigation and site title with Gutenberg, but not the overall header layout (parent column blocks): I’m not sure, but that sounds like it’s worth a new GitHub ticket to discuss. There have been prior discussions and tickets about locking templates and everyone is invited to contribute in GitHub Issue 6993 or open a new ticket.

@greenshady On themes being able to lock certain parts of templates: A good example problem with “no lock” is the nav menu. Nav menus can be complicated to style. Theme authors have to be meticulous in their nav menu design so that it works perfectly across browsers and screen sizes. But, if users can move the nav menu anywhere, it throws a wrench into this perfectly-aligned design the author built. But, if authors can lock, for example, the header layout in place, they can make sure the nav menu in the header is just right. This is not the case with every theme; it just depends on the specific design. I think this has some theme authors worried. FWIW, I think this gets down to the question I originally asked; if themes can lock certain things in place, it gives the theme author back some control. If that happens, we could get more theme authors on board.

@bridgetwes For people creating custom themes for one client — like agencies — I don’t want editors to be able to change the design/general layout of a theme that a design team has crafted for a client.

@allancole If locking things in place means a customer can’t make an edit, i’m not so sure it’s a good thing. But if customers always have the option to roll things back to a Block’s original state then we might get the best of both worlds.

When working with Block-Based Themes are the block-templates and block-template-parts mandatory?

@benlumia007

@aristath The template-parts as far as I’ve seen are mostly used as defaults, so not mandatory. Same thing applies to the block-templates.

Is the long-term goal here to turn a ‘theme’ into a globally consistent collection of config files containing default styles, templates, and starter content?

@modernnerd

@melchoyce I think themes will still be able to provide color palettes, default fonts, even font combos and based on what I’m seeing in GitHub, I think yes, we’re heading this way.

If we’re moving toward Block-Based Themes, is there a need for the customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings.? Or, will these things play together in some way?

@greenshady

@kjellr I’m not sure anyone knows the full answer to that question yet. Personally, I don’t think the customizer will disappear immediately, but I do think it’s clear that many of its current duties won’t be necessary in this gutenbergy-future.

@andraganescu it’s unlikely to disappear since all the non-block themes will still use it.

Are there demo sites for the new experimental themes that would make the barriers to contributing / testing quite a bit lower than needing to install the experimental features of GB and each theme. I would like to see that for the future — an easier way to contribute when time is limited.

@Carike

How Can This Meeting Be Most Useful?

@kjellr One idea I have is to have a sort of show & tell with folks who are adopting block-friendly tools and practices in themes today. To help share knowledge and spark more ideas that could come in handy for full-site editing.

@karmatosed I’d love to see what is being built and also what couldn’t be, what are the hitches people found whilst exploring in their experiments?

@melchoyce The shortcomings people are discovering as they experiment are going to be super super important. We need to figure out where this works and where it doesn’t work.

@jffng Would it be worthwhile to have a short section of this meeting where we point out issues / PRs in Gutenberg relevant to the the theme audience? The discussion can remain in github and #core-editor, but kind of a run down of the latest and greatest design and dev happening in this space?

Wrapping up the very active meeting and exchange of ideas @aristath stated: The conclusion I have come to is this: Themes are not going away. They may change, completely transform in many ways. The tools we’re currently using and the way we’re currently building themes is not the way themes will be built next year. But they will still exist, and the new way is neither better nor worse. It’s just different. If we embrace that and open up our imagination, there’s lots of amazing things we — as theme authors — can build.

The next meeting is on Feb 19th at 16:00 UTC. Thank you everyone for attending and sharing so openly and in such a receptive manner.

WordCamp Asia 2020 – Get ready to contribute to the theme review

The first-ever Asian regional WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. is going to be held from February 21 to February 23 in Bangkok Thailand. As usual, the first day of the WordCamp will be the contributors day and the rest of the two days will be the session days.

Along with other contributors group, the Theme Review Team will also be there and contribute to the theme review process and discuss the theme standards and guidelines as well. You can meet our representative Ganga Kafle(@kafleg) and can learn more about those topics.

If you are new and this is going to be your first contributors day, we would like to tell you to read about getting started at a 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/..

In addition to that, we have proper guidelines to run a theme review session on contributors day. You can also check it out.

You can check out the preparation post for contributors day at WordCamp Europe.

Make sure you have the following things before entering the theme review team table:

  • Laptop and Adapter
  • Local Server(XAMPP/WAMPP) Installed
  • Code Editor like Sublime/Notepad
  • WordPress Installed

We can start reviewing WordPress theme now. 🙂

Visit the Theme Review table, meet our representatives there and share your ideas about making the theme review process even better. We are planning to review themes, share knowledge about the guidelines and encourage more reviewers to join the team.

If you have any further questions, comment down below.

See you at WordCamp Asia!

#wc-asia-2020, #wcasia