Sarah Norris 1:59 pm on August 5, 2022
Tags:   

Gutenberg 13.7 + Themes

Hello! This is the latest 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/ from the 13.7 release of 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.

Post Title 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. now supports text-decoration (#42328)

The Post Title Block now supports `text-decoration`, which means it is now possible to control the text-decoration for this block in the Global Styles interface or in 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., for example:

"core/post-title": {
    "typography": {
        "textDecoration": "underline"
    }
},

Spacing size presets added to theme.json settings (#41527)

Previously, the spacing design options in the editor such as padding, margin, and gap only allowed the setting of custom values. In order to help keep a theme design consistent, this PR allows theme authors to specify a pre-defined list of spacing sizes. This also allows a standard list of space presets to be easily transferred across themes. This works in a similar way to the existing list of font size presets.

To add preset spacing sizes, add `spacingScale` and/or `spacingSizes` to a theme.json file. You can see an example of this being set in a theme here, and used here in theme.json and here in a column block.

Expanded the templates that can be added via the editor (#41875)

In GB 13.7, users can now add many more types of templates via the Site Editor, including templates for custom taxonomies, and specific terms, categories, and tags. To test this out, go to Templates in the editor, click ‘Add New’, and see the full list of templates that are now available.

Style all heading elements together (#41981)

Previously, heading elements such as H1, H2, H3, etc could only be styled individually in theme.json. This change enables themes to set style rules for all heading elements together using the `heading` property, for example:

"heading": {
    "color": {
        "background": "blue"
    }
},

Link :hover state control added to global styles 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. (#41976)

Users can now set the :hover interactivity state for top-level link elements via the global styles interface, making it easier for end-users to edit this setting.

Set blockGap value for specific blocks (#40875)

As part of PR #40875, users can now set a `blockGap` value for specific blocks in theme.json and in the Global Styles interface, for example:

"styles": {
    "blocks": {
        "core/buttons": {
            "spacing": {
                "blockGap": "6px"
            }
        }
    }
},

Other notable changes

  • Comments block: Remove stray legacy class from edit (#42335)
  • Global styles: filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. block level styles before compiling global stylesheet (#42207)
  • Try tabs instead of segmented control for switching between solid/gradient in color panels (#41937)

General Resources:

Thanks to @mmaattiiaass and @pbking for the help putting this together!

Please comment if there’s something you’d like to highlight 🙂

#gutenberg-themes-roundup

KafleG 6:12 am on August 2, 2022
Tags: ,   

X-post: Themes team update August 02, 2022

X-comment from +make.wordpress.org/updates: Comment on Themes team update August 02, 2022

Carolina Nymark 6:07 am on August 2, 2022
Tags: ,   

X-post: Moving Core block styling to JSON

X-comment from +make.wordpress.org/core: Comment on Moving Core block styling to JSON

Ari Stathopoulos 10:07 am on July 28, 2022  

Using locally-hosted Google fonts in themes

This post is a follow-up to Complying with GDPR when using Google Fonts, aiming to answer some questions that have been popping up in team meetings and social media.

Historically, WordPress themes hosted in the w.org themes repository were not allowed to use third-party resources. This included images, javascriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. files, CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. files, webfonts, and other assets loaded from a remote server.

Google fonts was an exception to this rule because, at the time, there was no reliable way to implement locally-hosted webfonts, and typography is an integral part of a theme’s design.

Google fonts, however, can no longer be considered an exception to this guideline because of the GDPR and privacy implications.

if Google Fonts is the only allowed external resource, but we have to save it locally, can’t we use other font sources as well?

The exception for Google-fonts as an external resource predates this team’s efforts to locally host webfonts. If a theme saves fonts locally, they are no longer considered an “external resource”. As a result, themes can use any GPLGPL GPL is an acronym for GNU Public License. It is the standard license WordPress uses for Open Source licensing https://wordpress.org/about/license/. The GPL is a ‘copyleft’ license https://www.gnu.org/licenses/copyleft.en.html. This means that derivative work can only be distributed under the same license terms. This is in distinction to permissive free software licenses, of which the BSD license and the MIT License are widely used examples.-compatible webfont, regardless of the provider used (google fonts or other webfont providers), provided that the font is bundled with the theme – or the themes implements a mechanism to automatically download the remote webfont on the site’s server.

Is the theme allowed to write the font locally? Are there limitations for where they can be written?

Yes, the theme is allowed to write the font locally. The limitation should be to not put the files somewhere they’ll be overwritten on update. If the theme bundles the font-files in its own package, then these files can be in the theme itself. If the theme downloads the webfonts and saves them automatically on the site’s server, then a location inside wp-content would be ideal (like for example wp-content/uploads/fonts or wp-content/fonts). However, if the theme does not bundle the webfonts, then it should not be writing these files in the theme’s folder itself, as that folder will get overwritten on update. Of course, placing the files inside CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. folders like wp-admin, wp-includes etc would be unacceptable.

The team created a package 2 years ago, specifically to allow locally hosting webfonts. You can read more about that package and how to use it in your themes in the post “New package to allow locally hosting webfonts“.

Should the theme using external fonts be required to call a privacy function

A theme should not be allowed to use external resources. The guidelines right now allow for remote Google fonts, but that will probably change soon. If the theme is using external assets, then yes, it should call a privacy function and ensure that these assets don’t get loaded without the user’s explicit consent.

If a theme, however, bundles the webfonts – or downloads them so they can be hosted locally, then no, it does not need to call a privacy function. The moment an asset gets downloaded to the server and is used from there instead of the third-party server, it is no longer an “external resource” and therefore requires no additional privacy implementations.

props @kafleg for proofreading this post.

Ben Dwyer 1:21 pm on July 27, 2022  

Gutenberg 13.6 + Themes

Hello! This is the latest 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/ accounting for the 13.6 release of 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.

Caption elements can be styled by themes

Gutenberg’s PR #41140 introduced the ability to style the caption element via `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.` directives, moving along the number and types of supported elements.

Button elements can be styled by users

Having an element available for styling by the theme is not enough. We need to allow users to customize the defaults provided by theme authors. This is where the Global Styles Interface comes in to help. In PR #41659 the button elements gain this ability.

Element pseudo states can be styled by themes

Adding support for pseudo selectors on elements in `theme.json` enables theme authors to define specific styling for various states such as `:hover` or `:active` on the elements which support these states.

The PR adds the possibility to use any available styling directives such as:

"color": {

   "text": "hotpink"

}

in the theme JSON configuration at `styles.elements.{element}.{pseudo_state}` for example, `styles.elements.link.:hover`.

Not all the element and state combinations will be supported by default, as the goal is to provide capabilities for the most used and needed functions, not exhaustive support. Why? Because all of these settings will eventually find their way to the Global Styles Interface and we need to make sure we don’t clutter it with too granular settings or web development jargon.

Theme JSON allows references to attributes

In an attempt to make writing `theme.json` less verbose Gutenberg 13.6 introduces the ability to reuse attribute values when you need them, by referencing in dot notation their location in the tree.

For example buttons could do this:

{

    "color": {

        "text": { ref: "styles.color.background" }

    }

}

and this way reference the global background color to reuse for their text color.

Improvements to “inherit default layout” toggle

The “inherit default layout” toggle has been a source of confusion for a long time. Mainly it was unclear what would be the result of toggling the feature `on`. PR #41893 shipped in Gutenberg 13.6 attempts to improve this by two things:

  • Rewording the label of the toggle so that it makes more sense what the result of the action is: “Blocks use full width”
  • Adds some helper text to further clarify the intended result

Other updates

Add option to disable theme duotone per-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.

Gutenberg 13.6 allows users to disable theme wide duotone filters on a per block basis. When this happens saves ‘unset’ as the `style.color.duotone` attribute instead of an array of colors.

The link color of navigation links is moved to block JSON

When themes want to override the hover color of the navigation block, this is not possible using theme.json, because this CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. selector is too strong. PR #41898 fixes this by moving the styling to the Navigation block’s JSON configuration.

Props

This post was written by @andraganescu.

#gutenberg-themes-roundup