A quick brown fox jumps over the lazy dog.
+
{ convertDescription }
{ `No default animation. Use one of type = "appear", "slide-in", or "loading".` }
+ { /* eslint-disable react/no-unescaped-entities */ } + No default animation. Use one of type = "appear", "slide-in", or + "loading". + { /* eslint-enable react/no-unescaped-entities */ } +
{ `paddingSize="medium"` }
paddingSize="medium"
{ `paddingSize="none"` }
paddingSize="none"
{ `Hit the "a" or "b" key in this textarea:` }
Hit the "a" or "b" key in this textarea:
Selected tab: Tab 3
Select a tab:
This panel item will not be displayed in the demo as its diff --git a/packages/components/src/tools-panel/tools-panel-header/component.tsx b/packages/components/src/tools-panel/tools-panel-header/component.tsx index b08981f94949a6..a30a8aa1c2f4b4 100644 --- a/packages/components/src/tools-panel/tools-panel-header/component.tsx +++ b/packages/components/src/tools-panel/tools-panel-header/component.tsx @@ -224,7 +224,7 @@ const ToolsPanelHeader = ( // @ts-expect-error - TODO: If this "tertiary" style is something we really want to allow on MenuItem, // we should rename it and explicitly allow it as an official API. All the other Button variants // don't make sense in a MenuItem context, and should be disallowed. - variant={ 'tertiary' } + variant="tertiary" onClick={ () => { if ( canResetAll ) { resetAll(); diff --git a/packages/components/src/tooltip/index.tsx b/packages/components/src/tooltip/index.tsx index 87c7506a9c5f7d..1eb0de7fed009d 100644 --- a/packages/components/src/tooltip/index.tsx +++ b/packages/components/src/tooltip/index.tsx @@ -87,10 +87,7 @@ function UnforwardedTooltip( } computedPlacement = computedPlacement || 'bottom'; - // Removing the `Ariakit` namespace from the hook name allows ESLint to - // properly identify the hook, and apply the correct linting rules. - const useAriakitTooltipStore = Ariakit.useTooltipStore; - const tooltipStore = useAriakitTooltipStore( { + const tooltipStore = Ariakit.useTooltipStore( { placement: computedPlacement, showTimeout: delay, } ); diff --git a/packages/components/src/unit-control/test/index.tsx b/packages/components/src/unit-control/test/index.tsx index 777004a6e8ae27..d91498d46478b3 100644 --- a/packages/components/src/unit-control/test/index.tsx +++ b/packages/components/src/unit-control/test/index.tsx @@ -138,7 +138,7 @@ describe( 'UnitControl', () => { const user = userEvent.setup(); const onChangeSpy = jest.fn(); - render( ); + render( ); const input = getInput(); await user.clear( input ); @@ -159,7 +159,7 @@ describe( 'UnitControl', () => { const user = userEvent.setup(); const onChangeSpy = jest.fn(); - render( ); + render( ); const input = getInput(); await user.type( input, '{ArrowUp}' ); @@ -175,7 +175,7 @@ describe( 'UnitControl', () => { const user = userEvent.setup(); const onChangeSpy = jest.fn(); - render( ); + render( ); const input = getInput(); await user.type( input, '{Shift>}{ArrowUp}{/Shift}' ); @@ -253,7 +253,7 @@ describe( 'UnitControl', () => { render( @@ -282,7 +282,7 @@ describe( 'UnitControl', () => { render( @@ -348,7 +348,7 @@ describe( 'UnitControl', () => { render( @@ -468,7 +468,7 @@ describe( 'UnitControl', () => { render( @@ -570,19 +570,19 @@ describe( 'UnitControl', () => { describe( 'Unit Parser', () => { it( 'should update unit after initial render and with new unit prop', async () => { - const { rerender } = render( ); + const { rerender } = render( ); const select = getSelect(); expect( select.value ).toBe( '%' ); - rerender( ); + rerender( ); expect( select.value ).toBe( 'vh' ); } ); it( 'should fallback to default unit if parsed unit is invalid', () => { - render( ); + render( ); expect( getSelect().value ).toBe( 'px' ); } ); @@ -590,7 +590,7 @@ describe( 'UnitControl', () => { it( 'should display valid CSS unit when not explicitly included in units list', () => { render( { render( diff --git a/packages/components/src/utils/reduce-motion.js b/packages/components/src/utils/reduce-motion.js deleted file mode 100644 index 68089e019e50eb..00000000000000 --- a/packages/components/src/utils/reduce-motion.js +++ /dev/null @@ -1,35 +0,0 @@ -/** - * Allows users to opt-out of animations via OS-level preferences. - * - * @param {'transition' | 'animation' | string} [prop='transition'] CSS Property name - * @return {string} Generated CSS code for the reduced style - * - * @deprecated Write your own media query instead, - * e.g. `@media not ( prefers-reduced-motion ) { ...some animation... }` or - * `@media ( prefers-reduced-motion ) { ...reduced animation... }`. - */ -export function reduceMotion( prop = 'transition' ) { - let style; - - switch ( prop ) { - case 'transition': - style = 'transition-duration: 0ms;'; - break; - - case 'animation': - style = 'animation-duration: 1ms;'; - break; - - default: - style = ` - animation-duration: 1ms; - transition-duration: 0ms; - `; - } - - return ` - @media ( prefers-reduced-motion: reduce ) { - ${ style }; - } - `; -} diff --git a/packages/components/src/utils/style-mixins.js b/packages/components/src/utils/style-mixins.js index c858e8731fc523..46ee1183f59698 100644 --- a/packages/components/src/utils/style-mixins.js +++ b/packages/components/src/utils/style-mixins.js @@ -1,6 +1,5 @@ export { boxSizingReset } from './box-sizing'; export { rgba } from './colors'; -export { reduceMotion } from './reduce-motion'; export { rtl } from './rtl'; export { font } from './font'; export { breakpoint } from './breakpoint'; diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json index 81045d05c21fc5..2033a6f43fede6 100644 --- a/packages/components/tsconfig.json +++ b/packages/components/tsconfig.json @@ -9,10 +9,7 @@ "gutenberg-test-env", "jest", "@testing-library/jest-dom" - ], - // TODO: Remove `skipLibCheck` after resolving duplicate declaration of the `process` variable - // between `@types/webpack-env` (from @storybook packages) and `gutenberg-env`. - "skipLibCheck": true + ] }, "references": [ { "path": "../a11y" }, diff --git a/packages/compose/CHANGELOG.md b/packages/compose/CHANGELOG.md index 25526f536a4e58..702df49b9a28bb 100644 --- a/packages/compose/CHANGELOG.md +++ b/packages/compose/CHANGELOG.md @@ -2,6 +2,12 @@ ## Unreleased +## 7.0.0 (2024-05-31) + +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 6.35.0 (2024-05-16) ## 6.34.0 (2024-05-02) diff --git a/packages/compose/README.md b/packages/compose/README.md index 83bde196033a01..f4f0631ba36a51 100644 --- a/packages/compose/README.md +++ b/packages/compose/README.md @@ -69,7 +69,7 @@ This is inspired by `lodash`'s `flowRight` function. _Related_ -- +- ### createHigherOrderComponent @@ -145,7 +145,7 @@ This is inspired by `lodash`'s `flow` function. _Related_ -- +- ### pure @@ -247,7 +247,7 @@ Debounces a function similar to Lodash's `debounce`. A new debounced function wi _Related_ -- +- _Parameters_ @@ -265,11 +265,11 @@ Helper hook for input fields that need to debounce the value before using it. _Parameters_ -- _defaultValue_ `any`: The default value to use. +- _defaultValue_ The default value to use. _Returns_ -- `[string, Function, string]`: The input value, the setter and the debounced input value. +- `[ string, ( value: string ) => void, string ]`: The input value, the setter and the debounced input value. ### useDisabled @@ -535,7 +535,7 @@ Throttles a function similar to Lodash's `throttle`. A new throttled function wi _Related_ -- +- _Parameters_ diff --git a/packages/compose/package.json b/packages/compose/package.json index b1cf8250f1ff20..7568f2f26f08dc 100644 --- a/packages/compose/package.json +++ b/packages/compose/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/compose", - "version": "6.35.0", + "version": "7.0.0", "description": "WordPress higher-order components (HOCs).", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -21,7 +21,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/compose/src/higher-order/compose.ts b/packages/compose/src/higher-order/compose.ts index 2b7b598c70c958..1fcaa55eb4512b 100644 --- a/packages/compose/src/higher-order/compose.ts +++ b/packages/compose/src/higher-order/compose.ts @@ -9,7 +9,7 @@ import { basePipe } from './pipe'; * * This is inspired by `lodash`'s `flowRight` function. * - * @see https://docs-lodash.com/v4/flow-right/ + * @see https://lodash.com/docs/4#flow-right */ const compose = basePipe( true ); diff --git a/packages/compose/src/higher-order/pipe.ts b/packages/compose/src/higher-order/pipe.ts index ced7618ad81bfd..29003d818ccc3a 100644 --- a/packages/compose/src/higher-order/pipe.ts +++ b/packages/compose/src/higher-order/pipe.ts @@ -43,7 +43,7 @@ * * Allows to choose whether to perform left-to-right or right-to-left composition. * - * @see https://docs-lodash.com/v4/flow/ + * @see https://lodash.com/docs/4#flow * * @param {boolean} reverse True if right-to-left, false for left-to-right composition. */ @@ -67,7 +67,7 @@ const basePipe = * * This is inspired by `lodash`'s `flow` function. * - * @see https://docs-lodash.com/v4/flow/ + * @see https://lodash.com/docs/4#flow */ const pipe = basePipe(); diff --git a/packages/compose/src/hooks/use-debounce/index.js b/packages/compose/src/hooks/use-debounce/index.js index 5d48dba91bde6e..6da42f159a8640 100644 --- a/packages/compose/src/hooks/use-debounce/index.js +++ b/packages/compose/src/hooks/use-debounce/index.js @@ -19,7 +19,7 @@ import { debounce } from '../../utils/debounce'; * including the function to debounce, so please wrap functions created on * render in components in `useCallback`. * - * @see https://docs-lodash.com/v4/debounce/ + * @see https://lodash.com/docs/4#debounce * * @template {(...args: any[]) => void} TFunc * diff --git a/packages/compose/src/hooks/use-debounced-input/index.js b/packages/compose/src/hooks/use-debounced-input/index.ts similarity index 60% rename from packages/compose/src/hooks/use-debounced-input/index.js rename to packages/compose/src/hooks/use-debounced-input/index.ts index 91a01073fcfee8..643b0ba68026c3 100644 --- a/packages/compose/src/hooks/use-debounced-input/index.js +++ b/packages/compose/src/hooks/use-debounced-input/index.ts @@ -11,18 +11,20 @@ import useDebounce from '../use-debounce'; /** * Helper hook for input fields that need to debounce the value before using it. * - * @param {any} defaultValue The default value to use. - * @return {[string, Function, string]} The input value, the setter and the debounced input value. + * @param defaultValue The default value to use. + * @return The input value, the setter and the debounced input value. */ -export default function useDebouncedInput( defaultValue = '' ) { - const [ input, setInput ] = useState( defaultValue ); +export default function useDebouncedInput( + defaultValue = '' +): [ string, ( value: string ) => void, string ] { + const [ input, setInput ] = useState< string >( defaultValue ); const [ debouncedInput, setDebouncedState ] = useState( defaultValue ); const setDebouncedInput = useDebounce( setDebouncedState, 250 ); useEffect( () => { setDebouncedInput( input ); - }, [ input ] ); + }, [ input, setDebouncedInput ] ); return [ input, setInput, debouncedInput ]; } diff --git a/packages/compose/src/hooks/use-focus-on-mount/index.js b/packages/compose/src/hooks/use-focus-on-mount/index.js index 00b5cd50f0b581..db1f2dcdbe3ead 100644 --- a/packages/compose/src/hooks/use-focus-on-mount/index.js +++ b/packages/compose/src/hooks/use-focus-on-mount/index.js @@ -1,9 +1,14 @@ /** * WordPress dependencies */ -import { useRef, useEffect, useCallback } from '@wordpress/element'; +import { useRef, useEffect } from '@wordpress/element'; import { focus } from '@wordpress/dom'; +/** + * Internal dependencies + */ +import useRefEffect from '../use-ref-effect'; + /** * Hook used to focus the first tabbable element on mount. * @@ -50,15 +55,7 @@ export default function useFocusOnMount( focusOnMount = 'firstElement' ) { focusOnMountRef.current = focusOnMount; }, [ focusOnMount ] ); - useEffect( () => { - return () => { - if ( timerId.current ) { - clearTimeout( timerId.current ); - } - }; - }, [] ); - - return useCallback( ( node ) => { + return useRefEffect( ( node ) => { if ( ! node || focusOnMountRef.current === false ) { return; } @@ -80,5 +77,11 @@ export default function useFocusOnMount( focusOnMount = 'firstElement' ) { } setFocus( node ); + + return () => { + if ( timerId.current ) { + clearTimeout( timerId.current ); + } + }; }, [] ); } diff --git a/packages/compose/src/hooks/use-throttle/index.js b/packages/compose/src/hooks/use-throttle/index.js index 8cade9a8442ac8..4bf6cc6e85555a 100644 --- a/packages/compose/src/hooks/use-throttle/index.js +++ b/packages/compose/src/hooks/use-throttle/index.js @@ -19,7 +19,7 @@ import { throttle } from '../../utils/throttle'; * including the function to throttle, so please wrap functions created on * render in components in `useCallback`. * - * @see https://docs-lodash.com/v4/throttle/ + * @see https://lodash.com/docs/4#throttle * * @template {(...args: any[]) => void} TFunc * diff --git a/packages/core-commands/CHANGELOG.md b/packages/core-commands/CHANGELOG.md index f645ce35258aae..b05dda0cca2b23 100644 --- a/packages/core-commands/CHANGELOG.md +++ b/packages/core-commands/CHANGELOG.md @@ -2,6 +2,12 @@ ## Unreleased +## 1.0.0 (2024-05-31) + +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 0.27.0 (2024-05-16) ## 0.26.0 (2024-05-02) @@ -54,4 +60,4 @@ ## 0.2.0 (2023-05-10) -Initial release. \ No newline at end of file +Initial release. diff --git a/packages/core-commands/package.json b/packages/core-commands/package.json index 70b3ce18ec9637..f79adf41f48984 100644 --- a/packages/core-commands/package.json +++ b/packages/core-commands/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/core-commands", - "version": "0.27.0", + "version": "1.0.0", "description": "WordPress core reusable commands.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -19,7 +19,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/core-commands/src/site-editor-navigation-commands.js b/packages/core-commands/src/site-editor-navigation-commands.js index 6ef9be58b4d007..ba34fffd98824c 100644 --- a/packages/core-commands/src/site-editor-navigation-commands.js +++ b/packages/core-commands/src/site-editor-navigation-commands.js @@ -16,7 +16,7 @@ import { navigation, } from '@wordpress/icons'; import { privateApis as routerPrivateApis } from '@wordpress/router'; -import { getQueryArg, addQueryArgs, getPath } from '@wordpress/url'; +import { addQueryArgs, getPath } from '@wordpress/url'; import { useDebounce } from '@wordpress/compose'; /** @@ -119,14 +119,6 @@ const getNavigationCommandLoaderPerPostType = ( postType ) => const isSiteEditor = getPath( window.location.href )?.includes( 'site-editor.php' ); - const extraArgs = isSiteEditor - ? { - canvas: getQueryArg( - window.location.href, - 'canvas' - ), - } - : {}; return { ...command, @@ -134,7 +126,7 @@ const getNavigationCommandLoaderPerPostType = ( postType ) => const args = { postType, postId: record.id, - ...extraArgs, + canvas: 'edit', }; const targetUrl = addQueryArgs( 'site-editor.php', @@ -195,15 +187,6 @@ const getNavigationCommandLoaderPerTemplate = ( templateType ) => const result = []; result.push( ...orderedRecords.map( ( record ) => { - const extraArgs = isSiteEditor - ? { - canvas: getQueryArg( - window.location.href, - 'canvas' - ), - } - : {}; - return { name: templateType + '-' + record.id, searchLabel: record.title?.rendered + ' ' + record.id, @@ -215,7 +198,7 @@ const getNavigationCommandLoaderPerTemplate = ( templateType ) => const args = { postType: templateType, postId: record.id, - ...extraArgs, + canvas: 'edit', }; const targetUrl = addQueryArgs( 'site-editor.php', @@ -242,8 +225,7 @@ const getNavigationCommandLoaderPerTemplate = ( templateType ) => icon: symbolFilled, callback: ( { close } ) => { const args = { - path: '/patterns', - categoryType: 'wp_template_part', + postType: 'wp_template_part', categoryId: 'all-parts', }; const targetUrl = addQueryArgs( @@ -296,7 +278,7 @@ function useSiteEditorBasicNavigationCommands() { icon: navigation, callback: ( { close } ) => { const args = { - path: '/navigation', + postType: 'wp_navigation', }; const targetUrl = addQueryArgs( 'site-editor.php', args ); if ( isSiteEditor ) { @@ -332,7 +314,7 @@ function useSiteEditorBasicNavigationCommands() { icon: page, callback: ( { close } ) => { const args = { - path: '/page', + post_type: 'page', }; const targetUrl = addQueryArgs( 'site-editor.php', args ); if ( isSiteEditor ) { @@ -350,7 +332,7 @@ function useSiteEditorBasicNavigationCommands() { icon: layout, callback: ( { close } ) => { const args = { - path: '/wp_template', + postType: 'wp_template', }; const targetUrl = addQueryArgs( 'site-editor.php', args ); if ( isSiteEditor ) { @@ -370,7 +352,7 @@ function useSiteEditorBasicNavigationCommands() { callback: ( { close } ) => { if ( canCreateTemplate ) { const args = { - path: '/patterns', + postType: 'wp_block', }; const targetUrl = addQueryArgs( 'site-editor.php', args ); if ( isSiteEditor ) { diff --git a/packages/core-data/CHANGELOG.md b/packages/core-data/CHANGELOG.md index 31df8b2074dbdc..810e8ab00d21c9 100644 --- a/packages/core-data/CHANGELOG.md +++ b/packages/core-data/CHANGELOG.md @@ -2,6 +2,13 @@ ## Unreleased +## 7.0.0 (2024-05-31) + +### Breaking Changes + +- Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)). +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 6.35.0 (2024-05-16) ## 6.34.0 (2024-05-02) @@ -97,7 +104,7 @@ ### Breaking Changes -– Add TypeScript types to the built package (via "types": "build-types" in the package.json) +– Add TypeScript types to the built package (via "types": "build-types" in the package.json) ## 4.14.0 (2022-08-24) @@ -132,6 +139,7 @@ ## 4.3.0 (2022-03-23) ### New Features + - The saveEntityRecord, saveEditedEntityRecord, and deleteEntityRecord actions now accept an optional throwOnError option (defaults to false). When set to true, any exceptions occurring when the action was executing are re-thrown, causing dispatch().saveEntityRecord() to reject with an error. ([#39258](https://github.com/WordPress/gutenberg/pull/39258)) - Added support for fetching block patterns and their categories, with the `getBlockPatterns` and `getBlockPatternCategories` selectors. diff --git a/packages/core-data/package.json b/packages/core-data/package.json index bbfc0712dd1899..984de2f7628ec4 100644 --- a/packages/core-data/package.json +++ b/packages/core-data/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/core-data", - "version": "6.35.0", + "version": "7.0.0", "description": "Access to and manipulation of core WordPress entities.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -20,7 +20,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/core-data/src/actions.js b/packages/core-data/src/actions.js index 454250e8ad13c9..36b0ba5f84c9d1 100644 --- a/packages/core-data/src/actions.js +++ b/packages/core-data/src/actions.js @@ -396,7 +396,7 @@ export const editEntityRecord = }, {} ), }; if ( window.__experimentalEnableSync && entityConfig.syncConfig ) { - if ( process.env.IS_GUTENBERG_PLUGIN ) { + if ( globalThis.IS_GUTENBERG_PLUGIN ) { const objectId = entityConfig.getSyncObjectId( recordId ); getSyncProvider().update( entityConfig.syncObjectType + '--edit', @@ -598,10 +598,14 @@ export const saveEntityRecord = return acc; }, { + // Do not update the `status` if we have edited it when auto saving. + // It's very important to let the user explicitly save this change, + // because it can lead to unexpected results. An example would be to + // have a draft post and change the status to publish. status: data.status === 'auto-draft' ? 'draft' - : data.status, + : undefined, } ); updatedRecord = await __unstableFetch( { diff --git a/packages/core-data/src/entities.js b/packages/core-data/src/entities.js index e91744110faf32..8d09402087cf90 100644 --- a/packages/core-data/src/entities.js +++ b/packages/core-data/src/entities.js @@ -485,7 +485,7 @@ export const getOrLoadEntitiesConfig = if ( configs?.length > 0 && hasConfig ) { if ( window.__experimentalEnableSync ) { - if ( process.env.IS_GUTENBERG_PLUGIN ) { + if ( globalThis.IS_GUTENBERG_PLUGIN ) { registerSyncConfigs( configs ); } } @@ -506,7 +506,7 @@ export const getOrLoadEntitiesConfig = configs = await loader.loadEntities(); if ( window.__experimentalEnableSync ) { - if ( process.env.IS_GUTENBERG_PLUGIN ) { + if ( globalThis.IS_GUTENBERG_PLUGIN ) { registerSyncConfigs( configs ); } } diff --git a/packages/core-data/src/entity-provider.js b/packages/core-data/src/entity-provider.js index 51830f622a026d..a2324c06e4dbc1 100644 --- a/packages/core-data/src/entity-provider.js +++ b/packages/core-data/src/entity-provider.js @@ -20,39 +20,7 @@ import { updateFootnotesFromMeta } from './footnotes'; const EMPTY_ARRAY = []; -/** - * Internal dependencies - */ -import { rootEntitiesConfig, additionalEntityConfigLoaders } from './entities'; - -const entityContexts = { - ...rootEntitiesConfig.reduce( ( acc, loader ) => { - if ( ! acc[ loader.kind ] ) { - acc[ loader.kind ] = {}; - } - acc[ loader.kind ][ loader.name ] = { - context: createContext( undefined ), - }; - return acc; - }, {} ), - ...additionalEntityConfigLoaders.reduce( ( acc, loader ) => { - acc[ loader.kind ] = {}; - return acc; - }, {} ), -}; -const getEntityContext = ( kind, name ) => { - if ( ! entityContexts[ kind ] ) { - throw new Error( `Missing entity config for kind: ${ kind }.` ); - } - - if ( ! entityContexts[ kind ][ name ] ) { - entityContexts[ kind ][ name ] = { - context: createContext( undefined ), - }; - } - - return entityContexts[ kind ][ name ].context; -}; +const EntityContext = createContext( {} ); /** * Context provider component for providing @@ -68,8 +36,22 @@ const getEntityContext = ( kind, name ) => { * the entity's context provider. */ export default function EntityProvider( { kind, type: name, id, children } ) { - const Provider = getEntityContext( kind, name ).Provider; - return { children }; + const parent = useContext( EntityContext ); + const childContext = useMemo( + () => ( { + ...parent, + [ kind ]: { + ...parent?.[ kind ], + [ name ]: id, + }, + } ), + [ parent, kind, name, id ] + ); + return ( + + { children } + + ); } /** @@ -80,7 +62,8 @@ export default function EntityProvider( { kind, type: name, id, children } ) { * @param {string} name The entity name. */ export function useEntityId( kind, name ) { - return useContext( getEntityContext( kind, name ) ); + const context = useContext( EntityContext ); + return context?.[ kind ]?.[ name ]; } /** diff --git a/packages/core-data/src/resolvers.js b/packages/core-data/src/resolvers.js index 7de2c354ba2bf8..3e5373eda6d6ab 100644 --- a/packages/core-data/src/resolvers.js +++ b/packages/core-data/src/resolvers.js @@ -81,7 +81,7 @@ export const getEntityRecord = entityConfig.syncConfig && ! query ) { - if ( process.env.IS_GUTENBERG_PLUGIN ) { + if ( globalThis.IS_GUTENBERG_PLUGIN ) { const objectId = entityConfig.getSyncObjectId( key ); // Loads the persisted document. @@ -712,7 +712,8 @@ export const getDefaultTemplateId = const template = await apiFetch( { path: addQueryArgs( '/wp/v2/templates/lookup', query ), } ); - if ( template ) { + // Endpoint may return an empty object if no template is found. + if ( template?.id ) { dispatch.receiveDefaultTemplateId( query, template.id ); } }; diff --git a/packages/create-block-interactive-template/CHANGELOG.md b/packages/create-block-interactive-template/CHANGELOG.md index a220dcf8f90294..223f5de7796c62 100644 --- a/packages/create-block-interactive-template/CHANGELOG.md +++ b/packages/create-block-interactive-template/CHANGELOG.md @@ -2,6 +2,12 @@ ## Unreleased +## 2.0.0 (2024-05-31) + +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 1.21.0 (2024-05-16) ## 1.20.0 (2024-05-02) diff --git a/packages/create-block-interactive-template/package.json b/packages/create-block-interactive-template/package.json index a1306987f21b3a..0e11939d484025 100644 --- a/packages/create-block-interactive-template/package.json +++ b/packages/create-block-interactive-template/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/create-block-interactive-template", - "version": "1.21.0", + "version": "2.0.0", "description": "Template for @wordpress/create-block to create interactive blocks with the Interactivity API.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -19,6 +19,10 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, + "engines": { + "node": ">=18.12.0", + "npm": ">=8.19.2" + }, "publishConfig": { "access": "public" } diff --git a/packages/create-block-tutorial-template/CHANGELOG.md b/packages/create-block-tutorial-template/CHANGELOG.md index 63091030fe4e4b..00537097ff945a 100644 --- a/packages/create-block-tutorial-template/CHANGELOG.md +++ b/packages/create-block-tutorial-template/CHANGELOG.md @@ -2,6 +2,12 @@ ## Unreleased +## 4.0.0 (2024-05-31) + +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 3.12.0 (2024-05-16) ## 3.11.0 (2024-05-02) diff --git a/packages/create-block-tutorial-template/package.json b/packages/create-block-tutorial-template/package.json index 929fac1da68192..1b2c920457641d 100644 --- a/packages/create-block-tutorial-template/package.json +++ b/packages/create-block-tutorial-template/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/create-block-tutorial-template", - "version": "3.12.0", + "version": "4.0.0", "description": "This is a template for @wordpress/create-block that creates an example 'Copyright Date' block. This block is used in the official WordPress block development Quick Start Guide.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -19,6 +19,10 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, + "engines": { + "node": ">=18.12.0", + "npm": ">=8.19.2" + }, "publishConfig": { "access": "public" } diff --git a/packages/create-block/CHANGELOG.md b/packages/create-block/CHANGELOG.md index 409c2fbcc8ec50..0362b2a6f13412 100644 --- a/packages/create-block/CHANGELOG.md +++ b/packages/create-block/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +## 4.43.0 (2024-05-31) + ## 4.42.0 (2024-05-16) ## 4.41.0 (2024-05-02) diff --git a/packages/create-block/package.json b/packages/create-block/package.json index 8771a1064f3288..00acf80f0ac9d1 100644 --- a/packages/create-block/package.json +++ b/packages/create-block/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/create-block", - "version": "4.42.0", + "version": "4.43.0", "description": "Generates PHP, JS and CSS code for registering a block for a WordPress plugin.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/customize-widgets/CHANGELOG.md b/packages/customize-widgets/CHANGELOG.md index 9c2687cf60b9c9..aec25853b2914b 100644 --- a/packages/customize-widgets/CHANGELOG.md +++ b/packages/customize-widgets/CHANGELOG.md @@ -2,6 +2,13 @@ ## Unreleased +## 5.0.0 (2024-05-31) + +### Breaking Changes + +- Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)). +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 4.35.0 (2024-05-16) ## 4.34.0 (2024-05-02) diff --git a/packages/customize-widgets/package.json b/packages/customize-widgets/package.json index 0028720426dd8b..ec320eee22a43a 100644 --- a/packages/customize-widgets/package.json +++ b/packages/customize-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/customize-widgets", - "version": "4.35.0", + "version": "5.0.0", "description": "Widgets blocks in Customizer Module for WordPress.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -17,7 +17,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/customize-widgets/src/index.js b/packages/customize-widgets/src/index.js index 5b438cac86f49b..9afda775a1701c 100644 --- a/packages/customize-widgets/src/index.js +++ b/packages/customize-widgets/src/index.js @@ -61,7 +61,7 @@ export function initialize( editorName, blockEditorSettings ) { } ); registerCoreBlocks( coreBlocks ); registerLegacyWidgetBlock(); - if ( process.env.IS_GUTENBERG_PLUGIN ) { + if ( globalThis.IS_GUTENBERG_PLUGIN ) { __experimentalRegisterExperimentalCoreBlocks( { enableFSEBlocks: ENABLE_EXPERIMENTAL_FSE_BLOCKS, } ); diff --git a/packages/data-controls/CHANGELOG.md b/packages/data-controls/CHANGELOG.md index d6c96a3f4a0a01..6b94332e70db8b 100644 --- a/packages/data-controls/CHANGELOG.md +++ b/packages/data-controls/CHANGELOG.md @@ -2,6 +2,12 @@ ## Unreleased +## 4.0.0 (2024-05-31) + +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 3.27.0 (2024-05-16) ## 3.26.0 (2024-05-02) diff --git a/packages/data-controls/package.json b/packages/data-controls/package.json index 09b4e93f822cb4..88fa9ae4faf264 100644 --- a/packages/data-controls/package.json +++ b/packages/data-controls/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/data-controls", - "version": "3.27.0", + "version": "4.0.0", "description": "A set of common controls for the @wordpress/data api.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -20,7 +20,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/data/CHANGELOG.md b/packages/data/CHANGELOG.md index 26b545dbaea379..0e72225f04c80e 100644 --- a/packages/data/CHANGELOG.md +++ b/packages/data/CHANGELOG.md @@ -2,19 +2,25 @@ ## Unreleased +## 10.0.0 (2024-05-31) + +### Breaking Changes + +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + ## 9.28.0 (2024-05-16) ## 9.27.0 (2024-05-02) ## 9.26.0 (2024-04-19) -- Add new `createSelector` function for creating memoized store selectors ([#60370](https://github.com/WordPress/gutenberg/pull/60370)). +- Add new `createSelector` function for creating memoized store selectors ([#60370](https://github.com/WordPress/gutenberg/pull/60370)). ## 9.25.0 (2024-04-03) ## 9.24.0 (2024-03-21) -- Deprecate the `getIsResolved` meta-selector ([#59679](https://github.com/WordPress/gutenberg/pull/59679)). +- Deprecate the `getIsResolved` meta-selector ([#59679](https://github.com/WordPress/gutenberg/pull/59679)). ## 9.23.0 (2024-03-06) @@ -40,13 +46,13 @@ ### Bug Fix -- Fix `combineReducers()` types ([#55321](https://github.com/WordPress/gutenberg/pull/55321)). +- Fix `combineReducers()` types ([#55321](https://github.com/WordPress/gutenberg/pull/55321)). ## 9.13.0 (2023-10-05) ### Enhancements -- Change implementation of `combineReducers` so that it doesn't use `eval` internally, and can run with a CSP policy that doesn't allow `unsafe-eval` ([#54606](https://github.com/WordPress/gutenberg/pull/54606)). +- Change implementation of `combineReducers` so that it doesn't use `eval` internally, and can run with a CSP policy that doesn't allow `unsafe-eval` ([#54606](https://github.com/WordPress/gutenberg/pull/54606)). ## 9.12.0 (2023-09-20) @@ -56,7 +62,7 @@ ### Enhancements -- Warn if the `useSelect` hook returns different values when called with the same state and parameters ([#53666](https://github.com/WordPress/gutenberg/pull/53666)). +- Warn if the `useSelect` hook returns different values when called with the same state and parameters ([#53666](https://github.com/WordPress/gutenberg/pull/53666)). ## 9.9.0 (2023-08-10) diff --git a/packages/data/package.json b/packages/data/package.json index 5cd8558e3d1003..3246870cbe52fb 100644 --- a/packages/data/package.json +++ b/packages/data/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/data", - "version": "9.28.0", + "version": "10.0.0", "description": "Data module for WordPress.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -20,7 +20,8 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md index 711836f69eab23..8b3b3656258c9e 100644 --- a/packages/dataviews/CHANGELOG.md +++ b/packages/dataviews/CHANGELOG.md @@ -2,6 +2,22 @@ ## Unreleased +## 2.0.0 (2024-05-31) + +### Breaking Changes + +- Legacy support for `in` and `notIn` operators introduced in 0.8 .0 has been removed and they no longer work. Please, convert them to `is` and `isNot` respectively. +- Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)). +- Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases). + +### Internal + +- Remove some unused dependencies ([#62010](https://github.com/WordPress/gutenberg/pull/62010)). + +### Enhancement + +- `label` prop in Actions API can be either a `string` value or a `function`, in case we want to use information from the selected items. ([#61942](https://github.com/WordPress/gutenberg/pull/61942)). + ## 1.2.0 (2024-05-16) ### Internal diff --git a/packages/dataviews/README.md b/packages/dataviews/README.md index d0eab0c46d0598..41595b4d58adcd 100644 --- a/packages/dataviews/README.md +++ b/packages/dataviews/README.md @@ -14,7 +14,6 @@ npm install @wordpress/dataviews --save ```jsx const Example = () => { - // Declare data, fields, etc. return ( @@ -27,7 +26,7 @@ const Example = () => { paginationInfo={ paginationInfo } /> ); -} +}; ``` ## Properties @@ -42,12 +41,14 @@ Example: const data = [ { id: 1, - title: "Title", - author: "Admin", - date: "2012-04-23T18:25:43.511Z" + title: 'Title', + author: 'Admin', + date: '2012-04-23T18:25:43.511Z', }, - { /* ... */ } -] + { + /* ... */ + }, +]; ``` By default, dataviews would use each record's `id` as an unique identifier. If it's not, the consumer should provide a `getItemId` function that returns one. @@ -125,8 +126,8 @@ Each field is an object with the following properties: - `enableSorting`: whether the data can be sorted by the given field. True by default. - `enableHiding`: whether the field can be hidden. True by default. - `filterBy`: configuration for the filters. - - `operators`: the list of operators supported by the field. - - `isPrimary`: whether it is a primary filter. A primary filter is always visible and is not listed in the "Add filter" component, except for the list layout where it behaves like a secondary filter. + - `operators`: the list of operators supported by the field. + - `isPrimary`: whether it is a primary filter. A primary filter is always visible and is not listed in the "Add filter" component, except for the list layout where it behaves like a secondary filter. ### `view`: `object` @@ -140,7 +141,7 @@ const view = { search: '', filters: [ { field: 'author', operator: 'is', value: 2 }, - { field: 'status', operator: 'isAny', value: [ 'publish', 'draft'] } + { field: 'status', operator: 'isAny', value: [ 'publish', 'draft' ] }, ], page: 1, perPage: 5, @@ -150,7 +151,7 @@ const view = { }, hiddenFields: [ 'date', 'featured-image' ], layout: {}, -} +}; ``` Properties: @@ -164,8 +165,8 @@ Properties: - `perPage`: number of records to show per page. - `page`: the page that is visible. - `sort`: - - `field`: the field used for sorting the dataset. - - `direction`: the direction to use for sorting, one of `asc` or `desc`. + - `field`: the field used for sorting the dataset. + - `direction`: the direction to use for sorting, one of `asc` or `desc`. - `hiddenFields`: the `id` of the fields that are hidden in the UI. - `layout`: config that is specific to a particular layout type. - `mediaField`: used by the `grid` and `list` layouts. The `id` of the field to be used for rendering each card's media. @@ -192,7 +193,11 @@ function MyCustomPageTable() { search: '', filters: [ { field: 'author', operator: 'is', value: 2 }, - { field: 'status', operator: 'isAny', value: [ 'publish', 'draft' ] } + { + field: 'status', + operator: 'isAny', + value: [ 'publish', 'draft' ], + }, ], hiddenFields: [ 'date', 'featured-image' ], layout: {}, @@ -219,9 +224,7 @@ function MyCustomPageTable() { }; }, [ view ] ); - const { - records - } = useEntityRecords( 'postType', 'page', queryArgs ); + const { records } = useEntityRecords( 'postType', 'page', queryArgs ); return ( =12" + "node": ">=18.12.0", + "npm": ">=8.19.2" }, "main": "build/index.js", "module": "build-module/index.js", @@ -29,13 +30,11 @@ "dependencies": { "@ariakit/react": "^0.3.12", "@babel/runtime": "^7.16.0", - "@wordpress/a11y": "file:../a11y", "@wordpress/components": "file:../components", "@wordpress/compose": "file:../compose", "@wordpress/element": "file:../element", "@wordpress/i18n": "file:../i18n", "@wordpress/icons": "file:../icons", - "@wordpress/keycodes": "file:../keycodes", "@wordpress/primitives": "file:../primitives", "@wordpress/private-apis": "file:../private-apis", "clsx": "^2.1.1", diff --git a/packages/dataviews/src/add-filter.js b/packages/dataviews/src/add-filter.tsx similarity index 79% rename from packages/dataviews/src/add-filter.js rename to packages/dataviews/src/add-filter.tsx index 37c057201a6164..b9fc6e9c504c87 100644 --- a/packages/dataviews/src/add-filter.js +++ b/packages/dataviews/src/add-filter.tsx @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import type { Ref } from 'react'; + /** * WordPress dependencies */ @@ -12,6 +17,7 @@ import { forwardRef } from '@wordpress/element'; * Internal dependencies */ import { unlock } from './lock-unlock'; +import type { NormalizedFilter, View } from './types'; const { DropdownMenuV2: DropdownMenu, @@ -19,7 +25,17 @@ const { DropdownMenuItemLabelV2: DropdownMenuItemLabel, } = unlock( componentsPrivateApis ); -function AddFilter( { filters, view, onChangeView, setOpenedFilter }, ref ) { +interface AddFilterProps { + filters: NormalizedFilter[]; + view: View; + onChangeView: ( view: View ) => void; + setOpenedFilter: ( filter: string | null ) => void; +} + +function AddFilter( + { filters, view, onChangeView, setOpenedFilter }: AddFilterProps, + ref: Ref< HTMLButtonElement > +) { if ( ! filters.length || filters.every( ( { isPrimary } ) => isPrimary ) ) { return null; } diff --git a/packages/dataviews/src/bulk-actions-toolbar.tsx b/packages/dataviews/src/bulk-actions-toolbar.tsx index e7c4a23ff758c9..3cce31c5139047 100644 --- a/packages/dataviews/src/bulk-actions-toolbar.tsx +++ b/packages/dataviews/src/bulk-actions-toolbar.tsx @@ -31,14 +31,14 @@ interface ToolbarContentProps< Item extends AnyItem > { selection: string[]; actionsToShow: Action< Item >[]; selectedItems: Item[]; - setSelection: ( selection: Item[] ) => void; + onSelectionChange: ( selection: Item[] ) => void; } interface BulkActionsToolbarProps< Item extends AnyItem > { data: Item[]; selection: string[]; actions: Action< Item >[]; - setSelection: ( selection: Item[] ) => void; + onSelectionChange: ( selection: Item[] ) => void; getItemId: ( item: Item ) => string; } @@ -65,11 +65,14 @@ function ActionTrigger< Item extends AnyItem >( { action, onClick, isBusy, + items, }: ActionTriggerProps< Item > ) { + const label = + typeof action.label === 'string' ? action.label : action.label( items ); return ( ( { setActionInProgress( action.id ); action.callback( selectedItems ); } } + items={ selectedEligibleItems } isBusy={ actionInProgress === action.id } /> ); @@ -123,7 +127,7 @@ function renderToolbarContent< Item extends AnyItem >( selectedItems: Item[], actionInProgress: string | null, setActionInProgress: ( actionId: string | null ) => void, - setSelection: ( selection: Item[] ) => void + onSelectionChange: ( selection: Item[] ) => void ) { return ( <> @@ -163,7 +167,7 @@ function renderToolbarContent< Item extends AnyItem >( label={ __( 'Cancel' ) } disabled={ !! actionInProgress } onClick={ () => { - setSelection( EMPTY_ARRAY ); + onSelectionChange( EMPTY_ARRAY ); } } /> @@ -175,7 +179,7 @@ function ToolbarContent< Item extends AnyItem >( { selection, actionsToShow, selectedItems, - setSelection, + onSelectionChange, }: ToolbarContentProps< Item > ) { const [ actionInProgress, setActionInProgress ] = useState< string | null >( null @@ -191,7 +195,7 @@ function ToolbarContent< Item extends AnyItem >( { selectedItems, actionInProgress, setActionInProgress, - setSelection + onSelectionChange ); } else if ( ! buttons.current ) { buttons.current = renderToolbarContent( @@ -200,7 +204,7 @@ function ToolbarContent< Item extends AnyItem >( { selectedItems, actionInProgress, setActionInProgress, - setSelection + onSelectionChange ); } return buttons.current; @@ -210,7 +214,7 @@ export default function BulkActionsToolbar< Item extends AnyItem >( { data, selection, actions = EMPTY_ARRAY, - setSelection, + onSelectionChange, getItemId, }: BulkActionsToolbarProps< Item > ) { const isReducedMotion = useReducedMotion(); @@ -246,9 +250,9 @@ export default function BulkActionsToolbar< Item extends AnyItem >( { @@ -258,7 +262,7 @@ export default function BulkActionsToolbar< Item extends AnyItem >( { selection={ selection } actionsToShow={ actionsToShow } selectedItems={ selectedItems } - setSelection={ setSelection } + onSelectionChange={ onSelectionChange } />
Lorem ipsum dolor sit amet, consectetur adipiscingelit.
## Mixed Lists