diff --git a/.eslintrc.js b/.eslintrc.js index dfe779b468352..d0c22090b93e8 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -156,6 +156,7 @@ module.exports = { 'plugin:eslint-comments/recommended', 'plugin:storybook/recommended', ], + plugins: [ 'react-compiler' ], globals: { wp: 'off', globalThis: 'readonly', @@ -222,6 +223,15 @@ module.exports = { definedTags: [ 'jest-environment' ], }, ], + 'react-compiler/react-compiler': [ + 'error', + { + environment: { + enableTreatRefLikeIdentifiersAsRefs: true, + validateRefAccessDuringRender: false, + }, + }, + ], }, overrides: [ { @@ -236,6 +246,7 @@ module.exports = { 'import/no-unresolved': 'off', 'import/named': 'off', '@wordpress/data-no-store-string-literals': 'off', + 'react-compiler/react-compiler': 'off', }, }, { @@ -551,6 +562,7 @@ module.exports = { { files: [ 'packages/interactivity*/src/**' ], rules: { + 'react-compiler/react-compiler': 'off', 'react/react-in-jsx-scope': 'error', }, }, diff --git a/.github/workflows/rnmobile-android-runner.yml b/.github/workflows/rnmobile-android-runner.yml index 43a71809b5bbe..f8ff0441a95b7 100644 --- a/.github/workflows/rnmobile-android-runner.yml +++ b/.github/workflows/rnmobile-android-runner.yml @@ -47,7 +47,7 @@ jobs: run: npm run native test:e2e:setup - name: Gradle cache - uses: gradle/actions/setup-gradle@473878a77f1b98e2b5ac4af93489d1656a80a5ed # v4.2.0 + uses: gradle/actions/setup-gradle@cc4fc85e6b35bafd578d5ffbc76a5518407e1af0 # v4.2.1 # AVD cache disabled as it caused emulator termination to hang indefinitely. # https://github.com/ReactiveCircus/android-emulator-runner/issues/385 diff --git a/backport-changelog/6.8/7129.md b/backport-changelog/6.8/7129.md new file mode 100644 index 0000000000000..90c9168cdc6f8 --- /dev/null +++ b/backport-changelog/6.8/7129.md @@ -0,0 +1,3 @@ +https://github.com/WordPress/wordpress-develop/pull/7129 + +* https://github.com/WordPress/gutenberg/pull/62304 diff --git a/lib/compat/wordpress-6.8/class-gutenberg-rest-post-types-controller-6-8.php b/lib/compat/wordpress-6.8/class-gutenberg-rest-post-types-controller-6-8.php new file mode 100644 index 0000000000000..da0489210e21f --- /dev/null +++ b/lib/compat/wordpress-6.8/class-gutenberg-rest-post-types-controller-6-8.php @@ -0,0 +1,61 @@ +default_rendering_mode, $item ); + + /** + * Filters the block editor rendering mode for a specific post type. + * Applied after the generic `post_type_default_rendering_mode` filter. + * + * The dynamic portion of the hook name, `$item->name`, refers to the post type slug. + * + * @since 6.8.0 + * @param string $default_rendering_mode Default rendering mode for the post type. + * @param WP_Post_Type $post_type Post type object. + * @return string Default rendering mode for the post type. + */ + $rendering_mode = apply_filters( "post_type_{$item->name}_default_rendering_mode", $rendering_mode, $item ); + + // Validate the filtered rendering mode. + if ( ! in_array( $rendering_mode, gutenberg_post_type_rendering_modes(), true ) ) { + $rendering_mode = 'post-only'; + } + + $response->data['default_rendering_mode'] = $rendering_mode; + } + + return rest_ensure_response( $response ); + } +} diff --git a/lib/compat/wordpress-6.8/post.php b/lib/compat/wordpress-6.8/post.php new file mode 100644 index 0000000000000..26e6c3adc07a3 --- /dev/null +++ b/lib/compat/wordpress-6.8/post.php @@ -0,0 +1,57 @@ +register_routes(); + } +} +add_action( 'rest_api_init', 'gutenberg_add_post_type_rendering_mode' ); diff --git a/lib/load.php b/lib/load.php index d7e4a33cd02c9..100160176f391 100644 --- a/lib/load.php +++ b/lib/load.php @@ -49,6 +49,8 @@ function gutenberg_is_experiment_enabled( $name ) { // WordPress 6.8 compat. require __DIR__ . '/compat/wordpress-6.8/block-comments.php'; require __DIR__ . '/compat/wordpress-6.8/class-gutenberg-rest-comment-controller-6-8.php'; + require __DIR__ . '/compat/wordpress-6.8/class-gutenberg-rest-post-types-controller-6-8.php'; + require __DIR__ . '/compat/wordpress-6.8/rest-api.php'; // Plugin specific code. require_once __DIR__ . '/class-wp-rest-global-styles-controller-gutenberg.php'; @@ -120,6 +122,7 @@ function gutenberg_is_experiment_enabled( $name ) { require __DIR__ . '/compat/wordpress-6.8/preload.php'; require __DIR__ . '/compat/wordpress-6.8/blocks.php'; require __DIR__ . '/compat/wordpress-6.8/functions.php'; +require __DIR__ . '/compat/wordpress-6.8/post.php'; // Experimental features. require __DIR__ . '/experimental/block-editor-settings-mobile.php'; diff --git a/package-lock.json b/package-lock.json index 52797a4cbe462..376cd0b9e6edf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -91,6 +91,7 @@ "eslint-plugin-jest": "27.2.3", "eslint-plugin-jest-dom": "5.0.2", "eslint-plugin-prettier": "5.0.0", + "eslint-plugin-react-compiler": "19.0.0-beta-0dec889-20241115", "eslint-plugin-ssr-friendly": "1.0.6", "eslint-plugin-storybook": "0.6.13", "eslint-plugin-testing-library": "6.0.2", @@ -2478,6 +2479,23 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/plugin-proposal-private-methods": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.18.6.tgz", + "integrity": "sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA==", + "deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-methods instead.", + "dev": true, + "dependencies": { + "@babel/helper-create-class-features-plugin": "^7.18.6", + "@babel/helper-plugin-utils": "^7.18.6" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, "node_modules/@babel/plugin-proposal-private-property-in-object": { "version": "7.21.0-placeholder-for-preset-env.2", "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz", @@ -25346,6 +25364,41 @@ "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8" } }, + "node_modules/eslint-plugin-react-compiler": { + "version": "19.0.0-beta-0dec889-20241115", + "resolved": "https://registry.npmjs.org/eslint-plugin-react-compiler/-/eslint-plugin-react-compiler-19.0.0-beta-0dec889-20241115.tgz", + "integrity": "sha512-jTjEHuE8/R6qD/CD2d+5YvWMy1q9/tX3kft4WDyg42/HktjHtHXrEToyZ6THEQf8t/YWMY1RGeCkykePbACtFA==", + "dev": true, + "dependencies": { + "@babel/core": "^7.24.4", + "@babel/parser": "^7.24.4", + "@babel/plugin-proposal-private-methods": "^7.18.6", + "hermes-parser": "^0.20.1", + "zod": "^3.22.4", + "zod-validation-error": "^3.0.3" + }, + "engines": { + "node": "^14.17.0 || ^16.0.0 || >= 18.0.0" + }, + "peerDependencies": { + "eslint": ">=7" + } + }, + "node_modules/eslint-plugin-react-compiler/node_modules/hermes-estree": { + "version": "0.20.1", + "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.20.1.tgz", + "integrity": "sha512-SQpZK4BzR48kuOg0v4pb3EAGNclzIlqMj3Opu/mu7bbAoFw6oig6cEt/RAi0zTFW/iW6Iz9X9ggGuZTAZ/yZHg==", + "dev": true + }, + "node_modules/eslint-plugin-react-compiler/node_modules/hermes-parser": { + "version": "0.20.1", + "resolved": "https://registry.npmjs.org/hermes-parser/-/hermes-parser-0.20.1.tgz", + "integrity": "sha512-BL5P83cwCogI8D7rrDCgsFY0tdYUtmFP9XaXtl2IQjC+2Xo+4okjfXintlTxcIwl4qeGddEl28Z11kbVIw0aNA==", + "dev": true, + "dependencies": { + "hermes-estree": "0.20.1" + } + }, "node_modules/eslint-plugin-react-hooks": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.3.0.tgz", @@ -51821,6 +51874,18 @@ "url": "https://github.com/sponsors/colinhacks" } }, + "node_modules/zod-validation-error": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/zod-validation-error/-/zod-validation-error-3.4.0.tgz", + "integrity": "sha512-ZOPR9SVY6Pb2qqO5XHt+MkkTRxGXb4EVtnjc9JpXUOtUB1T9Ru7mZOT361AN3MsetVe7R0a1KZshJDZdgp9miQ==", + "dev": true, + "engines": { + "node": ">=18.0.0" + }, + "peerDependencies": { + "zod": "^3.18.0" + } + }, "packages/a11y": { "name": "@wordpress/a11y", "version": "4.12.0", diff --git a/package.json b/package.json index f987643e73756..a7470a1333ffa 100644 --- a/package.json +++ b/package.json @@ -100,6 +100,7 @@ "eslint-plugin-jest": "27.2.3", "eslint-plugin-jest-dom": "5.0.2", "eslint-plugin-prettier": "5.0.0", + "eslint-plugin-react-compiler": "19.0.0-beta-0dec889-20241115", "eslint-plugin-ssr-friendly": "1.0.6", "eslint-plugin-storybook": "0.6.13", "eslint-plugin-testing-library": "6.0.2", diff --git a/packages/block-editor/src/components/inserter/category-tabs/index.js b/packages/block-editor/src/components/inserter/category-tabs/index.js index 7b6baaab398f8..ff0a130f1a827 100644 --- a/packages/block-editor/src/components/inserter/category-tabs/index.js +++ b/packages/block-editor/src/components/inserter/category-tabs/index.js @@ -6,7 +6,7 @@ import { privateApis as componentsPrivateApis, __unstableMotion as motion, } from '@wordpress/components'; -import { useState, useEffect } from '@wordpress/element'; +import { useState } from '@wordpress/element'; /** * Internal dependencies @@ -35,14 +35,13 @@ function CategoryTabs( { const selectedTabId = selectedCategory ? selectedCategory.name : null; const [ activeTabId, setActiveId ] = useState(); const firstTabId = categories?.[ 0 ]?.name; - useEffect( () => { - // If there is no active tab, make the first tab the active tab, so that - // when focus is moved to the tablist, the first tab will be focused - // despite not being selected - if ( selectedTabId === null && ! activeTabId && firstTabId ) { - setActiveId( firstTabId ); - } - }, [ selectedTabId, activeTabId, firstTabId, setActiveId ] ); + + // If there is no active tab, make the first tab the active tab, so that + // when focus is moved to the tablist, the first tab will be focused + // despite not being selected + if ( selectedTabId === null && ! activeTabId && firstTabId ) { + setActiveId( firstTabId ); + } return ( - - - - - { allowOrientation && ( + { allowJustification && ( + + + + ) } + { allowOrientation && ( + - ) } - + + ) } @@ -94,14 +97,22 @@ export default { onChange, layoutBlockSupport, } ) { - const { allowVerticalAlignment = true } = layoutBlockSupport; + const { allowVerticalAlignment = true, allowJustification = true } = + layoutBlockSupport; + + if ( ! allowJustification && ! allowVerticalAlignment ) { + return null; + } + return ( - + { allowJustification && ( + + ) } { allowVerticalAlignment && ( { + categories: userPattern.wp_pattern_category?.map( ( catId ) => { const category = __experimentalUserPatternCategories.find( ( { id } ) => id === catId ); diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 2db27b47d847d..34a90b6ca23b3 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -13,6 +13,10 @@ - `SlotFill`: Fix a bug where a stale value of `fillProps` could be used ([#67000](https://github.com/WordPress/gutenberg/pull/67000)). - `ColorPicker`: Add accessible label for copy button ([#67094](https://github.com/WordPress/gutenberg/pull/67094)). +### Enhancements + +- `ColorPicker`: Update sizes of color format select and copy button ([#67093](https://github.com/WordPress/gutenberg/pull/67093)). + ### Experimental - `SlotFill`: Remove registration API methods from return value of `__experimentalUseSlot` ([#67070](https://github.com/WordPress/gutenberg/pull/67070)). diff --git a/packages/components/src/color-picker/color-copy-button.tsx b/packages/components/src/color-picker/color-copy-button.tsx index c301add5212f9..6e49fa7ae85e7 100644 --- a/packages/components/src/color-picker/color-copy-button.tsx +++ b/packages/components/src/color-picker/color-copy-button.tsx @@ -9,7 +9,7 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import { CopyButton } from './styles'; +import { Button } from '../button'; import Tooltip from '../tooltip'; import type { ColorCopyButtonProps } from './types'; @@ -60,8 +60,8 @@ export const ColorCopyButton = ( props: ColorCopyButtonProps ) => { return ( - diff --git a/packages/components/src/color-picker/styles.ts b/packages/components/src/color-picker/styles.ts index a78f10de2e4a3..50ce33da9f233 100644 --- a/packages/components/src/color-picker/styles.ts +++ b/packages/components/src/color-picker/styles.ts @@ -11,7 +11,6 @@ import InnerSelectControl from '../select-control'; import InnerRangeControl from '../range-control'; import { space } from '../utils/space'; import { boxSizingReset } from '../utils'; -import Button from '../button'; import { Flex } from '../flex'; import { HStack } from '../h-stack'; import CONFIG from '../utils/config-values'; @@ -22,7 +21,6 @@ export const NumberControlWrapper = styled( NumberControl )` export const SelectControl = styled( InnerSelectControl )` margin-left: ${ space( -2 ) }; - width: 5em; `; export const RangeControl = styled( InnerRangeControl )` @@ -101,14 +99,3 @@ export const ColorfulWrapper = styled.div` ${ interactiveHueStyles } `; - -export const CopyButton = styled( Button )` - &&&&& { - min-width: ${ space( 6 ) }; - padding: 0; - - > svg { - margin-right: 0; - } - } -`; diff --git a/packages/data/README.md b/packages/data/README.md index 25dd75820fb5d..b6e0e03b1d8b7 100644 --- a/packages/data/README.md +++ b/packages/data/README.md @@ -42,13 +42,6 @@ const actions = { discountPercent, }; }, - - fetchFromAPI( path ) { - return { - type: 'FETCH_FROM_API', - path, - }; - }, }; const store = createReduxStore( 'my-shop', { @@ -84,17 +77,11 @@ const store = createReduxStore( 'my-shop', { }, }, - controls: { - FETCH_FROM_API( action ) { - return apiFetch( { path: action.path } ); - }, - }, - resolvers: { - *getPrice( item ) { + getPrice: ( item ) => async ({ dispatch }) => { { const path = '/wp/v2/prices/' + item; - const price = yield actions.fetchFromAPI( path ); - return actions.setPrice( item, price ); + const price = await apiFetch( { path } ); + dispatch.setPrice( item, price ); }, }, } ); @@ -133,13 +120,21 @@ A **resolver** is a side-effect for a selector. If your selector result may need The `resolvers` option should be passed as an object where each key is the name of the selector to act upon, the value a function which receives the same arguments passed to the selector, excluding the state argument. It can then dispatch as necessary to fulfill the requirements of the selector, taking advantage of the fact that most data consumers will subscribe to subsequent state changes (by `subscribe` or `withSelect`). -#### `controls` +Resolvers, in combination with [thunks](https://github.com/WordPress/gutenberg/blob/trunk/docs/how-to-guides/thunks.md#thunks-can-be-async), can be used to implement asynchronous data flows for your store. -A **control** defines the execution flow behavior associated with a specific action type. This can be particularly useful in implementing asynchronous data flows for your store. By defining your action creator or resolvers as a generator which yields specific controlled action types, the execution will proceed as defined by the control handler. +#### `controls` (deprecated) -The `controls` option should be passed as an object where each key is the name of the action type to act upon, the value a function which receives the original action object. It should returns either a promise which is to resolve when evaluation of the action should continue, or a value. The value or resolved promise value is assigned on the return value of the yield assignment. If the control handler returns undefined, the execution is not continued. +To handle asynchronous data flows, it is recommended to use [thunks](https://github.com/WordPress/gutenberg/blob/trunk/docs/how-to-guides/thunks.md#thunks-can-be-async) instead of `controls`. -Refer to the [documentation of `@wordpress/redux-routine`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/redux-routine/README.md) for more information. +
+ View controls explanation +
+A control defines the execution flow behavior associated with a specific action type. Before thunks, controls were used to implement asynchronous data flows for your store. By defining your action creator or resolvers as a generator which yields specific controlled action types, the execution will proceed as defined by the control handler. +

+The controls option should be passed as an object where each key is the name of the action type to act upon, the value a function which receives the original action object. It should returns either a promise which is to resolve when evaluation of the action should continue, or a value. The value or resolved promise value is assigned on the return value of the yield assignment. If the control handler returns undefined, the execution is not continued. +

+Refer to the documentation of @wordpress/redux-routine for more information. +
#### `initialState` @@ -262,7 +257,7 @@ The data module shares many of the same [core principles](https://redux.js.org/i The [higher-order components](#higher-order-components) were created to complement this distinction. The intention with splitting `withSelect` and `withDispatch` — where in React Redux they are combined under `connect` as `mapStateToProps` and `mapDispatchToProps` arguments — is to more accurately reflect that dispatch is not dependent upon a subscription to state changes, and to allow for state-derived values to be used in `withDispatch` (via [higher-order component composition](https://github.com/WordPress/gutenberg/tree/HEAD/packages/compose/README.md)). -The data module also has built-in solutions for handling asynchronous side-effects, through [resolvers](#resolvers) and [controls](#controls). These differ slightly from [standard redux async solutions](https://redux.js.org/advanced/async-actions) like [`redux-thunk`](https://github.com/gaearon/redux-thunk) or [`redux-saga`](https://redux-saga.js.org/). +The data module also has built-in solutions for handling asynchronous side-effects, through [resolvers](#resolvers) and [thunks](https://github.com/WordPress/gutenberg/blob/trunk/docs/how-to-guides/thunks.md#thunks-can-be-async). These differ slightly from [standard redux async solutions](https://redux.js.org/advanced/async-actions) like [`redux-thunk`](https://github.com/gaearon/redux-thunk) or [`redux-saga`](https://redux-saga.js.org/). Specific implementation differences from Redux and React Redux: diff --git a/packages/dataviews/src/components/dataviews-item-actions/index.tsx b/packages/dataviews/src/components/dataviews-item-actions/index.tsx index c1a1f84b99e62..47e65bc81cb17 100644 --- a/packages/dataviews/src/components/dataviews-item-actions/index.tsx +++ b/packages/dataviews/src/components/dataviews-item-actions/index.tsx @@ -57,6 +57,7 @@ interface ItemActionsProps< Item > { interface CompactItemActionsProps< Item > { item: Item; actions: Action< Item >[]; + isSmall?: boolean; } interface PrimaryActionsProps< Item > { @@ -214,7 +215,13 @@ export default function ItemActions< Item >( { }, [ actions, item ] ); if ( isCompact ) { - return ; + return ( + + ); } if ( hasOnlyOneActionAndIsPrimary( primaryActions, actions ) ) { @@ -250,12 +257,13 @@ export default function ItemActions< Item >( { function CompactItemActions< Item >( { item, actions, + isSmall, }: CompactItemActionsProps< Item > ) { return ( { @@ -63,7 +56,6 @@ export function useSpecificEditorSettings( richEditingEnabled: true, supportsTemplateMode: true, focusMode: canvas !== 'view', - defaultRenderingMode, onNavigateToEntityRecord, onNavigateToPreviousEntityRecord, isPreviewMode: canvas === 'view', @@ -71,7 +63,6 @@ export function useSpecificEditorSettings( }, [ settings, canvas, - defaultRenderingMode, onNavigateToEntityRecord, onNavigateToPreviousEntityRecord, ] ); diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 51d734f25c6ad..1d115dca7518d 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -131,9 +131,7 @@ export default function EditSiteEditor( { isPostsList = false } ) { 'edit-site-editor__loading-progress' ); - const settings = useSpecificEditorSettings( - !! context?.postId && context?.postType !== 'post' - ); + const settings = useSpecificEditorSettings(); const styles = useMemo( () => [ ...settings.styles, diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js index 0cab4c13aa3ee..22ebad383884e 100644 --- a/packages/edit-site/src/components/global-styles/ui.js +++ b/packages/edit-site/src/components/global-styles/ui.js @@ -19,7 +19,7 @@ import { __ } from '@wordpress/i18n'; import { store as preferencesStore } from '@wordpress/preferences'; import { moreVertical } from '@wordpress/icons'; import { store as coreStore } from '@wordpress/core-data'; -import { useEffect, Fragment } from '@wordpress/element'; +import { useEffect } from '@wordpress/element'; import { usePrevious } from '@wordpress/compose'; /** diff --git a/packages/edit-site/src/components/page-patterns/use-patterns.js b/packages/edit-site/src/components/page-patterns/use-patterns.js index f32e278e6354f..e226298857c4d 100644 --- a/packages/edit-site/src/components/page-patterns/use-patterns.js +++ b/packages/edit-site/src/components/page-patterns/use-patterns.js @@ -156,7 +156,7 @@ const selectPatterns = createSelector( categoryId, hasCategory: ( item, currentCategory ) => { if ( item.type === PATTERN_TYPES.user ) { - return item.wp_pattern_category.some( + return item.wp_pattern_category?.some( ( catId ) => userPatternCategories.find( ( cat ) => cat.id === catId @@ -173,7 +173,7 @@ const selectPatterns = createSelector( return ( userPatternCategories?.length && ( ! item.wp_pattern_category?.length || - ! item.wp_pattern_category.some( ( catId ) => + ! item.wp_pattern_category?.some( ( catId ) => userPatternCategories.find( ( cat ) => cat.id === catId ) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/use-pattern-categories.js b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/use-pattern-categories.js index a41e0ea766061..70aaf12dc68c7 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/use-pattern-categories.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/use-pattern-categories.js @@ -69,7 +69,7 @@ export default function usePatternCategories() { // If the pattern has no categories, add it to uncategorized. if ( ! pattern.wp_pattern_category?.length || - ! pattern.wp_pattern_category.some( ( catId ) => + ! pattern.wp_pattern_category?.some( ( catId ) => userPatternCategories.find( ( cat ) => cat.id === catId ) ) ) { diff --git a/packages/edit-site/src/components/site-hub/style.scss b/packages/edit-site/src/components/site-hub/style.scss index b1c1a3a41cc53..39f44d2bef7bb 100644 --- a/packages/edit-site/src/components/site-hub/style.scss +++ b/packages/edit-site/src/components/site-hub/style.scss @@ -4,7 +4,7 @@ justify-content: space-between; gap: $grid-unit-10; margin-right: $grid-unit-15; - height: $grid-unit-70; + height: $header-height; } .edit-site-site-hub__actions { diff --git a/packages/editor/README.md b/packages/editor/README.md index e0b53362089f1..07405d0d51c3d 100644 --- a/packages/editor/README.md +++ b/packages/editor/README.md @@ -279,8 +279,7 @@ Renders a document outline component. _Parameters_ - _props_ `Object`: Props. -- _props.onSelect_ `Function`: Function to be called when an outline item is selected. -- _props.isTitleSupported_ `boolean`: Indicates whether the title is supported. +- _props.onSelect_ `Function`: Function to be called when an outline item is selected - _props.hasOutlineItemsDisabled_ `boolean`: Indicates whether the outline items are disabled. _Returns_ diff --git a/packages/editor/src/components/block-manager/category.js b/packages/editor/src/components/block-manager/category.js index e7125fa151f72..341584fee03b9 100644 --- a/packages/editor/src/components/block-manager/category.js +++ b/packages/editor/src/components/block-manager/category.js @@ -1,73 +1,79 @@ /** * WordPress dependencies */ -import { useMemo, useCallback } from '@wordpress/element'; -import { useDispatch, useSelect } from '@wordpress/data'; +import { useCallback } from '@wordpress/element'; import { useInstanceId } from '@wordpress/compose'; import { CheckboxControl } from '@wordpress/components'; -import { store as preferencesStore } from '@wordpress/preferences'; /** * Internal dependencies */ import BlockTypesChecklist from './checklist'; -import { store as editorStore } from '../../store'; -import { unlock } from '../../lock-unlock'; -function BlockManagerCategory( { title, blockTypes } ) { +function BlockManagerCategory( { + title, + blockTypes, + selectedBlockTypes, + onChange, +} ) { const instanceId = useInstanceId( BlockManagerCategory ); - const { allowedBlockTypes, hiddenBlockTypes } = useSelect( ( select ) => { - const { getEditorSettings } = select( editorStore ); - const { get } = select( preferencesStore ); - return { - allowedBlockTypes: getEditorSettings().allowedBlockTypes, - hiddenBlockTypes: get( 'core', 'hiddenBlockTypes' ), - }; - }, [] ); - const filteredBlockTypes = useMemo( () => { - if ( allowedBlockTypes === true ) { - return blockTypes; - } - return blockTypes.filter( ( { name } ) => { - return allowedBlockTypes?.includes( name ); - } ); - }, [ allowedBlockTypes, blockTypes ] ); - const { showBlockTypes, hideBlockTypes } = unlock( - useDispatch( editorStore ) - ); + const toggleVisible = useCallback( - ( blockName, nextIsChecked ) => { + ( blockType, nextIsChecked ) => { if ( nextIsChecked ) { - showBlockTypes( blockName ); + onChange( [ ...selectedBlockTypes, blockType ] ); } else { - hideBlockTypes( blockName ); + onChange( + selectedBlockTypes.filter( + ( { name } ) => name !== blockType.name + ) + ); } }, - [ showBlockTypes, hideBlockTypes ] + [ selectedBlockTypes, onChange ] ); + const toggleAllVisible = useCallback( ( nextIsChecked ) => { - const blockNames = blockTypes.map( ( { name } ) => name ); if ( nextIsChecked ) { - showBlockTypes( blockNames ); + onChange( [ + ...selectedBlockTypes, + ...blockTypes.filter( + ( blockType ) => + ! selectedBlockTypes.find( + ( { name } ) => name === blockType.name + ) + ), + ] ); } else { - hideBlockTypes( blockNames ); + onChange( + selectedBlockTypes.filter( + ( selectedBlockType ) => + ! blockTypes.find( + ( { name } ) => name === selectedBlockType.name + ) + ) + ); } }, - [ blockTypes, showBlockTypes, hideBlockTypes ] + [ blockTypes, selectedBlockTypes, onChange ] ); - if ( ! filteredBlockTypes.length ) { + if ( ! blockTypes.length ) { return null; } - const checkedBlockNames = filteredBlockTypes + const checkedBlockNames = blockTypes .map( ( { name } ) => name ) - .filter( ( type ) => ! ( hiddenBlockTypes ?? [] ).includes( type ) ); + .filter( ( type ) => + ( selectedBlockTypes ?? [] ).some( + ( selectedBlockType ) => selectedBlockType.name === type + ) + ); const titleId = 'editor-block-manager__category-title-' + instanceId; - const isAllChecked = checkedBlockNames.length === filteredBlockTypes.length; + const isAllChecked = checkedBlockNames.length === blockTypes.length; const isIndeterminate = ! isAllChecked && checkedBlockNames.length > 0; return ( @@ -85,7 +91,7 @@ function BlockManagerCategory( { title, blockTypes } ) { label={ { title } } /> diff --git a/packages/editor/src/components/block-manager/checklist.js b/packages/editor/src/components/block-manager/checklist.js index 01bd06abdeba8..2839e2c9e14c1 100644 --- a/packages/editor/src/components/block-manager/checklist.js +++ b/packages/editor/src/components/block-manager/checklist.js @@ -17,7 +17,7 @@ function BlockTypesChecklist( { blockTypes, value, onItemChange } ) { label={ blockType.title } checked={ value.includes( blockType.name ) } onChange={ ( ...args ) => - onItemChange( blockType.name, ...args ) + onItemChange( blockType, ...args ) } /> diff --git a/packages/editor/src/components/block-manager/index.js b/packages/editor/src/components/block-manager/index.js index 4a1145839976f..5c719c62a5a0b 100644 --- a/packages/editor/src/components/block-manager/index.js +++ b/packages/editor/src/components/block-manager/index.js @@ -2,69 +2,49 @@ * WordPress dependencies */ import { store as blocksStore } from '@wordpress/blocks'; -import { useDispatch, useSelect } from '@wordpress/data'; +import { useSelect } from '@wordpress/data'; import { SearchControl, Button } from '@wordpress/components'; import { __, _n, sprintf } from '@wordpress/i18n'; import { useEffect, useState } from '@wordpress/element'; import { useDebounce } from '@wordpress/compose'; import { speak } from '@wordpress/a11y'; -import { store as preferencesStore } from '@wordpress/preferences'; /** * Internal dependencies */ -import { unlock } from '../../lock-unlock'; -import { store as editorStore } from '../../store'; import BlockManagerCategory from './category'; -export default function BlockManager() { +/** + * Provides a list of blocks with checkboxes. + * + * @param {Object} props Props. + * @param {Array} props.blockTypes An array of blocks. + * @param {Array} props.selectedBlockTypes An array of selected blocks. + * @param {Function} props.onChange Function to be called when the selected blocks change. + */ +export default function BlockManager( { + blockTypes, + selectedBlockTypes, + onChange, +} ) { const debouncedSpeak = useDebounce( speak, 500 ); const [ search, setSearch ] = useState( '' ); - const { showBlockTypes } = unlock( useDispatch( editorStore ) ); - - const { - blockTypes, - categories, - hasBlockSupport, - isMatchingSearchTerm, - numberOfHiddenBlocks, - } = useSelect( ( select ) => { - // Some hidden blocks become unregistered - // by removing for instance the plugin that registered them, yet - // they're still remain as hidden by the user's action. - // We consider "hidden", blocks which were hidden and - // are still registered. - const _blockTypes = select( blocksStore ).getBlockTypes(); - const hiddenBlockTypes = ( - select( preferencesStore ).get( 'core', 'hiddenBlockTypes' ) ?? [] - ).filter( ( hiddenBlock ) => { - return _blockTypes.some( - ( registeredBlock ) => registeredBlock.name === hiddenBlock - ); - } ); - + const { categories, isMatchingSearchTerm } = useSelect( ( select ) => { return { - blockTypes: _blockTypes, categories: select( blocksStore ).getCategories(), - hasBlockSupport: select( blocksStore ).hasBlockSupport, isMatchingSearchTerm: select( blocksStore ).isMatchingSearchTerm, - numberOfHiddenBlocks: - Array.isArray( hiddenBlockTypes ) && hiddenBlockTypes.length, }; }, [] ); - function enableAllBlockTypes( newBlockTypes ) { - const blockNames = newBlockTypes.map( ( { name } ) => name ); - showBlockTypes( blockNames ); + function enableAllBlockTypes() { + onChange( blockTypes ); } - const filteredBlockTypes = blockTypes.filter( - ( blockType ) => - hasBlockSupport( blockType, 'inserter', true ) && - ( ! search || isMatchingSearchTerm( blockType, search ) ) && - ( ! blockType.parent || - blockType.parent.includes( 'core/post-content' ) ) - ); + const filteredBlockTypes = blockTypes.filter( ( blockType ) => { + return ! search || isMatchingSearchTerm( blockType, search ); + } ); + + const numberOfHiddenBlocks = blockTypes.length - selectedBlockTypes.length; // Announce search results on change useEffect( () => { @@ -96,9 +76,7 @@ export default function BlockManager() { @@ -131,6 +109,8 @@ export default function BlockManager() { ( blockType ) => blockType.category === category.slug ) } + selectedBlockTypes={ selectedBlockTypes } + onChange={ onChange } /> ) ) } ! category ) } + selectedBlockTypes={ selectedBlockTypes } + onChange={ onChange } /> diff --git a/packages/editor/src/components/document-outline/check.js b/packages/editor/src/components/document-outline/check.js index 7e396f45c82f1..d0676aa9037ff 100644 --- a/packages/editor/src/components/document-outline/check.js +++ b/packages/editor/src/components/document-outline/check.js @@ -19,7 +19,7 @@ export default function DocumentOutlineCheck( { children } ) { return getGlobalBlockCount( 'core/heading' ) > 0; } ); - if ( hasHeadings ) { + if ( ! hasHeadings ) { return null; } diff --git a/packages/editor/src/components/document-outline/index.js b/packages/editor/src/components/document-outline/index.js index 2ed53f771b67b..c5e5983736209 100644 --- a/packages/editor/src/components/document-outline/index.js +++ b/packages/editor/src/components/document-outline/index.js @@ -3,6 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { useDispatch, useSelect } from '@wordpress/data'; +import { useRef } from '@wordpress/element'; import { create, getTextContent } from '@wordpress/rich-text'; import { store as blockEditorStore } from '@wordpress/block-editor'; import { store as coreStore } from '@wordpress/core-data'; @@ -102,19 +103,17 @@ const isEmptyHeading = ( heading ) => * Renders a document outline component. * * @param {Object} props Props. - * @param {Function} props.onSelect Function to be called when an outline item is selected. - * @param {boolean} props.isTitleSupported Indicates whether the title is supported. + * @param {Function} props.onSelect Function to be called when an outline item is selected * @param {boolean} props.hasOutlineItemsDisabled Indicates whether the outline items are disabled. * * @return {Component} The component to be rendered. */ export default function DocumentOutline( { onSelect, - isTitleSupported, hasOutlineItemsDisabled, } ) { const { selectBlock } = useDispatch( blockEditorStore ); - const { blocks, title } = useSelect( ( select ) => { + const { blocks, title, isTitleSupported } = useSelect( ( select ) => { const { getBlocks } = select( blockEditorStore ); const { getEditedPostAttribute } = select( editorStore ); const { getPostType } = select( coreStore ); @@ -127,6 +126,8 @@ export default function DocumentOutline( { }; } ); + const prevHeadingLevelRef = useRef( 1 ); + const headings = computeOutlineHeadings( blocks ); if ( headings.length < 1 ) { return ( @@ -141,8 +142,6 @@ export default function DocumentOutline( { ); } - let prevHeadingLevel = 1; - // Not great but it's the simplest way to locate the title right now. const titleNode = document.querySelector( '.editor-post-title__input' ); const hasTitle = isTitleSupported && title && titleNode; @@ -172,7 +171,8 @@ export default function DocumentOutline( { { headings.map( ( item, index ) => { // Headings remain the same, go up by one, or down by any amount. // Otherwise there are missing levels. - const isIncorrectLevel = item.level > prevHeadingLevel + 1; + const isIncorrectLevel = + item.level > prevHeadingLevelRef.current + 1; const isValid = ! item.isEmpty && @@ -180,7 +180,7 @@ export default function DocumentOutline( { !! item.level && ( item.level !== 1 || ( ! hasMultipleH1 && ! hasTitle ) ); - prevHeadingLevel = item.level; + prevHeadingLevelRef.current = item.level; return ( .editor-header__toolbar .editor-document-tools__document-overview-toggle, & > .editor-header__settings > .editor-preview-dropdown, - & > .editor-header__settings > .interface-pinned-items { + & > .editor-header__settings > .interface-pinned-items, + & > .editor-header__settings > .editor-zoom-out-toggle { display: none; } diff --git a/packages/editor/src/components/post-publish-panel/index.js b/packages/editor/src/components/post-publish-panel/index.js index 6a2d393e20c4b..1fd36f9f69d7a 100644 --- a/packages/editor/src/components/post-publish-panel/index.js +++ b/packages/editor/src/components/post-publish-panel/index.js @@ -47,9 +47,10 @@ export class PostPublishPanel extends Component { // Automatically collapse the publish sidebar when a post // is published and the user makes an edit. if ( - prevProps.isPublished && - ! this.props.isSaving && - this.props.isDirty + ( prevProps.isPublished && + ! this.props.isSaving && + this.props.isDirty ) || + this.props.currentPostId !== prevProps.currentPostId ) { this.props.onClose(); } @@ -75,6 +76,7 @@ export class PostPublishPanel extends Component { onTogglePublishSidebar, PostPublishExtension, PrePublishExtension, + currentPostId, ...additionalProps } = this.props; const { @@ -154,6 +156,7 @@ export default compose( [ const { getPostType } = select( coreStore ); const { getCurrentPost, + getCurrentPostId, getEditedPostAttribute, isCurrentPostPublished, isCurrentPostScheduled, @@ -177,6 +180,7 @@ export default compose( [ isSaving: isSavingPost() && ! isAutosavingPost(), isSavingNonPostEntityChanges: isSavingNonPostEntityChanges(), isScheduled: isCurrentPostScheduled(), + currentPostId: getCurrentPostId(), }; } ), withDispatch( ( dispatch, { isPublishSidebarEnabled } ) => { diff --git a/packages/editor/src/components/preferences-modal/block-visibility.js b/packages/editor/src/components/preferences-modal/block-visibility.js new file mode 100644 index 0000000000000..49d6888c5dbfe --- /dev/null +++ b/packages/editor/src/components/preferences-modal/block-visibility.js @@ -0,0 +1,94 @@ +/** + * WordPress dependencies + */ +import { useSelect, useDispatch } from '@wordpress/data'; +import { store as preferencesStore } from '@wordpress/preferences'; +import { hasBlockSupport, store as blocksStore } from '@wordpress/blocks'; +import { useMemo } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import { store as editorStore } from '../../store'; +import { unlock } from '../../lock-unlock'; +import BlockManager from '../block-manager'; + +export default function BlockVisibility() { + const { showBlockTypes, hideBlockTypes } = unlock( + useDispatch( editorStore ) + ); + + const { + blockTypes, + allowedBlockTypes: _allowedBlockTypes, + hiddenBlockTypes: _hiddenBlockTypes, + } = useSelect( ( select ) => { + return { + blockTypes: select( blocksStore ).getBlockTypes(), + allowedBlockTypes: + select( editorStore ).getEditorSettings().allowedBlockTypes, + hiddenBlockTypes: + select( preferencesStore ).get( 'core', 'hiddenBlockTypes' ) ?? + [], + }; + }, [] ); + + const allowedBlockTypes = useMemo( () => { + if ( _allowedBlockTypes === true ) { + return blockTypes; + } + return blockTypes.filter( ( { name } ) => { + return _allowedBlockTypes?.includes( name ); + } ); + }, [ _allowedBlockTypes, blockTypes ] ); + + const filteredBlockTypes = allowedBlockTypes.filter( + ( blockType ) => + hasBlockSupport( blockType, 'inserter', true ) && + ( ! blockType.parent || + blockType.parent.includes( 'core/post-content' ) ) + ); + + // Some hidden blocks become unregistered + // by removing for instance the plugin that registered them, yet + // they're still remain as hidden by the user's action. + // We consider "hidden", blocks which were hidden and + // are still registered. + const hiddenBlockTypes = _hiddenBlockTypes.filter( ( hiddenBlock ) => { + return filteredBlockTypes.some( + ( registeredBlock ) => registeredBlock.name === hiddenBlock + ); + } ); + + const selectedBlockTypes = filteredBlockTypes.filter( + ( blockType ) => ! hiddenBlockTypes.includes( blockType.name ) + ); + + const onChangeSelectedBlockTypes = ( newSelectedBlockTypes ) => { + if ( selectedBlockTypes.length > newSelectedBlockTypes.length ) { + const blockTypesToHide = selectedBlockTypes.filter( + ( blockType ) => + ! newSelectedBlockTypes.find( + ( { name } ) => name === blockType.name + ) + ); + hideBlockTypes( blockTypesToHide.map( ( { name } ) => name ) ); + } else if ( selectedBlockTypes.length < newSelectedBlockTypes.length ) { + const blockTypesToShow = newSelectedBlockTypes.filter( + ( blockType ) => + ! selectedBlockTypes.find( + ( { name } ) => name === blockType.name + ) + ); + showBlockTypes( blockTypesToShow.map( ( { name } ) => name ) ); + } + }; + + return ( + + ); +} diff --git a/packages/editor/src/components/preferences-modal/index.js b/packages/editor/src/components/preferences-modal/index.js index 7ea7ea456ce28..72042bca03b70 100644 --- a/packages/editor/src/components/preferences-modal/index.js +++ b/packages/editor/src/components/preferences-modal/index.js @@ -18,7 +18,7 @@ import { store as interfaceStore } from '@wordpress/interface'; import EnablePanelOption from './enable-panel'; import EnablePluginDocumentSettingPanelOption from './enable-plugin-document-setting-panel'; import EnablePublishSidebarOption from './enable-publish-sidebar'; -import BlockManager from '../block-manager'; +import BlockVisibility from './block-visibility'; import PostTaxonomies from '../post-taxonomies'; import PostFeaturedImageCheck from '../post-featured-image/check'; import PostExcerptCheck from '../post-excerpt/check'; @@ -297,7 +297,7 @@ function PreferencesModalContents( { extraSections = {} } ) { "Disable blocks that you don't want to appear in the inserter. They can always be toggled back on later." ) } > - + ), diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index 50d02610062c0..6c05e5b58235b 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -72,8 +72,7 @@ const NON_CONTEXTUAL_POST_TYPES = [ * @return {Array} Block editor props. */ function useBlockEditorProps( post, template, mode ) { - const rootLevelPost = - mode === 'post-only' || ! template ? 'post' : 'template'; + const rootLevelPost = mode === 'template-locked' ? 'template' : 'post'; const [ postBlocks, onInput, onChange ] = useEntityBlockEditor( 'postType', post.type, @@ -164,30 +163,48 @@ export const ExperimentalEditorProvider = withRegistryProvider( BlockEditorProviderComponent = ExperimentalBlockEditorProvider, __unstableTemplate: template, } ) => { - const { editorSettings, selection, isReady, mode, postTypeEntities } = - useSelect( - ( select ) => { - const { - getEditorSettings, - getEditorSelection, - getRenderingMode, - __unstableIsEditorReady, - } = select( editorStore ); - const { getEntitiesConfig } = select( coreStore ); + const { + editorSettings, + selection, + isReady, + mode, + defaultMode, + postTypeEntities, + hasLoadedPostObject, + } = useSelect( + ( select ) => { + const { + getEditorSettings, + getEditorSelection, + getRenderingMode, + __unstableIsEditorReady, + } = select( editorStore ); + const { getEntitiesConfig } = select( coreStore ); + + const postTypeObject = select( coreStore ).getPostType( + post.type + ); + + const _hasLoadedPostObject = select( + coreStore + ).hasFinishedResolution( 'getPostType', [ post.type ] ); - return { - editorSettings: getEditorSettings(), - isReady: __unstableIsEditorReady(), - mode: getRenderingMode(), - selection: getEditorSelection(), - postTypeEntities: - post.type === 'wp_template' - ? getEntitiesConfig( 'postType' ) - : null, - }; - }, - [ post.type ] - ); + return { + hasLoadedPostObject: _hasLoadedPostObject, + editorSettings: getEditorSettings(), + isReady: __unstableIsEditorReady(), + mode: getRenderingMode(), + defaultMode: + postTypeObject?.default_rendering_mode ?? 'post-only', + selection: getEditorSelection(), + postTypeEntities: + post.type === 'wp_template' + ? getEntitiesConfig( 'postType' ) + : null, + }; + }, + [ post.type ] + ); const shouldRenderTemplate = !! template && mode !== 'post-only'; const rootLevelPost = shouldRenderTemplate ? template : post; const defaultBlockContext = useMemo( () => { @@ -282,7 +299,15 @@ export const ExperimentalEditorProvider = withRegistryProvider( } ); } - }, [] ); + }, [ + createWarningNotice, + initialEdits, + settings, + post, + recovery, + setupEditor, + updatePostLock, + ] ); // Synchronizes the active post with the state useEffect( () => { @@ -301,15 +326,15 @@ export const ExperimentalEditorProvider = withRegistryProvider( // Sets the right rendering mode when loading the editor. useEffect( () => { - setRenderingMode( settings.defaultRenderingMode ?? 'post-only' ); - }, [ settings.defaultRenderingMode, setRenderingMode ] ); + setRenderingMode( defaultMode ); + }, [ defaultMode, setRenderingMode ] ); useHideBlocksFromInserter( post.type, mode ); // Register the editor commands. useCommands(); - if ( ! isReady ) { + if ( ! isReady || ! mode || ! hasLoadedPostObject ) { return null; } diff --git a/packages/editor/src/components/zoom-out-toggle/index.js b/packages/editor/src/components/zoom-out-toggle/index.js index 080a4c5857806..2646898a066fb 100644 --- a/packages/editor/src/components/zoom-out-toggle/index.js +++ b/packages/editor/src/components/zoom-out-toggle/index.js @@ -20,13 +20,19 @@ import { isAppleOS } from '@wordpress/keycodes'; import { unlock } from '../../lock-unlock'; const ZoomOutToggle = ( { disabled } ) => { - const { isZoomOut, showIconLabels } = useSelect( ( select ) => ( { - isZoomOut: unlock( select( blockEditorStore ) ).isZoomOut(), - showIconLabels: select( preferencesStore ).get( - 'core', - 'showIconLabels' - ), - } ) ); + const { isZoomOut, showIconLabels, isDistractionFree } = useSelect( + ( select ) => ( { + isZoomOut: unlock( select( blockEditorStore ) ).isZoomOut(), + showIconLabels: select( preferencesStore ).get( + 'core', + 'showIconLabels' + ), + isDistractionFree: select( preferencesStore ).get( + 'core', + 'distractionFree' + ), + } ) + ); const { resetZoomLevel, setZoomLevel } = unlock( useDispatch( blockEditorStore ) @@ -52,13 +58,19 @@ const ZoomOutToggle = ( { disabled } ) => { }; }, [ registerShortcut, unregisterShortcut ] ); - useShortcut( 'core/editor/zoom', () => { - if ( isZoomOut ) { - resetZoomLevel(); - } else { - setZoomLevel( 'auto-scaled' ); + useShortcut( + 'core/editor/zoom', + () => { + if ( isZoomOut ) { + resetZoomLevel(); + } else { + setZoomLevel( 'auto-scaled' ); + } + }, + { + isDisabled: isDistractionFree, } - } ); + ); const handleZoomOut = () => { if ( isZoomOut ) { @@ -78,6 +90,7 @@ const ZoomOutToggle = ( { disabled } ) => { isPressed={ isZoomOut } size="compact" showTooltip={ ! showIconLabels } + className="editor-zoom-out-toggle" /> ); }; diff --git a/packages/editor/src/store/actions.js b/packages/editor/src/store/actions.js index 7ff23cb49f498..4942e50322e06 100644 --- a/packages/editor/src/store/actions.js +++ b/packages/editor/src/store/actions.js @@ -834,6 +834,9 @@ export const toggleDistractionFree = .set( 'core', 'fixedToolbar', true ); dispatch.setIsInserterOpened( false ); dispatch.setIsListViewOpened( false ); + unlock( + registry.dispatch( blockEditorStore ) + ).resetZoomLevel(); } ); } registry.batch( () => { diff --git a/packages/editor/src/store/reducer.native.js b/packages/editor/src/store/reducer.native.js index 7566dfc5dfd03..fbf6c968f57d0 100644 --- a/packages/editor/src/store/reducer.native.js +++ b/packages/editor/src/store/reducer.native.js @@ -9,6 +9,7 @@ import { combineReducers } from '@wordpress/data'; import { postId, postType, + renderingMode, saving, postLock, postSavingLock, @@ -82,6 +83,7 @@ export default combineReducers( { postId, postType, postTitle, + renderingMode, saving, postLock, postSavingLock, diff --git a/packages/patterns/src/components/duplicate-pattern-modal.js b/packages/patterns/src/components/duplicate-pattern-modal.js index 70fb0830e0f1c..d4fd5e744c4e1 100644 --- a/packages/patterns/src/components/duplicate-pattern-modal.js +++ b/packages/patterns/src/components/duplicate-pattern-modal.js @@ -24,7 +24,7 @@ function getTermLabels( pattern, categories ) { return categories.user ?.filter( ( category ) => - pattern.wp_pattern_category.includes( category.id ) + pattern.wp_pattern_category?.includes( category.id ) ) .map( ( category ) => category.label ); } diff --git a/test/native/integration-test-helpers/initialize-editor.js b/test/native/integration-test-helpers/initialize-editor.js index 511f0223e1135..3b89da979aee3 100644 --- a/test/native/integration-test-helpers/initialize-editor.js +++ b/test/native/integration-test-helpers/initialize-editor.js @@ -10,6 +10,8 @@ import { v4 as uuid } from 'uuid'; import { createElement, cloneElement } from '@wordpress/element'; // eslint-disable-next-line no-restricted-imports import { initializeEditor as internalInitializeEditor } from '@wordpress/edit-post'; +import { store as coreStore } from '@wordpress/core-data'; +import { select } from '@wordpress/data'; /** * Internal dependencies @@ -28,6 +30,21 @@ import { getGlobalStyles } from './get-global-styles'; * @return {import('@testing-library/react-native').RenderAPI} A Testing Library screen. */ export async function initializeEditor( props, { component } = {} ) { + const resolutionSpy = jest.spyOn( + select( coreStore ), + 'hasFinishedResolution' + ); + const actualResolution = resolutionSpy.getMockImplementation(); + resolutionSpy.mockImplementation( ( selectorName, args ) => { + // The mobile editor only supports the `post-only` rendering mode, so we + // presume a resolved `getPostType` selector to unblock editor rendering. + if ( 'getPostType' === selectorName ) { + return true; + } + + return actualResolution( selectorName, args ); + } ); + const uniqueId = uuid(); const postId = `post-id-${ uniqueId }`; const postType = 'post'; diff --git a/test/performance/fixtures/perf-utils.ts b/test/performance/fixtures/perf-utils.ts index 592e8194852e3..8d23d91ff91bf 100644 --- a/test/performance/fixtures/perf-utils.ts +++ b/test/performance/fixtures/perf-utils.ts @@ -97,6 +97,26 @@ export class PerfUtils { return canvas; } + /** + * Change the rendering mode of the editor. + * + * Setting the rendering mode to something other than the default is sometimes + * needed when for example we want to update the contents of the editor from a + * HTML file. Calling the resetBlocks method of the core/block-editor store will + * replace the contents of the template if the rendering mode is not post-only. + * So this should always be called before the resetBlocks method is used. + * + * @param newRenderingMode Rendering mode to set + * + * @return Promise + */ + async setRenderingMode( newRenderingMode: string ) { + await this.page.evaluate( ( _newRenderingMode ) => { + const { dispatch } = window.wp.data; + dispatch( 'core/editor' ).setRenderingMode( _newRenderingMode ); + }, newRenderingMode ); + } + /** * Loads blocks from the small post with containers fixture into the editor * canvas. diff --git a/test/performance/specs/site-editor.spec.js b/test/performance/specs/site-editor.spec.js index 9c9d8aec71da4..e72d83fa8b3aa 100644 --- a/test/performance/specs/site-editor.spec.js +++ b/test/performance/specs/site-editor.spec.js @@ -64,6 +64,7 @@ test.describe( 'Site Editor Performance', () => { test( 'Setup the test page', async ( { admin, perfUtils } ) => { await admin.createNewPost( { postType: 'page' } ); + await perfUtils.setRenderingMode( 'post-only' ); await perfUtils.loadBlocksForLargePost(); draftId = await perfUtils.saveDraft(); @@ -122,6 +123,7 @@ test.describe( 'Site Editor Performance', () => { test( 'Setup the test post', async ( { admin, editor, perfUtils } ) => { await admin.createNewPost( { postType: 'page' } ); + await perfUtils.setRenderingMode( 'post-only' ); await perfUtils.loadBlocksForLargePost(); await editor.insertBlock( { name: 'core/paragraph' } );