diff --git a/docs/explanations/architecture/key-concepts.md b/docs/explanations/architecture/key-concepts.md index 1ba009f782314..a041b86effdc3 100644 --- a/docs/explanations/architecture/key-concepts.md +++ b/docs/explanations/architecture/key-concepts.md @@ -65,6 +65,6 @@ More on [Site editing templates](/docs/explanations/architecture/full-site-editi ## Styles -Styles, formerly known as Global Styles and as such referenced in the code, is both an interface that users access through the editor and a configuration system done through [a `theme.json` file](/docs/how-to-guides/themes/theme-json.md). This file absorbs most of the configuration aspects usually scattered through various `add_theme_support` calls to simplify communicating with the editor. It thus aims to improve declaring what settings should be enabled, what specific tools a theme offers (like a custom color palette), the available design tools present, and an infrastructure that allows to coordinate the styles coming from WordPress, the active theme, and the user. +Styles, formerly known as Global Styles and as such referenced in the code, is both an interface that users access through the editor and a configuration system done through [a `theme.json` file](/docs/how-to-guides/themes/global-settings-and-styles.md). This file absorbs most of the configuration aspects usually scattered through various `add_theme_support` calls to simplify communicating with the editor. It thus aims to improve declaring what settings should be enabled, what specific tools a theme offers (like a custom color palette), the available design tools present, and an infrastructure that allows to coordinate the styles coming from WordPress, the active theme, and the user. Learn more about [Global Styles](/docs/explanations/architecture/styles.md#global-styles). diff --git a/docs/explanations/architecture/styles.md b/docs/explanations/architecture/styles.md index d62171a062205..94a8e91f94edb 100644 --- a/docs/explanations/architecture/styles.md +++ b/docs/explanations/architecture/styles.md @@ -15,7 +15,7 @@ The final HTML document is the result of a few things: The stylesheets loaded in the front end include: - **Blocks**. The stylesheets that come with the block. In the front end, you can find a single stylesheet with all block styles defined by WordPress (`wp-block-library-*` ) or separate stylesheets per block in use (as in `wp-block-group-*`, `wp-block-columns-*`, etc). See [this note](https://make.wordpress.org/core/2021/07/01/block-styles-loading-enhancements-in-wordpress-5-8/) for the full details. -- **Global styles**. These styles are generated on the fly by using data coming from a theme.json file: see [note](https://make.wordpress.org/core/2021/06/25/introducing-theme-json-in-wordpress-5-8/), [reference](https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/), and [how to guide](https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/). Specifically, it merges the contents of the theme.json from WordPress, the theme.json from the theme (if it has one), and the user data provided via the global styles sidebar in the site editor. The result of processing this data is an embedded stylesheet whose id is `global-styles-inline-css`. +- **Global styles**. These styles are generated on the fly by using data coming from a theme.json file: see [note](https://make.wordpress.org/core/2021/06/25/introducing-theme-json-in-wordpress-5-8/), [reference](https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/), and [how to guide](https://developer.wordpress.org/block-editor/how-to-guides/themes/global-settings-and-styles/). Specifically, it merges the contents of the theme.json from WordPress, the theme.json from the theme (if it has one), and the user data provided via the global styles sidebar in the site editor. The result of processing this data is an embedded stylesheet whose id is `global-styles-inline-css`. - **Theme**. Historically, themes have enqueued their own stylesheets, where the id is based on the theme name, as in `twentytwentytwo-style-css`. In addition to having their own stylesheets they can now declare a theme.json file containing styles that will be part of the stylesheet generated by global styles. - **User**. Some of the user actions in the editor will generate style content. This is the case for features such as duotone, layout, or link color. - **Other**. WordPress and plugins can also enqueue stylesheets. @@ -515,7 +515,7 @@ There are currently four layout types in use: - Flex: Items are displayed using a Flexbox layout. Defaults to a horizontal orientation. Spacing between children is handled via the `gap` CSS property. - Grid: Items are displayed using a Grid layout. Defaults to an `auto-fill` approach to column generation but can also be set to a fixed number of columns. Spacing between children is handled via the `gap` CSS property. -For controlling spacing between blocks, and enabling block spacing controls see: [What is blockGap and how can I use it?](https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/#what-is-blockgap-and-how-can-i-use-it). +For controlling spacing between blocks, and enabling block spacing controls see: [What is blockGap and how can I use it?](https://developer.wordpress.org/block-editor/how-to-guides/themes/global-settings-and-styles/#what-is-blockgap-and-how-can-i-use-it). ### Targeting layout or container blocks from themes diff --git a/docs/getting-started/glossary.md b/docs/getting-started/glossary.md index bff8925e4619e..ca509f6a321db 100644 --- a/docs/getting-started/glossary.md +++ b/docs/getting-started/glossary.md @@ -70,7 +70,7 @@ This refers to a collection of features that ultimately allows users to edit the The CSS styles generated by WordPress and enqueued as an embedded stylesheet in the front end of the site. The stylesheet ID is `global-styles-inline-css`. The contents of this stylesheet come from the default `theme.json` of WordPress, the theme's `theme.json`, and the styles provided by the user via the global styles sidebar in the site editor. -See [theme.json reference docs](/docs/reference-guides/theme-json-reference.md), the [how to guide](/docs/how-to-guides/themes/theme-json.md), and an introduction to [styles in the block editor](/docs/explanations/architecture/styles.md). +See [theme.json reference docs](/docs/reference-guides/theme-json-reference.md), the [how to guide](/docs/how-to-guides/themes/global-settings-and-styles.md), and an introduction to [styles in the block editor](/docs/explanations/architecture/styles.md). Compare to block styles. diff --git a/docs/getting-started/tutorial.md b/docs/getting-started/tutorial.md index b6b3efcf4384a..f95ecc886571c 100644 --- a/docs/getting-started/tutorial.md +++ b/docs/getting-started/tutorial.md @@ -36,9 +36,9 @@ The first step in creating the Copyright Date Block is to scaffold the initial b Review the Get started with create-block documentation for an introduction to using this package. -You can use `create-block` from just about any directory on your computer and then use `wp-env` to create a local WordPress development environment with your new block plugin installed and activated. +You can use `create-block` from just about any directory (folder) on your computer and then use `wp-env` to create a local WordPress development environment with your new block plugin installed and activated. -Therefore, create a new directory (folder) on your computer called "Block Tutorial". Open your terminal and `cd` to this directory. Then run the following command. +Therefore, choose a directory to place the block plugin or optionally create a new folder called "Block Tutorial". Open your terminal and `cd` to this directory. Then run the following command.
If you are not using wp-env, instead, navigate to the plugins/ folder in your local WordPress installation using the terminal and run the following command. @@ -203,7 +203,7 @@ Before you start building the functionality of the block itself, let's do a bit Open the [`index.js`](https://developer.wordpress.org/block-editor/getting-started/fundamentals/file-structure-of-a-block/#index-js) file. This is the main JavaScript file of the block and is used to register it on the client. You can learn more about client-side and server-side registration in the [Registration of a block](https://developer.wordpress.org/block-editor/getting-started/fundamentals/registration-of-a-block/) documentation. -Start by looking at the [`registerBlockType`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/) function. This function accepts the name of the block, which we are getting from the imported `block.js` file, and the block configuration object. +Start by looking at the [`registerBlockType`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/) function. This function accepts the name of the block, which we are getting from the imported `block.json` file, and the block configuration object. ```js import Edit from './edit'; @@ -351,9 +351,10 @@ To enable this starting year functionality, you will need one attribute to store ### Updating block.json -Block attributes are generally specified in the [`block.json`](https://developer.wordpress.org/block-editor/getting-started/fundamentals/block-json/#data-storage-in-the-block-with-attributes) file. So open up the file and add the following section after the `example` in line 9. +Block attributes are generally specified in the [`block.json`](https://developer.wordpress.org/block-editor/getting-started/fundamentals/block-json/#data-storage-in-the-block-with-attributes) file. So open up the file and add the following section after the `example` property. ```json +"example": {}, "attributes": { "showStartingYear": { "type": "boolean" @@ -391,7 +392,7 @@ Next, update the Edit function to return the current block content and an `Inspe ```js export default function Edit() { -const currentYear = new Date().getFullYear().toString(); + const currentYear = new Date().getFullYear().toString(); return ( <> @@ -421,7 +422,7 @@ Then wrap the "Testing" message in the `PanelBody` component and set the `title` ```js export default function Edit() { -const currentYear = new Date().getFullYear().toString(); + const currentYear = new Date().getFullYear().toString(); return ( <> @@ -964,9 +965,9 @@ You will not get any block validation errors, but the Editor will detect that ch #### Optimizing render.php -The final step is to optimize the `render.php` file. If the `currentYear` and the `fallbackCurrentYear` attribute are the same, then there is no need to dynamically create the block content. It is already saved in the database and is available in the `render.php` file via the `$block_content` variable. +The final step is to optimize the `render.php` file. If the `currentYear` and the `fallbackCurrentYear` attribute are the same, then there is no need to dynamically create the block content. It is already saved in the database and is available in the `render.php` file via the `$content` variable. -Therefore, update the file to render the `$block_content` if `currentYear` and `fallbackCurrentYear` match. +Therefore, update the file to render the generated content if `currentYear` and `fallbackCurrentYear` do not match. ```php $current_year = date( "Y" ); diff --git a/docs/how-to-guides/curating-the-editor-experience/theme-json.md b/docs/how-to-guides/curating-the-editor-experience/theme-json.md index c8f51ea3e9110..d373e0e81e345 100644 --- a/docs/how-to-guides/curating-the-editor-experience/theme-json.md +++ b/docs/how-to-guides/curating-the-editor-experience/theme-json.md @@ -159,7 +159,7 @@ Continuing the examples with duotone, this means you could allow full access to } ``` -You can read more about how best to [turn on/off options with theme.json here](/docs/how-to-guides/themes/theme-json.md). +You can read more about how best to [turn on/off options with theme.json here](/docs/how-to-guides/themes/global-settings-and-styles.md). ### Disable inherit default layout diff --git a/docs/how-to-guides/themes/README.md b/docs/how-to-guides/themes/README.md index 708ecba03d264..1510b20c30047 100644 --- a/docs/how-to-guides/themes/README.md +++ b/docs/how-to-guides/themes/README.md @@ -6,7 +6,7 @@ The block editor provides a number of options for theme designers and developers ### Classic theme -In terms of block editor terminology this is any theme that defines its templates in the traditional `.php` file format, and that doesn't have an `index.html` format template in the `/block-templates` or `/templates` folders. A `Classic` theme has the ability to provide configuration and styling options to the block editor, and block content, via [Theme Supports](/docs/how-to-guides/themes/theme-support.md), or by including a [theme.json](/docs/how-to-guides/themes/theme-json.md) file. A theme does not have to be a `Block` theme in order to take advantage of some of the flexibility provided by the use of a `theme.json` file. +In terms of block editor terminology this is any theme that defines its templates in the traditional `.php` file format, and that doesn't have an `index.html` format template in the `/block-templates` or `/templates` folders. A `Classic` theme has the ability to provide configuration and styling options to the block editor, and block content, via [Theme Supports](/docs/how-to-guides/themes/theme-support.md), or by including a [theme.json](/docs/how-to-guides/themes/global-settings-and-styles.md) file. A theme does not have to be a `Block` theme in order to take advantage of some of the flexibility provided by the use of a `theme.json` file. ### Block theme @@ -18,5 +18,5 @@ There isn't an FSE specific theme type. In WordPress > 5.9 FSE is enabled for an **Contents** -- [Global Settings (theme.json)](/docs/how-to-guides/themes/theme-json.md) +- [Global Settings (theme.json)](/docs/how-to-guides/themes/global-settings-and-styles.md) - [Theme Support](/docs/how-to-guides/themes/theme-support.md) diff --git a/docs/how-to-guides/themes/theme-json.md b/docs/how-to-guides/themes/global-settings-and-styles.md similarity index 98% rename from docs/how-to-guides/themes/theme-json.md rename to docs/how-to-guides/themes/global-settings-and-styles.md index 1f7480649f6ab..130b6271d13bd 100644 --- a/docs/how-to-guides/themes/theme-json.md +++ b/docs/how-to-guides/themes/global-settings-and-styles.md @@ -2,32 +2,6 @@ WordPress 5.8 comes with [a new mechanism](https://make.wordpress.org/core/2021/06/25/introducing-theme-json-in-wordpress-5-8/) to configure the editor that enables a finer-grained control and introduces the first step in managing styles for future WordPress releases: the `theme.json` file. Then `theme.json` [evolved to a v2](https://make.wordpress.org/core/2022/01/08/updates-for-settings-styles-and-theme-json/) with WordPress 5.9 release. This page documents its format. -- Rationale - - Settings for the block editor - - Settings can be controlled per block - - Styles are managed - - CSS Custom Properties: presets & custom -- Specification - - version - - settings - - Backward compatibility with add_theme_support - - Presets - - Custom - - Setting examples - - styles - - Top-level - - Block-level - - Elements - - Variations - - customTemplates - - templateParts - - patterns -- FAQ - - The naming schema of CSS Custom Properties - - Why using -- as a separator? - - How settings under "custom" create new CSS Custom Properties - - Why does it take so long to update the styles in the browser? - ## Rationale The Block Editor API has evolved at different velocities and there are some growing pains, specially in areas that affect themes. Examples of this are: the ability to [control the editor programmatically](https://make.wordpress.org/core/2020/01/23/controlling-the-block-editor/), or [a block style system](https://github.com/WordPress/gutenberg/issues/9534) that facilitates user, theme, and core style preferences. diff --git a/docs/how-to-guides/themes/theme-support.md b/docs/how-to-guides/themes/theme-support.md index b978ede928b83..88e69938737b7 100644 --- a/docs/how-to-guides/themes/theme-support.md +++ b/docs/how-to-guides/themes/theme-support.md @@ -315,7 +315,7 @@ Themes can opt out of generated block layout styles that provide default structu add_theme_support( 'disable-layout-styles' ); ``` -For themes looking to customize `blockGap` styles or block spacing, see [the developer docs on Global Settings & Styles](/docs/how-to-guides/themes/theme-json/#what-is-blockgap-and-how-can-i-use-it). +For themes looking to customize `blockGap` styles or block spacing, see [the developer docs on Global Settings & Styles](/docs/how-to-guides/themes/global-settings-and-styles.md#what-is-blockgap-and-how-can-i-use-it). ### Supporting custom line heights @@ -434,7 +434,7 @@ add_theme_support( 'custom-spacing' ); ## Link color control -Link support has been made stable as part of WordPress 5.8. It's `false` by default and themes can enable it via the [theme.json file](./theme-json.md): +Link support has been made stable as part of WordPress 5.8. It's `false` by default and themes can enable it via the [theme.json file](/docs/how-to-guides/curating-the-editor-experience/theme-json.md): ```json { diff --git a/docs/manifest.json b/docs/manifest.json index db3ac4ff5ca57..5629675c0b57e 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -301,8 +301,8 @@ }, { "title": "Global Settings & Styles (theme.json)", - "slug": "theme-json", - "markdown_source": "../docs/how-to-guides/themes/theme-json.md", + "slug": "global-settings-and-styles", + "markdown_source": "../docs/how-to-guides/themes/global-settings-and-styles.md", "parent": "themes" }, { diff --git a/docs/reference-guides/block-api/block-supports.md b/docs/reference-guides/block-api/block-supports.md index 7fd0e68c9bd8c..4a59c34813448 100644 --- a/docs/reference-guides/block-api/block-supports.md +++ b/docs/reference-guides/block-api/block-supports.md @@ -437,7 +437,7 @@ _**Note:** Since WordPress 6.2._ - Subproperties: - `minHeight`: type `boolean`, default value `false` -This value signals that a block supports some of the CSS style properties related to dimensions. When it does, the block editor will show UI controls for the user to set their values if [the theme declares support](/docs/how-to-guides/themes/theme-json/#opt-in-into-ui-controls). +This value signals that a block supports some of the CSS style properties related to dimensions. When it does, the block editor will show UI controls for the user to set their values if [the theme declares support](/docs/how-to-guides/themes/global-settings-and-styles.md#opt-in-into-ui-controls). ```js supports: { @@ -491,7 +491,7 @@ selectors: { The filter can be applied to an element inside the block by setting the `selectors.filter.duotone` selector. -Duotone presets are sourced from `color.duotone` in [theme.json](/docs/how-to-guides/themes/theme-json.md). +Duotone presets are sourced from `color.duotone` in [theme.json](/docs/how-to-guides/themes/global-settings-and-styles.md). When the block declares support for `filter.duotone`, the attributes definition is extended to include the attribute `style`: @@ -675,7 +675,7 @@ _**Note:** Since WordPress 6.2._ - Subproperties: - `sticky`: type `boolean`, default value `false` -This value signals that a block supports some of the CSS style properties related to position. When it does, the block editor will show UI controls for the user to set their values if [the theme declares support](/docs/how-to-guides/themes/theme-json/#opt-in-into-ui-controls). +This value signals that a block supports some of the CSS style properties related to position. When it does, the block editor will show UI controls for the user to set their values if [the theme declares support](/docs/how-to-guides/themes/global-settings-and-styles.md#opt-in-into-ui-controls). Note that sticky position controls are currently only available for blocks set at the root level of the document. Setting a block to the `sticky` position will stick the block to its most immediate parent when the user scrolls the page. diff --git a/docs/reference-guides/theme-json-reference/README.md b/docs/reference-guides/theme-json-reference/README.md index 92f6f77e298c0..11605b21625ad 100644 --- a/docs/reference-guides/theme-json-reference/README.md +++ b/docs/reference-guides/theme-json-reference/README.md @@ -1,6 +1,6 @@ # Theme.json Reference -This reference guide lists the settings and style properties defined in the theme.json schema. See the [theme.json how to guide](/docs/how-to-guides/themes/theme-json.md) for examples and guide on how to use the theme.json file in your theme. +This reference guide lists the settings and style properties defined in the theme.json schema. See the [theme.json how to guide](/docs/how-to-guides/themes/global-settings-and-styles.md) for examples and guide on how to use the theme.json file in your theme. - [Version 2 (living reference)](/docs/reference-guides/theme-json-reference/theme-json-living.md) diff --git a/docs/reference-guides/theme-json-reference/theme-json-living.md b/docs/reference-guides/theme-json-reference/theme-json-living.md index 627fee6071816..4baa5a6009ded 100644 --- a/docs/reference-guides/theme-json-reference/theme-json-living.md +++ b/docs/reference-guides/theme-json-reference/theme-json-living.md @@ -6,7 +6,7 @@ > - the [theme.json v1](/docs/reference-guides/theme-json-reference/theme-json-v1.md) specification, and > - the [reference to migrate from theme.json v1 to v2](/docs/reference-guides/theme-json-reference/theme-json-migrations.md). -This reference guide lists the settings and style properties defined in the `theme.json` schema. See the [theme.json how to guide](/docs/how-to-guides/themes/theme-json.md) for examples and guidance on how to use the `theme.json` file in your theme. +This reference guide lists the settings and style properties defined in the `theme.json` schema. See the [theme.json how to guide](/docs/how-to-guides/themes/global-settings-and-styles.md) for examples and guidance on how to use the `theme.json` file in your theme. ## Schema diff --git a/docs/toc.json b/docs/toc.json index 2a0eb6470bd08..49110f8bed957 100644 --- a/docs/toc.json +++ b/docs/toc.json @@ -130,7 +130,9 @@ { "docs/how-to-guides/propagating-updates.md": [] }, { "docs/how-to-guides/themes/README.md": [ - { "docs/how-to-guides/themes/theme-json.md": [] }, + { + "docs/how-to-guides/themes/global-settings-and-styles.md": [] + }, { "docs/how-to-guides/themes/theme-support.md": [] } ] }, diff --git a/lib/experimental/fonts/font-library/class-wp-font-family-utils.php b/lib/experimental/fonts/font-library/class-wp-font-family-utils.php index 7d954e79e96a3..35e6856e50aad 100644 --- a/lib/experimental/fonts/font-library/class-wp-font-family-utils.php +++ b/lib/experimental/fonts/font-library/class-wp-font-family-utils.php @@ -76,21 +76,6 @@ public static function merge_fonts_data( $font1, $font2 ) { return $merged_font; } - /** - * Returns whether the given file has a font MIME type. - * - * @since 6.5.0 - * - * @param string $filepath The file to check. - * @return bool True if the file has a font MIME type, false otherwise. - */ - public static function has_font_mime_type( $filepath ) { - $allowed_mime_types = WP_Font_Library::get_expected_font_mime_types_per_php_version(); - $filetype = wp_check_filetype( $filepath, $allowed_mime_types ); - - return in_array( $filetype['type'], $allowed_mime_types, true ); - } - /** * Format font family to make it valid CSS. * diff --git a/lib/experimental/fonts/font-library/class-wp-font-family.php b/lib/experimental/fonts/font-library/class-wp-font-family.php index 58d4f476e834d..a4204dfe1fa2c 100644 --- a/lib/experimental/fonts/font-library/class-wp-font-family.php +++ b/lib/experimental/fonts/font-library/class-wp-font-family.php @@ -202,11 +202,6 @@ private function get_upload_overrides( $filename ) { * False if the download failed. */ private function download_asset( $url, $filename ) { - // Checks if the file to be downloaded has a font mime type. - if ( ! WP_Font_Family_Utils::has_font_mime_type( $filename ) ) { - return false; - } - // Include file with download_url() if function doesn't exist. if ( ! function_exists( 'download_url' ) ) { require_once ABSPATH . 'wp-admin/includes/file.php'; @@ -263,12 +258,6 @@ private function move_font_face_asset( $font_face, $file ) { // because it is no longer needed. unset( $new_font_face['uploadedFile'] ); - // If the filename has no font mime type, don't move the file and - // return the font face definition without src to be ignored later. - if ( ! WP_Font_Family_Utils::has_font_mime_type( $filename ) ) { - return $new_font_face; - } - // Move the uploaded font asset from the temp folder to the fonts directory. if ( ! function_exists( 'wp_handle_upload' ) ) { require_once ABSPATH . 'wp-admin/includes/file.php'; diff --git a/packages/block-editor/src/components/height-control/README.md b/packages/block-editor/src/components/height-control/README.md index 8853f9ef89321..67b52f1d56f9b 100644 --- a/packages/block-editor/src/components/height-control/README.md +++ b/packages/block-editor/src/components/height-control/README.md @@ -2,7 +2,7 @@ The `HeightControl` component adds a linked unit control and slider component for controlling the height of a block within the block editor. It supports passing a label, and is used for controlling the minimum height dimensions of Group blocks. -_Note:_ It is worth noting that the minimum height option is an opt-in feature. Themes need to declare support for it before it'll be available, and a convenient way to do that is via opting in to the [appearanceTools](/docs/how-to-guides/themes/theme-json/#opt-in-into-ui-controls) UI controls. +_Note:_ It is worth noting that the minimum height option is an opt-in feature. Themes need to declare support for it before it'll be available, and a convenient way to do that is via opting in to the [appearanceTools](/docs/how-to-guides/themes/global-settings-and-styles.md#opt-in-into-ui-controls) UI controls. ## Development guidelines diff --git a/packages/block-editor/src/components/rich-text/use-mark-persistent.js b/packages/block-editor/src/components/rich-text/use-mark-persistent.js index 9a564dfb7f97e..10e157452fbe2 100644 --- a/packages/block-editor/src/components/rich-text/use-mark-persistent.js +++ b/packages/block-editor/src/components/rich-text/use-mark-persistent.js @@ -11,8 +11,7 @@ import { store as blockEditorStore } from '../../store'; export function useMarkPersistent( { html, value } ) { const previousText = useRef(); - const hasActiveFormats = - value.activeFormats && !! value.activeFormats.length; + const hasActiveFormats = !! value.activeFormats?.length; const { __unstableMarkLastChangeAsPersistent } = useDispatch( blockEditorStore ); diff --git a/packages/dataviews/src/dataviews.js b/packages/dataviews/src/dataviews.js index 216e482a8f447..91ea942ee6d22 100644 --- a/packages/dataviews/src/dataviews.js +++ b/packages/dataviews/src/dataviews.js @@ -5,7 +5,7 @@ import { __experimentalVStack as VStack, __experimentalHStack as HStack, } from '@wordpress/components'; -import { useMemo, useState } from '@wordpress/element'; +import { useMemo, useState, useCallback } from '@wordpress/element'; /** * Internal dependencies @@ -35,10 +35,13 @@ export default function DataViews( { } ) { const [ selection, setSelection ] = useState( [] ); - const onSetSelection = ( items ) => { - setSelection( items.map( ( item ) => item.id ) ); - onSelectionChange( items ); - }; + const onSetSelection = useCallback( + ( items ) => { + setSelection( items.map( ( item ) => item.id ) ); + onSelectionChange( items ); + }, + [ setSelection, onSelectionChange ] + ); const ViewComponent = VIEW_LAYOUTS.find( ( v ) => v.type === view.type @@ -65,13 +68,13 @@ export default function DataViews( { /> ) } { ); }; -export default function Filters( { fields, view, onChangeView } ) { +const Filters = memo( function Filters( { fields, view, onChangeView } ) { const filters = []; fields.forEach( ( field ) => { if ( ! field.type ) { @@ -88,4 +93,6 @@ export default function Filters( { fields, view, onChangeView } ) { } return filterComponents; -} +} ); + +export default Filters; diff --git a/packages/dataviews/src/pagination.js b/packages/dataviews/src/pagination.js index 2c8734cdf56b8..21aeda8a602a1 100644 --- a/packages/dataviews/src/pagination.js +++ b/packages/dataviews/src/pagination.js @@ -6,11 +6,11 @@ import { __experimentalHStack as HStack, SelectControl, } from '@wordpress/components'; -import { createInterpolateElement } from '@wordpress/element'; +import { createInterpolateElement, memo } from '@wordpress/element'; import { sprintf, __, _x } from '@wordpress/i18n'; import { chevronRight, chevronLeft } from '@wordpress/icons'; -function Pagination( { +const Pagination = memo( function Pagination( { view, onChangeView, paginationInfo: { totalItems = 0, totalPages }, @@ -91,6 +91,6 @@ function Pagination( { ) ); -} +} ); export default Pagination; diff --git a/packages/dataviews/src/search.js b/packages/dataviews/src/search.js index 10a578b49aab2..03bcf0511892b 100644 --- a/packages/dataviews/src/search.js +++ b/packages/dataviews/src/search.js @@ -2,11 +2,11 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { useEffect, useRef } from '@wordpress/element'; +import { useEffect, useRef, memo } from '@wordpress/element'; import { SearchControl } from '@wordpress/components'; import { useDebouncedInput } from '@wordpress/compose'; -export default function Search( { label, view, onChangeView } ) { +const Search = memo( function Search( { label, view, onChangeView } ) { const [ search, setSearch, debouncedSearch ] = useDebouncedInput( view.search ); @@ -35,4 +35,6 @@ export default function Search( { label, view, onChangeView } ) { size="compact" /> ); -} +} ); + +export default Search; diff --git a/packages/dataviews/src/view-actions.js b/packages/dataviews/src/view-actions.js index 9130f72694b28..0e1aeab6d7052 100644 --- a/packages/dataviews/src/view-actions.js +++ b/packages/dataviews/src/view-actions.js @@ -6,6 +6,7 @@ import { privateApis as componentsPrivateApis, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; +import { memo } from '@wordpress/element'; /** * Internal dependencies @@ -239,7 +240,7 @@ function SortMenu( { fields, view, onChangeView } ) { ); } -export default function ViewActions( { +const ViewActions = memo( function ViewActions( { fields, view, onChangeView, @@ -282,4 +283,6 @@ export default function ViewActions( { ); -} +} ); + +export default ViewActions; diff --git a/packages/e2e-tests/specs/editor/various/allowed-patterns.test.js b/packages/e2e-tests/specs/editor/various/allowed-patterns.test.js deleted file mode 100644 index 449306f06d18d..0000000000000 --- a/packages/e2e-tests/specs/editor/various/allowed-patterns.test.js +++ /dev/null @@ -1,74 +0,0 @@ -/** - * WordPress dependencies - */ -import { - activatePlugin, - createNewPost, - deactivatePlugin, - searchForPattern, - toggleGlobalBlockInserter, -} from '@wordpress/e2e-test-utils'; - -const checkPatternExistence = async ( name, available = true ) => { - await searchForPattern( name ); - const patternElement = await page.waitForXPath( - `//div[@role = 'option']//div[contains(text(), '${ name }')]`, - { timeout: 5000, visible: available, hidden: ! available } - ); - const patternExists = !! patternElement; - await toggleGlobalBlockInserter(); - return patternExists; -}; - -const TEST_PATTERNS = [ - [ 'Test: Single heading', true ], - [ 'Test: Single paragraph', false ], - [ 'Test: Paragraph inside group', false ], -]; - -describe( 'Allowed Patterns', () => { - beforeAll( async () => { - await activatePlugin( 'gutenberg-test-allowed-patterns' ); - await createNewPost(); - } ); - afterAll( async () => { - await deactivatePlugin( 'gutenberg-test-allowed-patterns' ); - } ); - - describe( 'Disable blocks plugin disabled', () => { - for ( const [ patternName ] of TEST_PATTERNS ) { - it( `should show test pattern "${ patternName }"`, async () => { - expect( await checkPatternExistence( patternName, true ) ).toBe( - true - ); - } ); - } - } ); - - describe( 'Disable blocks plugin enabled', () => { - beforeAll( async () => { - await activatePlugin( - 'gutenberg-test-allowed-patterns-disable-blocks' - ); - await createNewPost(); - } ); - afterAll( async () => { - await deactivatePlugin( - 'gutenberg-test-allowed-patterns-disable-blocks' - ); - } ); - - for ( const [ patternName, shouldBeAvailable ] of TEST_PATTERNS ) { - it( `should${ - shouldBeAvailable ? '' : ' not' - } show test "pattern ${ patternName }"`, async () => { - expect( - await checkPatternExistence( - patternName, - shouldBeAvailable - ) - ).toBe( shouldBeAvailable ); - } ); - } - } ); -} ); diff --git a/packages/e2e-tests/specs/editor/various/preferences.test.js b/packages/e2e-tests/specs/editor/various/preferences.test.js deleted file mode 100644 index 54990a4004422..0000000000000 --- a/packages/e2e-tests/specs/editor/various/preferences.test.js +++ /dev/null @@ -1,62 +0,0 @@ -/** - * WordPress dependencies - */ -import { createNewPost } from '@wordpress/e2e-test-utils'; - -describe( 'preferences', () => { - beforeAll( async () => { - await createNewPost(); - } ); - - /** - * Returns a promise which resolves to the text content of the active - * editor sidebar tab, or null if there is no active sidebar tab (closed). - * - * @return {Promise} Promise resolving to active tab. - */ - async function getActiveSidebarTabText() { - try { - return await page.$eval( - 'div[aria-label="Editor settings"] [role="tab"][aria-selected="true"]', - ( node ) => node.textContent - ); - } catch ( error ) { - // page.$eval throws when it does not find the selector, which we - // can intentionally intercept and consider as there being no - // active sidebar tab (no sidebar). - return null; - } - } - - it( 'remembers sidebar dismissal between sessions', async () => { - const blockTab = await page.waitForXPath( - `//button[@role="tab"][contains(text(), 'Block')]` - ); - - // Open by default. - expect( await getActiveSidebarTabText() ).toBe( 'Post' ); - - // Change to "Block" tab. - await blockTab.click(); - expect( await getActiveSidebarTabText() ).toBe( 'Block' ); - - // Regression test: Reload resets to document tab. - // - // See: https://github.com/WordPress/gutenberg/issues/6377 - // See: https://github.com/WordPress/gutenberg/pull/8995 - await page.reload(); - await page.waitForSelector( '.edit-post-layout' ); - expect( await getActiveSidebarTabText() ).toBe( 'Post' ); - - // Dismiss. - await page.click( - 'div[aria-label="Editor settings"] div[role="tablist"] + button[aria-label="Close Settings"]' - ); - expect( await getActiveSidebarTabText() ).toBe( null ); - - // Remember after reload. - await page.reload(); - await page.waitForSelector( '.edit-post-layout' ); - expect( await getActiveSidebarTabText() ).toBe( null ); - } ); -} ); diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/confirm-delete-dialog.js b/packages/edit-site/src/components/global-styles/font-library-modal/confirm-delete-dialog.js index 259b6900dd16d..b87a921bd35e5 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/confirm-delete-dialog.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/confirm-delete-dialog.js @@ -13,8 +13,8 @@ function ConfirmDeleteDialog( { return ( @@ -22,7 +22,7 @@ function ConfirmDeleteDialog( { sprintf( /* translators: %s: Name of the font. */ __( - 'Would you like to remove %s and all its variants and assets?' + 'Are you sure you want to delete "%s" font and all its variants and assets?' ), font.name ) } diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js index 33884d1c5659d..164b4daf8603c 100644 --- a/packages/edit-site/src/components/page-pages/index.js +++ b/packages/edit-site/src/components/page-pages/index.js @@ -216,7 +216,7 @@ export default function PagePages() { { header: __( 'Title' ), id: 'title', - getValue: ( { item } ) => item.title?.rendered || item.slug, + getValue: ( { item } ) => item.title?.rendered, render: ( { item } ) => { return ( @@ -235,13 +235,12 @@ export default function PagePages() { } } > { decodeEntities( - item.title?.rendered || item.slug + item.title?.rendered ) || __( '(no title)' ) } ) : ( - decodeEntities( - item.title?.rendered || item.slug - ) || __( '(no title)' ) + decodeEntities( item.title?.rendered ) || + __( '(no title)' ) ) } @@ -287,7 +286,7 @@ export default function PagePages() { }, }, ], - [ authors, view ] + [ authors, view.type ] ); const permanentlyDeletePostAction = usePermanentlyDeletePostAction(); diff --git a/packages/edit-site/src/components/page-templates/index.js b/packages/edit-site/src/components/page-templates/index.js index 9c52aaa7f12f6..d8631fd5734ed 100644 --- a/packages/edit-site/src/components/page-templates/index.js +++ b/packages/edit-site/src/components/page-templates/index.js @@ -88,12 +88,11 @@ function normalizeSearchInput( input = '' ) { return removeAccents( input.trim().toLowerCase() ); } -function TemplateTitle( { item, view } ) { - if ( view.type === LAYOUT_LIST ) { +function TemplateTitle( { item, viewType } ) { + if ( viewType === LAYOUT_LIST ) { return ( <> - { decodeEntities( item.title?.rendered || item.slug ) || - __( '(no title)' ) } + { decodeEntities( item.title?.rendered ) || __( '(no title)' ) } ); } @@ -108,7 +107,7 @@ function TemplateTitle( { item, view } ) { canvas: 'edit', } } > - { decodeEntities( item.title?.rendered || item.slug ) || + { decodeEntities( item.title?.rendered ) || __( '(no title)' ) } @@ -116,9 +115,9 @@ function TemplateTitle( { item, view } ) { ); } -function AuthorField( { item, view } ) { +function AuthorField( { item, viewType } ) { const { text, icon, imageUrl } = useAddedBy( item.type, item.id ); - const withIcon = view.type !== LAYOUT_LIST; + const withIcon = viewType !== LAYOUT_LIST; return ( @@ -210,9 +209,9 @@ export default function DataviewsTemplates() { { header: __( 'Template' ), id: 'title', - getValue: ( { item } ) => item.title?.rendered || item.slug, + getValue: ( { item } ) => item.title?.rendered, render: ( { item } ) => ( - + ), maxWidth: 400, enableHiding: false, @@ -243,14 +242,14 @@ export default function DataviewsTemplates() { id: 'author', getValue: ( { item } ) => item.author_text, render: ( { item } ) => { - return ; + return ; }, enableHiding: false, type: ENUMERATION_TYPE, elements: authors, }, ], - [ authors, view ] + [ authors, view.type ] ); const { shownTemplates, paginationInfo } = useMemo( () => { diff --git a/packages/editor/src/components/post-featured-image/index.js b/packages/editor/src/components/post-featured-image/index.js index 96eb164696228..8be344bcdad20 100644 --- a/packages/editor/src/components/post-featured-image/index.js +++ b/packages/editor/src/components/post-featured-image/index.js @@ -208,8 +208,6 @@ function PostFeaturedImage( { diff --git a/packages/editor/src/components/post-template/block-theme.js b/packages/editor/src/components/post-template/block-theme.js index a8b07cdacb554..dcd269af1a431 100644 --- a/packages/editor/src/components/post-template/block-theme.js +++ b/packages/editor/src/components/post-template/block-theme.js @@ -90,7 +90,8 @@ export default function BlockThemeControl( { id } ) { { setRenderingMode( isTemplateHidden diff --git a/packages/style-engine/docs/using-the-style-engine-with-block-supports.md b/packages/style-engine/docs/using-the-style-engine-with-block-supports.md index 42350a17ffcd6..27d80df189cf3 100644 --- a/packages/style-engine/docs/using-the-style-engine-with-block-supports.md +++ b/packages/style-engine/docs/using-the-style-engine-with-block-supports.md @@ -231,4 +231,4 @@ array( */ ``` -Read more about [global styles](https://developer.wordpress.org/block-editor/explanations/architecture/styles/#global-styles) and [preset CSS custom properties](https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/#css-custom-properties-presets-custom) and [theme supports](https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-support/). +Read more about [global styles](https://developer.wordpress.org/block-editor/explanations/architecture/styles/#global-styles) and [preset CSS custom properties](https://developer.wordpress.org/block-editor/how-to-guides/themes/global-settings-and-styles.md#css-custom-properties-presets-custom) and [theme supports](https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-support/). diff --git a/phpunit/tests/fonts/font-library/wpFontFamilyUtils/hasFontMimeType.php b/phpunit/tests/fonts/font-library/wpFontFamilyUtils/hasFontMimeType.php deleted file mode 100644 index e30c199612b8a..0000000000000 --- a/phpunit/tests/fonts/font-library/wpFontFamilyUtils/hasFontMimeType.php +++ /dev/null @@ -1,61 +0,0 @@ -assertTrue( WP_Font_Family_Utils::has_font_mime_type( $font_file ) ); - } - - /** - * Data provider. - * - * @return array[] - */ - public function data_should_succeed_when_has_mime_type() { - return array( - 'ttf' => array( '/temp/piazzolla_400_italic.ttf' ), - 'otf' => array( '/temp/piazzolla_400_italic.otf' ), - 'woff' => array( '/temp/piazzolla_400_italic.woff' ), - 'woff2' => array( '/temp/piazzolla_400_italic.woff2' ), - ); - } - - /** - * @dataProvider data_should_fail_when_mime_not_supported - * - * @param string $font_file Font file path. - */ - public function test_should_fail_when_mime_not_supported( $font_file ) { - $this->assertFalse( WP_Font_Family_Utils::has_font_mime_type( $font_file ) ); - } - - /** - * Data provider. - * - * @return array[] - */ - public function data_should_fail_when_mime_not_supported() { - return array( - 'exe' => array( '/temp/test.exe' ), - 'md' => array( '/temp/license.md' ), - 'php' => array( '/temp/test.php' ), - 'txt' => array( '/temp/test.txt' ), - 'zip' => array( '/temp/lato.zip' ), - ); - } -} diff --git a/test/e2e/specs/editor/various/allowed-patterns.spec.js b/test/e2e/specs/editor/various/allowed-patterns.spec.js new file mode 100644 index 0000000000000..78407217442de --- /dev/null +++ b/test/e2e/specs/editor/various/allowed-patterns.spec.js @@ -0,0 +1,79 @@ +/** + * WordPress dependencies + */ +const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); + +test.describe( 'Allowed Patterns', () => { + test.beforeAll( async ( { requestUtils } ) => { + await requestUtils.activatePlugin( 'gutenberg-test-allowed-patterns' ); + } ); + + test.afterAll( async ( { requestUtils } ) => { + await Promise.all( [ + requestUtils.deactivatePlugin( 'gutenberg-test-allowed-patterns' ), + requestUtils.deactivatePlugin( + 'gutenberg-test-allowed-patterns-disable-blocks' + ), + ] ); + } ); + + test( 'should show all patterns when blocks are not disabled', async ( { + admin, + page, + } ) => { + await admin.createNewPost(); + await page + .getByRole( 'toolbar', { name: 'Document tools' } ) + .getByRole( 'button', { name: 'Toggle block inserter' } ) + .click(); + + await page + .getByRole( 'region', { + name: 'Block Library', + } ) + .getByRole( 'searchbox', { + name: 'Search for blocks and patterns', + } ) + .fill( 'Test:' ); + + await expect( + page + .getByRole( 'listbox', { name: 'Block patterns' } ) + .getByRole( 'option' ) + ).toHaveText( [ + 'Test: Single heading', + 'Test: Single paragraph', + 'Test: Paragraph inside group', + ] ); + } ); + + test( 'should show only allowed patterns when blocks are disabled', async ( { + admin, + page, + requestUtils, + } ) => { + await requestUtils.activatePlugin( + 'gutenberg-test-allowed-patterns-disable-blocks' + ); + await admin.createNewPost(); + await page + .getByRole( 'toolbar', { name: 'Document tools' } ) + .getByRole( 'button', { name: 'Toggle block inserter' } ) + .click(); + + await page + .getByRole( 'region', { + name: 'Block Library', + } ) + .getByRole( 'searchbox', { + name: 'Search for blocks and patterns', + } ) + .fill( 'Test:' ); + + await expect( + page + .getByRole( 'listbox', { name: 'Block patterns' } ) + .getByRole( 'option' ) + ).toHaveText( [ 'Test: Single heading' ] ); + } ); +} ); diff --git a/test/e2e/specs/editor/various/preferences.spec.js b/test/e2e/specs/editor/various/preferences.spec.js new file mode 100644 index 0000000000000..89df0ae7ed9f7 --- /dev/null +++ b/test/e2e/specs/editor/various/preferences.spec.js @@ -0,0 +1,50 @@ +/** + * WordPress dependencies + */ +const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); + +test.describe( 'Preferences', () => { + test.beforeEach( async ( { admin } ) => { + await admin.createNewPost(); + } ); + + test( 'remembers sidebar dismissal between sessions', async ( { + editor, + page, + } ) => { + await editor.openDocumentSettingsSidebar(); + + const editorSettings = page.getByRole( 'region', { + name: 'Editor settings', + } ); + const activeTab = editorSettings.getByRole( 'tab', { selected: true } ); + + // Open by default. + await expect( activeTab ).toHaveText( 'Post' ); + + // Change to "Block" tab. + await editorSettings.getByRole( 'tab', { name: 'Block' } ).click(); + await expect( activeTab ).toHaveText( 'Block' ); + + /** + * Regression test: Reload resets to document tab. + * + * See: https://github.com/WordPress/gutenberg/issues/6377 + * See: https://github.com/WordPress/gutenberg/pull/8995 + */ + await page.reload(); + await expect( activeTab ).toHaveText( 'Post' ); + + // Dismiss. + await editorSettings + .getByRole( 'button', { + name: 'Close Settings', + } ) + .click(); + await expect( activeTab ).toBeHidden(); + + // Remember after reload. + await page.reload(); + await expect( activeTab ).toBeHidden(); + } ); +} ); diff --git a/test/e2e/specs/site-editor/pages.spec.js b/test/e2e/specs/site-editor/pages.spec.js index 6de94c3c2d673..a04359730421b 100644 --- a/test/e2e/specs/site-editor/pages.spec.js +++ b/test/e2e/specs/site-editor/pages.spec.js @@ -196,15 +196,15 @@ test.describe( 'Pages', () => { await templateOptionsButton.click(); const templatePreviewButton = page .getByRole( 'menu', { name: 'Template options' } ) - .getByRole( 'menuitem', { name: 'Template preview' } ); + .getByRole( 'menuitemcheckbox', { name: 'Template preview' } ); await expect( templatePreviewButton ).toHaveAttribute( - 'aria-pressed', + 'aria-checked', 'true' ); await templatePreviewButton.click(); await expect( templatePreviewButton ).toHaveAttribute( - 'aria-pressed', + 'aria-checked', 'false' ); @@ -229,7 +229,7 @@ test.describe( 'Pages', () => { await templateOptionsButton.click(); await templatePreviewButton.click(); await expect( templatePreviewButton ).toHaveAttribute( - 'aria-pressed', + 'aria-checked', 'true' );