From ae9db95750145767ef662e82a591992b5b1b5169 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Thu, 24 Oct 2024 22:34:56 +0900 Subject: [PATCH 01/19] Global Styles: Fix React Compiler variable mutation error (#66410) Co-authored-by: Mamaduka Co-authored-by: tyxla --- .../components/global-styles/shadows-edit-panel.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/shadows-edit-panel.js b/packages/edit-site/src/components/global-styles/shadows-edit-panel.js index af5f3445a5119..7321e927fbbae 100644 --- a/packages/edit-site/src/components/global-styles/shadows-edit-panel.js +++ b/packages/edit-site/src/components/global-styles/shadows-edit-panel.js @@ -301,18 +301,17 @@ function ShadowEditor( { shadow, onChange } ) { const shadowParts = useMemo( () => getShadowParts( shadow ), [ shadow ] ); const onChangeShadowPart = ( index, part ) => { - shadowParts[ index ] = part; - onChange( shadowParts.join( ', ' ) ); + const newShadowParts = [ ...shadowParts ]; + newShadowParts[ index ] = part; + onChange( newShadowParts.join( ', ' ) ); }; const onAddShadowPart = () => { - shadowParts.push( defaultShadow ); - onChange( shadowParts.join( ', ' ) ); + onChange( [ ...shadowParts, defaultShadow ].join( ', ' ) ); }; const onRemoveShadowPart = ( index ) => { - shadowParts.splice( index, 1 ); - onChange( shadowParts.join( ', ' ) ); + onChange( shadowParts.filter( ( p, i ) => i !== index ).join( ', ' ) ); }; return ( From 27b1d9d3a94ace5fe0a3fe4184feb490c788e899 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Thu, 24 Oct 2024 22:36:49 +0800 Subject: [PATCH 02/19] Zoom Out: Fix bouncy drop zones (#66399) * Also consider child elements of insertion point in `isInsertionPoint` function * Also disable the root block list when in zoom out mode * Consider situations where the sectionRoot is also the root * Update comment Co-authored-by: Dave Smith * Fix lint --------- Co-authored-by: talldan Co-authored-by: getdave Co-authored-by: annezazu Co-authored-by: ndiego Co-authored-by: richtabor Co-authored-by: colorful-tones Co-authored-by: stokesman --- .../src/components/inner-blocks/index.js | 14 ++++++++++---- .../src/components/use-block-drop-zone/index.js | 2 +- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js index e79c188018cb5..ae58772027820 100644 --- a/packages/block-editor/src/components/inner-blocks/index.js +++ b/packages/block-editor/src/components/inner-blocks/index.js @@ -202,10 +202,17 @@ export function useInnerBlocksProps( props = {}, options = {} ) { getBlockSettings, getSectionRootClientId, } = unlock( select( blockEditorStore ) ); - let _isDropZoneDisabled; if ( ! clientId ) { - return { isDropZoneDisabled: _isDropZoneDisabled }; + const sectionRootClientId = getSectionRootClientId(); + // Disable the root drop zone when zoomed out and the section root client id + // is not the root block list (represented by an empty string). + // This avoids drag handling bugs caused by having two block lists acting as + // drop zones - the actual 'root' block list and the section root. + return { + isDropZoneDisabled: + isZoomOut() && sectionRootClientId !== '', + }; } const { hasBlockSupport, getBlockType } = select( blocksStore ); @@ -214,14 +221,13 @@ export function useInnerBlocksProps( props = {}, options = {} ) { const parentClientId = getBlockRootClientId( clientId ); const [ defaultLayout ] = getBlockSettings( clientId, 'layout' ); - _isDropZoneDisabled = blockEditingMode === 'disabled'; + let _isDropZoneDisabled = blockEditingMode === 'disabled'; if ( isZoomOut() ) { // In zoom out mode, we want to disable the drop zone for the sections. // The inner blocks belonging to the section drop zone is // already disabled by the blocks themselves being disabled. const sectionRootClientId = getSectionRootClientId(); - _isDropZoneDisabled = clientId !== sectionRootClientId; } diff --git a/packages/block-editor/src/components/use-block-drop-zone/index.js b/packages/block-editor/src/components/use-block-drop-zone/index.js index 64424178461bc..2a3e4948d40b3 100644 --- a/packages/block-editor/src/components/use-block-drop-zone/index.js +++ b/packages/block-editor/src/components/use-block-drop-zone/index.js @@ -287,7 +287,7 @@ function isInsertionPoint( targetToCheck, ownerDocument ) { return !! ( defaultView && targetToCheck instanceof defaultView.HTMLElement && - targetToCheck.dataset.isInsertionPoint + targetToCheck.closest( '[data-is-insertion-point]' ) ); } From a712932fe11e885cb392365ca623a9e337e8e4da Mon Sep 17 00:00:00 2001 From: Nick Diego Date: Thu, 24 Oct 2024 10:31:31 -0500 Subject: [PATCH 03/19] Remove meetings (#66421) Co-authored-by: ndiego Co-authored-by: fabiankaegy Co-authored-by: carolinan --- docs/contributors/code/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/contributors/code/README.md b/docs/contributors/code/README.md index 848aa8bc26bbd..4c965e69dbcef 100644 --- a/docs/contributors/code/README.md +++ b/docs/contributors/code/README.md @@ -4,13 +4,13 @@ A guide on how to get started contributing code to the Gutenberg project. ## Discussions -The [Make WordPress Core blog](https://make.wordpress.org/core/) is the primary spot for the latest information around WordPress development: including announcements, product goals, meeting notes, meeting agendas, and more. +The [Make WordPress Core blog](https://make.wordpress.org/core/) is the primary spot for the latest information around WordPress development, including announcements, product goals, meeting notes, meeting agendas, and more. -Real-time discussions for development take place in `#core-editor` and `#core-js` channels in [Make WordPress Slack](https://make.wordpress.org/chat) (registration required). Weekly meetings for the editor component are on Wednesdays at 14:00UTC, and for the JavaScript component on Tuesday at 15:00UTC, in their respective Slack channels. +Development discussions take place in real-time in the `#core-editor` and `#core-js` channels in [Make WordPress Slack](https://make.wordpress.org/chat) (registration required). ## Development Hub -The Gutenberg project uses GitHub for managing code and tracking issues. The main repository is at: [https://github.com/WordPress/gutenberg](https://github.com/WordPress/gutenberg). +The Gutenberg project uses GitHub to manage code and track issues. The main repository is at: [https://github.com/WordPress/gutenberg](https://github.com/WordPress/gutenberg). Browse [the issues list](https://github.com/wordpress/gutenberg/issues) to find issues to work on. The [good first issue](https://github.com/wordpress/gutenberg/issues?q=is%3Aopen+is%3Aissue+label%3A%22Good+First+Issue%22) and [good first review](https://github.com/WordPress/gutenberg/pulls?q=is%3Aopen+is%3Apr+label%3A%22Good+First+Review%22) labels are good starting points. From d2ba0dc79c9c3f9daf0a087a9425202a3d0d1420 Mon Sep 17 00:00:00 2001 From: Ella <4710635+ellatrix@users.noreply.github.com> Date: Thu, 24 Oct 2024 20:44:26 +0200 Subject: [PATCH 04/19] Site editor: remove "default" admin CSS (#66431) --- backport-changelog/6.8/7642.md | 3 +++ lib/compat/wordpress-6.8/remove-default-css.php | 11 +++++++++++ lib/load.php | 1 + 3 files changed, 15 insertions(+) create mode 100644 backport-changelog/6.8/7642.md create mode 100644 lib/compat/wordpress-6.8/remove-default-css.php diff --git a/backport-changelog/6.8/7642.md b/backport-changelog/6.8/7642.md new file mode 100644 index 0000000000000..f00d4a5473aac --- /dev/null +++ b/backport-changelog/6.8/7642.md @@ -0,0 +1,3 @@ +https://github.com/WordPress/wordpress-develop/pull/7642 + +* https://github.com/WordPress/gutenberg/pull/66431 \ No newline at end of file diff --git a/lib/compat/wordpress-6.8/remove-default-css.php b/lib/compat/wordpress-6.8/remove-default-css.php new file mode 100644 index 0000000000000..1076d84f29921 --- /dev/null +++ b/lib/compat/wordpress-6.8/remove-default-css.php @@ -0,0 +1,11 @@ + Date: Fri, 25 Oct 2024 11:26:29 +0900 Subject: [PATCH 05/19] Fix: JSON Schema Docgen doesn't work on Windows OS (#66414) * Fix: JSON Schema Docgen doesn't work on Windows OS * Update bin/api-docs/gen-theme-reference.mjs Co-authored-by: Jon Surrell * Lint --------- Co-authored-by: t-hamano Co-authored-by: sirreal --- bin/api-docs/gen-theme-reference.mjs | 29 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 15 deletions(-) diff --git a/bin/api-docs/gen-theme-reference.mjs b/bin/api-docs/gen-theme-reference.mjs index 6dc7791e288b9..f50d194c17ee7 100644 --- a/bin/api-docs/gen-theme-reference.mjs +++ b/bin/api-docs/gen-theme-reference.mjs @@ -9,6 +9,7 @@ */ import fs from 'node:fs/promises'; import $RefParser from '@apidevtools/json-schema-ref-parser'; +import { fileURLToPath } from 'node:url'; /** * @typedef {import('@apidevtools/json-schema-ref-parser').JSONSchema} JSONSchema @@ -19,9 +20,8 @@ import $RefParser from '@apidevtools/json-schema-ref-parser'; * * @type {URL} */ -const THEME_JSON_SCHEMA_URL = new URL( - '../../schemas/json/theme.json', - import.meta.url +const THEME_JSON_SCHEMA_PATH = fileURLToPath( + new URL( '../../schemas/json/theme.json', import.meta.url ) ); /** @@ -29,9 +29,11 @@ const THEME_JSON_SCHEMA_URL = new URL( * * @type {URL} */ -const REFERENCE_DOC_URL = new URL( - '../../docs/reference-guides/theme-json-reference/theme-json-living.md', - import.meta.url +const REFERENCE_DOC_PATH = fileURLToPath( + new URL( + '../../docs/reference-guides/theme-json-reference/theme-json-living.md', + import.meta.url + ) ); /** @@ -265,15 +267,12 @@ function generateDocs( themeJson ) { * Main function. */ async function main() { - const themeJson = await $RefParser.dereference( - THEME_JSON_SCHEMA_URL.pathname, - { - parse: { binary: false, text: false, yaml: false }, - resolve: { external: false }, - } - ); + const themeJson = await $RefParser.dereference( THEME_JSON_SCHEMA_PATH, { + parse: { binary: false, text: false, yaml: false }, + resolve: { external: false }, + } ); - const themeJsonReference = await fs.readFile( REFERENCE_DOC_URL, { + const themeJsonReference = await fs.readFile( REFERENCE_DOC_PATH, { encoding: 'utf8', flag: 'r', } ); @@ -285,7 +284,7 @@ async function main() { `${ START_TOKEN }\n${ generatedDocs }\n${ END_TOKEN }` ); - await fs.writeFile( REFERENCE_DOC_URL, updatedThemeJsonReference, { + await fs.writeFile( REFERENCE_DOC_PATH, updatedThemeJsonReference, { encoding: 'utf8', } ); } From 268b0fe815bc8ad6861a9e3579e4bebf56fddc56 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Thu, 24 Oct 2024 19:33:52 -0700 Subject: [PATCH 06/19] Revise zoom layout shift fix (#66390) * Contain margins with BFC instead of border * Move to block canvas styles in the visual editor --------- Co-authored-by: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Co-authored-by: stokesman Co-authored-by: andrewserong Co-authored-by: ramonjd Co-authored-by: t-hamano --- packages/block-editor/src/components/iframe/content.scss | 1 - packages/editor/src/components/visual-editor/index.js | 5 ++++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss index 1d01f84b5fd1f..596c177eab2f3 100644 --- a/packages/block-editor/src/components/iframe/content.scss +++ b/packages/block-editor/src/components/iframe/content.scss @@ -1,6 +1,5 @@ .block-editor-iframe__body { position: relative; - border: 0.01px solid transparent; } .block-editor-iframe__html { diff --git a/packages/editor/src/components/visual-editor/index.js b/packages/editor/src/components/visual-editor/index.js index 133057d9f388f..1c8eb5c3b7764 100644 --- a/packages/editor/src/components/visual-editor/index.js +++ b/packages/editor/src/components/visual-editor/index.js @@ -356,7 +356,10 @@ function VisualEditor( { return [ ...( styles ?? [] ), { - css: `.is-root-container{display:flow-root;${ + // Ensures margins of children are contained so that the body background paints behind them. + // Otherwise, the background of html (when zoomed out) would show there and appear broken. It’s + // important mostly for post-only views yet conceivably an issue in templated views too. + css: `:where(.block-editor-iframe__body){display:flow-root;}.is-root-container{display:flow-root;${ // Some themes will have `min-height: 100vh` for the root container, // which isn't a requirement in auto resize mode. enableResizing ? 'min-height:0!important;' : '' From 5b303212752f1419851b09cdf6bbb02efa47e5eb Mon Sep 17 00:00:00 2001 From: Nik Tsekouras Date: Fri, 25 Oct 2024 09:34:20 +0300 Subject: [PATCH 07/19] Zoom out: Add keyboard shortcut in editor (#66400) Co-authored-by: ntsekouras Co-authored-by: Mamaduka Co-authored-by: t-hamano Co-authored-by: youknowriad Co-authored-by: stokesman --- .../src/components/zoom-out-toggle/index.js | 32 ++++++++++++++++++- 1 file changed, 31 insertions(+), 1 deletion(-) diff --git a/packages/editor/src/components/zoom-out-toggle/index.js b/packages/editor/src/components/zoom-out-toggle/index.js index 619cc06c689c0..81506add699c9 100644 --- a/packages/editor/src/components/zoom-out-toggle/index.js +++ b/packages/editor/src/components/zoom-out-toggle/index.js @@ -3,11 +3,15 @@ */ import { Button } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; - +import { useEffect } from '@wordpress/element'; import { useDispatch, useSelect } from '@wordpress/data'; import { store as blockEditorStore } from '@wordpress/block-editor'; import { square as zoomOutIcon } from '@wordpress/icons'; import { store as preferencesStore } from '@wordpress/preferences'; +import { + useShortcut, + store as keyboardShortcutsStore, +} from '@wordpress/keyboard-shortcuts'; /** * Internal dependencies @@ -26,6 +30,32 @@ const ZoomOutToggle = ( { disabled } ) => { const { resetZoomLevel, setZoomLevel } = unlock( useDispatch( blockEditorStore ) ); + const { registerShortcut, unregisterShortcut } = useDispatch( + keyboardShortcutsStore + ); + + useEffect( () => { + registerShortcut( { + name: 'core/editor/zoom', + category: 'global', + description: __( 'Enter or exit zoom out.' ), + keyCombination: { + modifier: 'primaryShift', + character: '0', + }, + } ); + return () => { + unregisterShortcut( 'core/editor/zoom' ); + }; + }, [ registerShortcut, unregisterShortcut ] ); + + useShortcut( 'core/editor/zoom', () => { + if ( isZoomOut ) { + resetZoomLevel(); + } else { + setZoomLevel( 'auto-scaled' ); + } + } ); const handleZoomOut = () => { if ( isZoomOut ) { From 8fab6ddfec7a7e5b5c051e5e23d94a71a6fcad2e Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Fri, 25 Oct 2024 12:07:01 +0400 Subject: [PATCH 08/19] Compose: Fix React Complier error for 'useCopyToClipboard' (#66444) Co-authored-by: Mamaduka Co-authored-by: youknowriad --- packages/compose/src/hooks/use-copy-to-clipboard/index.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/compose/src/hooks/use-copy-to-clipboard/index.js b/packages/compose/src/hooks/use-copy-to-clipboard/index.js index 94ab6048a4b46..fbd7b77fecc4c 100644 --- a/packages/compose/src/hooks/use-copy-to-clipboard/index.js +++ b/packages/compose/src/hooks/use-copy-to-clipboard/index.js @@ -6,7 +6,7 @@ import Clipboard from 'clipboard'; /** * WordPress dependencies */ -import { useRef } from '@wordpress/element'; +import { useRef, useLayoutEffect } from '@wordpress/element'; /** * Internal dependencies @@ -20,7 +20,9 @@ import useRefEffect from '../use-ref-effect'; */ function useUpdatedRef( value ) { const ref = useRef( value ); - ref.current = value; + useLayoutEffect( () => { + ref.current = value; + }, [ value ] ); return ref; } From 351e0926138454cc97cba89e6ff68b8856169c8b Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Fri, 25 Oct 2024 12:27:15 +0400 Subject: [PATCH 09/19] Style Book: Fix React Compiler error (#66445) Co-authored-by: Mamaduka Co-authored-by: ramonjd --- .../edit-site/src/components/style-book/index.js | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js index 93bbc6311c686..8f4023777868c 100644 --- a/packages/edit-site/src/components/style-book/index.js +++ b/packages/edit-site/src/components/style-book/index.js @@ -179,22 +179,20 @@ function StyleBook( { ( select ) => select( blockEditorStore ).getSettings(), [] ); + const [ globalStyles ] = useGlobalStylesOutputWithConfig( mergedConfig ); const settings = useMemo( () => ( { ...originalSettings, + styles: + ! isObjectEmpty( globalStyles ) && ! isObjectEmpty( userConfig ) + ? globalStyles + : originalSettings.styles, isPreviewMode: true, } ), - [ originalSettings ] + [ globalStyles, originalSettings, userConfig ] ); - const [ globalStyles ] = useGlobalStylesOutputWithConfig( mergedConfig ); - - settings.styles = - ! isObjectEmpty( globalStyles ) && ! isObjectEmpty( userConfig ) - ? globalStyles - : settings.styles; - return ( Date: Fri, 25 Oct 2024 11:12:13 +0200 Subject: [PATCH 10/19] Documenation: Update documentation about build process changes (#66428) Document recent changes to the build system that change are requirements for publishing WordPress scripts and script modules. #65064 updated the way that script modules from packages are bundled for Gutenberg and WordPress. #66272 updated the way that scripts from packages are bundled for Gutenberg and WordPress. --------- Co-authored-by: sirreal Co-authored-by: gziolo Co-authored-by: justintadlock Co-authored-by: youknowriad --- packages/README.md | 36 +++++++++++++++++++++++++++++--- packages/block-library/README.md | 15 ++++++++----- 2 files changed, 43 insertions(+), 8 deletions(-) diff --git a/packages/README.md b/packages/README.md index 27efdf2d43ad5..cc2f34e38ac05 100644 --- a/packages/README.md +++ b/packages/README.md @@ -4,10 +4,11 @@ This repository uses [npm workspaces](https://docs.npmjs.com/cli/v10/using-npm/w ## Creating a New Package -When creating a new package, you need to provide at least the following: +When creating a new package, you need to provide at least the following. Packages bundled in Gutenberg or WordPress must include a `wpScript` and or `wpScriptModuleExports` field in their `package.json` file. See the details below. 1. `package.json` based on the template: - ```json + + ```jsonc { "name": "@wordpress/package-name", "version": "1.0.0-prerelease", @@ -32,10 +33,39 @@ When creating a new package, you need to provide at least the following: }, "publishConfig": { "access": "public" - } + }, + // Include this line to include the package as a WordPress script. + "wpScript": true, + // Include this line to include the package as a WordPress script module. + "wpScriptModuleExports": "./build-module/index.js" } ``` + This assumes that your code is located in the `src` folder and will be transpiled with `Babel`. + + For packages that should ship as a WordPress script, include `wpScript: true` in the `package.json` file. This tells the build system to bundle the package for use as a WordPress script. + + For packages that should ship as a WordPress script module, include a `wpScriptModuleExports` field the `package.json` file. The value of this field can be a string to expose a single script module, or an object with a [shape like the standard `exports` object](https://nodejs.org/docs/latest-v20.x/api/packages.html#subpath-exports) to expose multiple script modules from a single package: + + ```jsonc + { + "name": "@wordpress/example", + + // The string form exposes the `@wordpress/example` script module. + "wpScriptModuleExports": "./build-module/index.js", + + // Multiple sub-modules can be exposed by providing an object: + "wpScriptModuleExports": { + // Exposed as `@wordpress/example` script module. + ".": "./build-module/index.js", + // Exposed as `@wordpress/example/demo-block/view` script module. + "./demo-block/view": "./build-module/index.js" + } + } + ``` + + Both `wpScript` and `wpScriptModuleExports` may be included if the package exposes both a script and a script module. + 1. `README.md` file containing at least: - Package name - Package description diff --git a/packages/block-library/README.md b/packages/block-library/README.md index 28cf7471ed1f1..a6d1984cda98c 100644 --- a/packages/block-library/README.md +++ b/packages/block-library/README.md @@ -98,21 +98,26 @@ To find out more about contributing to this package or Gutenberg as a whole, ple This file is used when using the option to register individual block from the `@wordpress/block-library` package. -4. If a `view.js` file (or a file prefixed with `view`, e.g. `view-example.js`) is present in the block's directory, this file will be built along other assets, making it available to load from the browser. You only need to reference a `view.min.js` (notice the different file extension) file in the `block.json` file as follows: +4. If the block exposes a script module on the front end, it must be included in the package's `package.json` file in the `wpScriptModules` object. This will include the script module when it's bundled for use in WordPress. See [the packages README for more details.](../README.md): ```json { - "viewScript": "file:./view.min.js" + "name": "@wordpress/block-library", + "wpScriptModuleExports": { + "./blinking-paragraph/view": "./build-module/blinking-paragraph/view.js", + "./image/view": "./build-module/image/view.js" + // Add any new script modules here. + } } ``` - This file will get automatically loaded when the static block is present on the front end. For dynamic block, you need to manually enqueue the view script in `render_callback` of the block, example: + For every dynamic block, you need to manually enqueue the view script module in `render_callback` of the block, example: ```php function render_block_core_blinking_paragraph( $attributes, $content ) { - $should_load_view_script = ! empty( $attributes['isInteractive'] ) && ! wp_script_is( 'wp-block-blinking-paragraph-view' ); + $should_load_view_script = ! empty( $attributes['isInteractive'] ); if ( $should_load_view_script ) { - wp_enqueue_script( 'wp-block-blinking-paragraph-view' ); + wp_enqueue_script_module( '@wordpress/block-library/blinking-paragraph' ); } return $content; From 2036d7ed957b1b83436a673824a7511cfc9ee5ba Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Fri, 25 Oct 2024 18:21:19 +0900 Subject: [PATCH 11/19] Button Block: Apply Stretch Styles Correctly (#64770) Unlinked contributors: joecsmalley. Co-authored-by: t-hamano Co-authored-by: tellthemachines Co-authored-by: jasmussen Co-authored-by: ethanclevenger91 Co-authored-by: jordesign Co-authored-by: jennydupuy --- packages/block-library/src/button/style.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss index 42306cba0c984..a8f625b95c392 100644 --- a/packages/block-library/src/button/style.scss +++ b/packages/block-library/src/button/style.scss @@ -9,6 +9,9 @@ $blocks-block__margin: 0.5em; text-align: center; word-break: break-word; // overflow-wrap doesn't work well if a link is wrapped in the div, so use word-break here. box-sizing: border-box; + height: 100%; + width: 100%; + align-content: center; &.aligncenter { text-align: center; From 22a3bf5d32452850aabcc21da327f077cd3c5bfe Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Fri, 25 Oct 2024 13:28:22 +0400 Subject: [PATCH 12/19] Style Book: Avoid state/effect combo when generating values (#66446) Co-authored-by: Mamaduka Co-authored-by: ramonjd --- .../edit-site/src/components/style-book/index.js | 15 ++------------- 1 file changed, 2 insertions(+), 13 deletions(-) diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js index 8f4023777868c..e9660323b8373 100644 --- a/packages/edit-site/src/components/style-book/index.js +++ b/packages/edit-site/src/components/style-book/index.js @@ -24,13 +24,7 @@ import { import { privateApis as editorPrivateApis } from '@wordpress/editor'; import { useSelect } from '@wordpress/data'; import { useResizeObserver } from '@wordpress/compose'; -import { - useMemo, - useState, - memo, - useContext, - useEffect, -} from '@wordpress/element'; +import { useMemo, useState, memo, useContext } from '@wordpress/element'; import { ENTER, SPACE } from '@wordpress/keycodes'; /** @@ -148,7 +142,7 @@ function StyleBook( { const [ textColor ] = useGlobalStyle( 'color.text' ); const [ backgroundColor ] = useGlobalStyle( 'color.background' ); const colors = useMultiOriginPalettes(); - const [ examples, setExamples ] = useState( () => getExamples( colors ) ); + const examples = useMemo( () => getExamples( colors ), [ colors ] ); const tabs = useMemo( () => getTopLevelStyleBookCategories().filter( ( category ) => @@ -159,11 +153,6 @@ function StyleBook( { [ examples ] ); - // Ensure color examples are kept in sync with Global Styles palette changes. - useEffect( () => { - setExamples( getExamples( colors ) ); - }, [ colors ] ); - const { base: baseConfig } = useContext( GlobalStylesContext ); const mergedConfig = useMemo( () => { From 808195d9331e18d6973ec268fa9111194e14bdf6 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Fri, 25 Oct 2024 11:54:55 +0200 Subject: [PATCH 13/19] Tabs and ToggleGroupControl: round indicator size (#66426) Co-authored-by: ciampo Co-authored-by: stokesman Co-authored-by: DaniGuardiola --- packages/components/CHANGELOG.md | 5 +++-- packages/components/src/tabs/tablist.tsx | 1 + .../toggle-group-control/component.tsx | 1 + .../src/utils/hooks/use-animated-offset-rect.ts | 14 +++++++++++++- 4 files changed, 18 insertions(+), 3 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index b149172bd1037..a3f7831e2af78 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -6,6 +6,7 @@ - `ColorPalette`: prevent overflow of custom color button background ([#66152](https://github.com/WordPress/gutenberg/pull/66152)). - `RadioGroup`: Fix arrow key navigation in RTL ([#66202](https://github.com/WordPress/gutenberg/pull/66202)). +- `Tabs` and `ToggleGroupControl`: round indicator size ([#66426](https://github.com/WordPress/gutenberg/pull/66426)). ### Enhancements @@ -40,8 +41,8 @@ - `Modal`: Modal dialog small improvement for elementShouldBeHidden ([#65941](https://github.com/WordPress/gutenberg/pull/65941)). - `Tabs`: revamped vertical orientation styles ([#65387](https://github.com/WordPress/gutenberg/pull/65387)). -- `ComboboxControl`: display `No items found` when there are no matches found ([#66142](https://github.com/WordPress/gutenberg/pull/66142)) -- `FormTokenField`: display `No items found` when there are no matches found. This occurs when the `__experimentalExpandOnFocus` prop is enabled ([#66142](https://github.com/WordPress/gutenberg/pull/66142)) +- `ComboboxControl`: display `No items found` when there are no matches found ([#66142](https://github.com/WordPress/gutenberg/pull/66142)) +- `FormTokenField`: display `No items found` when there are no matches found. This occurs when the `__experimentalExpandOnFocus` prop is enabled ([#66142](https://github.com/WordPress/gutenberg/pull/66142)) ## 28.9.0 (2024-10-03) diff --git a/packages/components/src/tabs/tablist.tsx b/packages/components/src/tabs/tablist.tsx index 181c705e7148c..2f736d6b95441 100644 --- a/packages/components/src/tabs/tablist.tsx +++ b/packages/components/src/tabs/tablist.tsx @@ -93,6 +93,7 @@ export const TabList = forwardRef< prefix: 'selected', dataAttribute: 'indicator-animated', transitionEndFilter: ( event ) => event.pseudoElement === '::before', + roundRect: true, } ); // Make sure selected tab is scrolled into view. diff --git a/packages/components/src/toggle-group-control/toggle-group-control/component.tsx b/packages/components/src/toggle-group-control/toggle-group-control/component.tsx index 0b4c22d7df929..7f384f70ae1dc 100644 --- a/packages/components/src/toggle-group-control/toggle-group-control/component.tsx +++ b/packages/components/src/toggle-group-control/toggle-group-control/component.tsx @@ -58,6 +58,7 @@ function UnconnectedToggleGroupControl( prefix: 'selected', dataAttribute: 'indicator-animated', transitionEndFilter: ( event ) => event.pseudoElement === '::before', + roundRect: true, } ); const cx = useCx(); diff --git a/packages/components/src/utils/hooks/use-animated-offset-rect.ts b/packages/components/src/utils/hooks/use-animated-offset-rect.ts index 4056089738fe9..35e2a54aa02f2 100644 --- a/packages/components/src/utils/hooks/use-animated-offset-rect.ts +++ b/packages/components/src/utils/hooks/use-animated-offset-rect.ts @@ -46,6 +46,7 @@ export function useAnimatedOffsetRect( prefix = 'subelement', dataAttribute = `${ prefix }-animated`, transitionEndFilter = () => true, + roundRect = false, }: { /** * The prefix used for the CSS variables, e.g. if `prefix` is `selected`, the @@ -72,6 +73,13 @@ export function useAnimatedOffsetRect( * @default () => true */ transitionEndFilter?: ( event: TransitionEvent ) => boolean; + /** + * Whether the `rect` measurements should be rounded down when applied + * to the CSS variables. This can be useful to avoid blurry animations or + * to avoid subpixel rendering issues. + * @default false + */ + roundRect?: boolean; } = {} ) { const setProperties = useEvent( () => { @@ -80,7 +88,11 @@ export function useAnimatedOffsetRect( property !== 'element' && container?.style.setProperty( `--${ prefix }-${ property }`, - String( rect[ property ] ) + String( + roundRect + ? Math.floor( rect[ property ] ) + : rect[ property ] + ) ) ); } ); From 51437a90ad2b4cc715c6ff5806e88176965dfe46 Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Fri, 25 Oct 2024 19:11:46 +0900 Subject: [PATCH 14/19] HTML Block: Force HTML preview in view mode (#66440) Co-authored-by: t-hamano Co-authored-by: Mamaduka Co-authored-by: youknowriad Co-authored-by: ndiego Co-authored-by: talldan --- packages/block-library/src/html/edit.js | 8 +++++++- packages/block-library/src/html/preview.js | 5 +++-- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/html/edit.js b/packages/block-library/src/html/edit.js index 5c57d73ae40f6..9a1972d54b7e6 100644 --- a/packages/block-library/src/html/edit.js +++ b/packages/block-library/src/html/edit.js @@ -7,6 +7,7 @@ import { BlockControls, PlainText, useBlockProps, + store as blockEditorStore, } from '@wordpress/block-editor'; import { ToolbarButton, @@ -14,6 +15,7 @@ import { ToolbarGroup, VisuallyHidden, } from '@wordpress/components'; +import { useSelect } from '@wordpress/data'; import { useInstanceId } from '@wordpress/compose'; /** @@ -27,6 +29,10 @@ export default function HTMLEdit( { attributes, setAttributes, isSelected } ) { const instanceId = useInstanceId( HTMLEdit, 'html-edit-desc' ); + const isPreviewMode = useSelect( ( select ) => { + return select( blockEditorStore ).getSettings().isPreviewMode; + }, [] ); + function switchToPreview() { setIsPreview( true ); } @@ -58,7 +64,7 @@ export default function HTMLEdit( { attributes, setAttributes, isSelected } ) { - { isPreview || isDisabled ? ( + { isPreview || isPreviewMode || isDisabled ? ( <> select( blockEditorStore ).getSettings().styles + ( select ) => select( blockEditorStore ).getSettings().styles, + [] ); const styles = useMemo( () => [ DEFAULT_STYLES, ...transformStyles( - settingStyles.filter( ( style ) => style.css ) + ( settingStyles ?? [] ).filter( ( style ) => style.css ) ), ], [ settingStyles ] From 56e011b31ff2e44b5a2df36a3fadfda4a5f7f19f Mon Sep 17 00:00:00 2001 From: Marin Atanasov <8436925+tyxla@users.noreply.github.com> Date: Fri, 25 Oct 2024 13:13:31 +0300 Subject: [PATCH 15/19] ESLint: Stop disabling `react-hooks/exhaustive-deps` rule (#66324) * ESLint: Stop disabling react-hooks/exhaustive-deps rule * CHANGELOG * Add ref to dependencies * Retain some context in comments Co-authored-by: tyxla Co-authored-by: ciampo Co-authored-by: Mamaduka --- .eslintrc.js | 12 ---------- packages/components/CHANGELOG.md | 4 ++++ .../autocomplete/autocompleter-ui.native.js | 6 ++--- .../src/autocomplete/autocompleter-ui.tsx | 8 ++----- .../components/src/autocomplete/index.tsx | 3 +-- .../src/color-palette/index.native.js | 3 +-- .../src/color-picker/index.native.js | 1 - .../components/src/date-time/date/index.tsx | 1 - .../components/src/form-token-field/index.tsx | 3 --- .../navigation-screen.native.js | 8 +++---- .../bottom-sheet/sub-sheet/index.native.js | 4 +--- .../src/mobile/color-settings/index.native.js | 4 +--- .../color-settings/picker-screen.native.js | 4 +--- .../src/mobile/image/index.native.js | 4 +--- .../keyboard-avoiding-view/index.ios.js | 4 +--- .../link-picker/link-picker-results.native.js | 7 ++---- .../link-picker/link-picker-screen.native.js | 4 +--- .../src/mobile/link-settings/index.native.js | 24 +++++-------------- .../link-settings-screen.native.js | 4 +--- .../mobile/segmented-control/index.native.js | 8 ++----- .../use-unit-converter-to-mobile.native.js | 8 ++----- packages/components/src/navigation/index.tsx | 3 +-- .../item/use-navigation-tree-item.tsx | 4 ++-- .../src/navigation/menu/menu-title-search.tsx | 4 ++-- .../menu/use-navigation-tree-menu.tsx | 4 ++-- .../components/src/sandbox/index.native.js | 4 +--- packages/components/src/sandbox/index.tsx | 9 +++---- .../src/search-control/index.native.js | 4 +--- .../src/slot-fill/bubbles-virtually/slot.tsx | 3 +-- packages/components/src/slot-fill/fill.ts | 9 +++---- .../src/tools-panel/tools-panel-item/hook.ts | 2 -- .../components/src/tooltip/index.native.js | 20 ++++------------ .../src/unit-control/index.native.js | 8 ++----- packages/components/src/utils/element-rect.ts | 1 - .../src/utils/hooks/use-update-effect.js | 2 -- 35 files changed, 55 insertions(+), 146 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 211ddd9bc3586..dfe779b468352 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -356,18 +356,6 @@ module.exports = { ], }, }, - { - files: [ - // Components package. - 'packages/components/src/**/*.[tj]s?(x)', - // Navigation block. - 'packages/block-library/src/navigation/**/*.[tj]s?(x)', - ], - excludedFiles: [ ...developmentFiles ], - rules: { - 'react-hooks/exhaustive-deps': 'error', - }, - }, { files: [ 'packages/jest*/**/*.js', '**/test/**/*.js' ], excludedFiles: [ 'test/e2e/**/*.js', 'test/performance/**/*.js' ], diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index a3f7831e2af78..2025a550d55e0 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -21,6 +21,10 @@ - `Tabs` and `TabPanel`: Fix arrow key navigation in RTL ([#66201](https://github.com/WordPress/gutenberg/pull/66201)). - `Tabs`: override tablist's tabindex only when necessary ([#66209](https://github.com/WordPress/gutenberg/pull/66209)). +### Internal + +- ESLint: Stop disabling `react-hooks/exhaustive-deps` rule ([#66324](https://github.com/WordPress/gutenberg/pull/66324)). + ## 28.10.0 (2024-10-16) ### Bug Fixes diff --git a/packages/components/src/autocomplete/autocompleter-ui.native.js b/packages/components/src/autocomplete/autocompleter-ui.native.js index 1400c78e518d7..daf4fe301abf7 100644 --- a/packages/components/src/autocomplete/autocompleter-ui.native.js +++ b/packages/components/src/autocomplete/autocompleter-ui.native.js @@ -69,9 +69,8 @@ export function getAutoCompleterUI( autocompleter ) { } else if ( isVisible && text.length === 0 ) { startAnimation( false ); } - // Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst. + // We want to avoid introducing unexpected side effects. // See https://github.com/WordPress/gutenberg/pull/41820 - // eslint-disable-next-line react-hooks/exhaustive-deps }, [ items, isVisible, text ] ); const activeItemStyles = usePreferredColorSchemeStyle( @@ -112,9 +111,8 @@ export function getAutoCompleterUI( autocompleter ) { } } ); }, - // Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst. + // We want to avoid introducing unexpected side effects. // See https://github.com/WordPress/gutenberg/pull/41820 - // eslint-disable-next-line react-hooks/exhaustive-deps [ isVisible ] ); diff --git a/packages/components/src/autocomplete/autocompleter-ui.tsx b/packages/components/src/autocomplete/autocompleter-ui.tsx index c6c1b94deb577..69105f6c9d3b4 100644 --- a/packages/components/src/autocomplete/autocompleter-ui.tsx +++ b/packages/components/src/autocomplete/autocompleter-ui.tsx @@ -165,9 +165,8 @@ export function getAutoCompleterUI( autocompleter: WPCompleter ) { useLayoutEffect( () => { onChangeOptions( items ); announce( items ); - // Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst. + // We want to avoid introducing unexpected side effects. // See https://github.com/WordPress/gutenberg/pull/41820 - // eslint-disable-next-line react-hooks/exhaustive-deps }, [ items ] ); if ( items.length === 0 ) { @@ -235,8 +234,5 @@ function useOnClickOutside( document.removeEventListener( 'mousedown', listener ); document.removeEventListener( 'touchstart', listener ); }; - // Disable reason: `ref` is a ref object and should not be included in a - // hook's dependency list. - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [ handler ] ); + }, [ handler, ref ] ); } diff --git a/packages/components/src/autocomplete/index.tsx b/packages/components/src/autocomplete/index.tsx index ad930d3affdd1..f3278a46015c3 100644 --- a/packages/components/src/autocomplete/index.tsx +++ b/packages/components/src/autocomplete/index.tsx @@ -380,9 +380,8 @@ export function useAutocomplete( { : AutocompleterUI ); setFilterValue( query === null ? '' : query ); - // Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst. + // We want to avoid introducing unexpected side effects. // See https://github.com/WordPress/gutenberg/pull/41820 - // eslint-disable-next-line react-hooks/exhaustive-deps }, [ textContent ] ); const { key: selectedKey = '' } = filteredOptions[ selectedIndex ] || {}; diff --git a/packages/components/src/color-palette/index.native.js b/packages/components/src/color-palette/index.native.js index bb45de6d66e88..ab86cd6f05f12 100644 --- a/packages/components/src/color-palette/index.native.js +++ b/packages/components/src/color-palette/index.native.js @@ -115,9 +115,8 @@ function ColorPalette( { scrollViewRef.current.scrollTo( { x: 0, y: 0 } ); } } - // Temporarily disabling exhuastive-deps until the component can be refactored and updated safely. + // Not adding additional dependencies until the component can be refactored and updated safely. // Please see https://github.com/WordPress/gutenberg/pull/41253 for discussion and details. - // eslint-disable-next-line react-hooks/exhaustive-deps }, [ currentSegment ] ); function isSelectedCustom() { diff --git a/packages/components/src/color-picker/index.native.js b/packages/components/src/color-picker/index.native.js index 46059a58520ba..302de6b7d79b8 100644 --- a/packages/components/src/color-picker/index.native.js +++ b/packages/components/src/color-picker/index.native.js @@ -111,7 +111,6 @@ function ColorPicker( { // the hook’s dependencies and running it a single time. Ideally there // may be a way to refactor and obviate the disabled lint rule. If not, // this comment should be replaced by one that explains the reasoning. - // eslint-disable-next-line react-hooks/exhaustive-deps }, [] ); function onButtonPress( action ) { diff --git a/packages/components/src/date-time/date/index.tsx b/packages/components/src/date-time/date/index.tsx index 5a565ee38cec5..ca093f9d70847 100644 --- a/packages/components/src/date-time/date/index.tsx +++ b/packages/components/src/date-time/date/index.tsx @@ -302,7 +302,6 @@ function Day( { } // isFocusAllowed is not a dep as there is no point calling focus() on // an already focused element. - // eslint-disable-next-line react-hooks/exhaustive-deps }, [ isFocusable ] ); return ( diff --git a/packages/components/src/form-token-field/index.tsx b/packages/components/src/form-token-field/index.tsx index 9f05dfee008da..4f2f325e409a7 100644 --- a/packages/components/src/form-token-field/index.tsx +++ b/packages/components/src/form-token-field/index.tsx @@ -124,17 +124,14 @@ export function FormTokenField( props: FormTokenFieldProps ) { } // TODO: updateSuggestions() should first be refactored so its actual deps are clearer. - // eslint-disable-next-line react-hooks/exhaustive-deps }, [ suggestions, prevSuggestions, value, prevValue ] ); useEffect( () => { updateSuggestions(); - // eslint-disable-next-line react-hooks/exhaustive-deps }, [ incompleteTokenValue ] ); useEffect( () => { updateSuggestions(); - // eslint-disable-next-line react-hooks/exhaustive-deps }, [ __experimentalAutoSelectFirstMatch ] ); if ( disabled && isActive ) { diff --git a/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js b/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js index d5defc14dd475..8c43bc8561276 100644 --- a/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js +++ b/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js @@ -71,9 +71,9 @@ const BottomSheetNavigationScreen = ( { * callbacks triggered based upon which screen is currently active. * * Related: https://github.com/WordPress/gutenberg/pull/36328#discussion_r768897546 + * + * Also see https://github.com/WordPress/gutenberg/pull/41166. */ - // see https://github.com/WordPress/gutenberg/pull/41166 - // eslint-disable-next-line react-hooks/exhaustive-deps }, [] ) ); @@ -130,9 +130,7 @@ const BottomSheetNavigationScreen = ( { ); - // Disable reason: deferring this refactor to the native team. - // see https://github.com/WordPress/gutenberg/pull/41166 - // eslint-disable-next-line react-hooks/exhaustive-deps + // See https://github.com/WordPress/gutenberg/pull/41166 }, [ children, isFocused, diff --git a/packages/components/src/mobile/bottom-sheet/sub-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/sub-sheet/index.native.js index d46b10cfb560f..14040be0cc239 100644 --- a/packages/components/src/mobile/bottom-sheet/sub-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/sub-sheet/index.native.js @@ -28,9 +28,7 @@ const BottomSheetSubSheet = ( { if ( showSheet ) { setIsFullScreen( isFullScreen ); } - // Disable reason: deferring this refactor to the native team. - // see https://github.com/WordPress/gutenberg/pull/41166 - // eslint-disable-next-line react-hooks/exhaustive-deps + // See https://github.com/WordPress/gutenberg/pull/41166 }, [ showSheet, isFullScreen ] ); return ( diff --git a/packages/components/src/mobile/color-settings/index.native.js b/packages/components/src/mobile/color-settings/index.native.js index 10cf776ed808c..c7956df0e935d 100644 --- a/packages/components/src/mobile/color-settings/index.native.js +++ b/packages/components/src/mobile/color-settings/index.native.js @@ -35,9 +35,7 @@ const ColorSettingsMemo = memo( useEffect( () => { shouldEnableBottomSheetMaxHeight( true ); onHandleClosingBottomSheet( null ); - // Disable reason: deferring this refactor to the native team. - // see https://github.com/WordPress/gutenberg/pull/41166 - // eslint-disable-next-line react-hooks/exhaustive-deps + // See https://github.com/WordPress/gutenberg/pull/41166 }, [] ); return ( diff --git a/packages/components/src/mobile/color-settings/picker-screen.native.js b/packages/components/src/mobile/color-settings/picker-screen.native.js index 2d505621f6eda..e924580d93979 100644 --- a/packages/components/src/mobile/color-settings/picker-screen.native.js +++ b/packages/components/src/mobile/color-settings/picker-screen.native.js @@ -43,9 +43,7 @@ const PickerScreen = () => { onHandleHardwareButtonPress={ onHandleHardwareButtonPress } /> ); - // Disable reason: deferring this refactor to the native team. - // see https://github.com/WordPress/gutenberg/pull/41166 - // eslint-disable-next-line react-hooks/exhaustive-deps + // See https://github.com/WordPress/gutenberg/pull/41166 }, [ setColor, currentValue, diff --git a/packages/components/src/mobile/image/index.native.js b/packages/components/src/mobile/image/index.native.js index 9f8673b7bdcdf..3c7e4ddc19c00 100644 --- a/packages/components/src/mobile/image/index.native.js +++ b/packages/components/src/mobile/image/index.native.js @@ -112,9 +112,7 @@ const ImageComponent = ( { } } return () => ( isCurrent = false ); - // Disable reason: deferring this refactor to the native team. - // see https://github.com/WordPress/gutenberg/pull/41166 - // eslint-disable-next-line react-hooks/exhaustive-deps + // See https://github.com/WordPress/gutenberg/pull/41166 }, [ url ] ); const onContainerLayout = ( event ) => { diff --git a/packages/components/src/mobile/keyboard-avoiding-view/index.ios.js b/packages/components/src/mobile/keyboard-avoiding-view/index.ios.js index f13e7d329874f..7630fd21fbc42 100644 --- a/packages/components/src/mobile/keyboard-avoiding-view/index.ios.js +++ b/packages/components/src/mobile/keyboard-avoiding-view/index.ios.js @@ -69,9 +69,7 @@ export const KeyboardAvoidingView = ( { keyboardShowSubscription.remove(); keyboardHideSubscription.remove(); }; - // Disable reason: deferring this refactor to the native team. - // see https://github.com/WordPress/gutenberg/pull/41166 - // eslint-disable-next-line react-hooks/exhaustive-deps + // See https://github.com/WordPress/gutenberg/pull/41166 }, [] ); function onSafeAreaInsetsUpdate( { safeAreaInsets } ) { diff --git a/packages/components/src/mobile/link-picker/link-picker-results.native.js b/packages/components/src/mobile/link-picker/link-picker-results.native.js index 1d411b97ff066..4751ebc1ee211 100644 --- a/packages/components/src/mobile/link-picker/link-picker-results.native.js +++ b/packages/components/src/mobile/link-picker/link-picker-results.native.js @@ -75,9 +75,8 @@ export default function LinkPickerResults( { return { fetchMoreSuggestions: debounce( fetchMore, REQUEST_DEBOUNCE_DELAY ), }; - // Disable eslint rule for now, to avoid introducing a regression + // Not adding dependencies for now, to avoid introducing a regression // (see https://github.com/WordPress/gutenberg/pull/23922#discussion_r1170634879). - // eslint-disable-next-line react-hooks/exhaustive-deps }, [] ); // Prevent setting state when unmounted. @@ -90,9 +89,7 @@ export default function LinkPickerResults( { setHasAllSuggestions( false ); setLinks( [ directEntry ] ); fetchMoreSuggestions( { query, links: [ directEntry ] } ); - // Disable reason: deferring this refactor to the native team. - // see https://github.com/WordPress/gutenberg/pull/41166 - // eslint-disable-next-line react-hooks/exhaustive-deps + // See https://github.com/WordPress/gutenberg/pull/41166 }, [ query ] ); const onEndReached = () => fetchMoreSuggestions( { query, links } ); diff --git a/packages/components/src/mobile/link-picker/link-picker-screen.native.js b/packages/components/src/mobile/link-picker/link-picker-screen.native.js index 7bc1dbd7009b6..999c9053c5986 100644 --- a/packages/components/src/mobile/link-picker/link-picker-screen.native.js +++ b/packages/components/src/mobile/link-picker/link-picker-screen.native.js @@ -53,9 +53,7 @@ const LinkPickerScreen = ( { returnScreenName } ) => { onCancel={ onCancel } /> ); - // Disable reason: deferring this refactor to the native team. - // see https://github.com/WordPress/gutenberg/pull/41166 - // eslint-disable-next-line react-hooks/exhaustive-deps + // See https://github.com/WordPress/gutenberg/pull/41166 }, [ inputValue ] ); }; diff --git a/packages/components/src/mobile/link-settings/index.native.js b/packages/components/src/mobile/link-settings/index.native.js index e80672a3103fa..a01e33b410a5c 100644 --- a/packages/components/src/mobile/link-settings/index.native.js +++ b/packages/components/src/mobile/link-settings/index.native.js @@ -101,9 +101,7 @@ function LinkSettings( { if ( onHandleClosingBottomSheet ) { onHandleClosingBottomSheet( onCloseSettingsSheet ); } - // Disable reason: deferring this refactor to the native team. - // see https://github.com/WordPress/gutenberg/pull/41166 - // eslint-disable-next-line react-hooks/exhaustive-deps + // See https://github.com/WordPress/gutenberg/pull/41166 }, [ urlInputValue, labelInputValue, linkRelInputValue ] ); useEffect( () => { @@ -115,9 +113,7 @@ function LinkSettings( { if ( url !== urlInputValue ) { setUrlInputValue( url || '' ); } - // Disable reason: deferring this refactor to the native team. - // see https://github.com/WordPress/gutenberg/pull/41166 - // eslint-disable-next-line react-hooks/exhaustive-deps + // See https://github.com/WordPress/gutenberg/pull/41166 }, [ url ] ); useEffect( () => { @@ -141,9 +137,7 @@ function LinkSettings( { if ( prevEditorSidebarOpened && ! editorSidebarOpened ) { onSetAttributes(); } - // Disable reason: deferring this refactor to the native team. - // see https://github.com/WordPress/gutenberg/pull/41166 - // eslint-disable-next-line react-hooks/exhaustive-deps + // See https://github.com/WordPress/gutenberg/pull/41166 }, [ editorSidebarOpened, isVisible ] ); useEffect( () => { @@ -156,9 +150,7 @@ function LinkSettings( { url: prependHTTP( urlValue ), } ); } - // Disable reason: deferring this refactor to the native team. - // see https://github.com/WordPress/gutenberg/pull/41166 - // eslint-disable-next-line react-hooks/exhaustive-deps + // See https://github.com/WordPress/gutenberg/pull/41166 }, [ urlValue ] ); const onChangeURL = useCallback( @@ -188,9 +180,7 @@ function LinkSettings( { rel: linkRelInputValue, } ); } - // Disable reason: deferring this refactor to the native team. - // see https://github.com/WordPress/gutenberg/pull/41166 - // eslint-disable-next-line react-hooks/exhaustive-deps + // See https://github.com/WordPress/gutenberg/pull/41166 }, [ urlInputValue, labelInputValue, linkRelInputValue, setAttributes ] ); const onCloseSettingsSheet = useCallback( () => { @@ -223,9 +213,7 @@ function LinkSettings( { rel: updatedRel, } ); }, - // Disable reason: deferring this refactor to the native team. - // see https://github.com/WordPress/gutenberg/pull/41166 - // eslint-disable-next-line react-hooks/exhaustive-deps + // See https://github.com/WordPress/gutenberg/pull/41166 [ linkRelInputValue ] ); diff --git a/packages/components/src/mobile/link-settings/link-settings-screen.native.js b/packages/components/src/mobile/link-settings/link-settings-screen.native.js index d04bd0699b7a5..7147becd67b22 100644 --- a/packages/components/src/mobile/link-settings/link-settings-screen.native.js +++ b/packages/components/src/mobile/link-settings/link-settings-screen.native.js @@ -37,9 +37,7 @@ const LinkSettingsScreen = ( props ) => { urlValue={ inputValue } /> ); - // Disable reason: deferring this refactor to the native team. - // see https://github.com/WordPress/gutenberg/pull/41166 - // eslint-disable-next-line react-hooks/exhaustive-deps + // See https://github.com/WordPress/gutenberg/pull/41166 }, [ props, inputValue, navigation, route ] ); }; diff --git a/packages/components/src/mobile/segmented-control/index.native.js b/packages/components/src/mobile/segmented-control/index.native.js index 49d46b8cd08be..36b92bb0d4ea3 100644 --- a/packages/components/src/mobile/segmented-control/index.native.js +++ b/packages/components/src/mobile/segmented-control/index.native.js @@ -74,18 +74,14 @@ const SegmentedControls = ( { useEffect( () => { setActiveSegmentIndex( selectedSegmentIndex ); segmentHandler( segments[ selectedSegmentIndex ] ); - // Disable reason: deferring this refactor to the native team. - // see https://github.com/WordPress/gutenberg/pull/41166 - // eslint-disable-next-line react-hooks/exhaustive-deps + // See https://github.com/WordPress/gutenberg/pull/41166 }, [] ); useEffect( () => { positionAnimationValue.setValue( calculateEndValue( activeSegmentIndex ) ); - // Disable reason: deferring this refactor to the native team. - // see https://github.com/WordPress/gutenberg/pull/41166 - // eslint-disable-next-line react-hooks/exhaustive-deps + // See https://github.com/WordPress/gutenberg/pull/41166 }, [ segmentsDimensions ] ); const containerStyle = usePreferredColorSchemeStyle( diff --git a/packages/components/src/mobile/utils/use-unit-converter-to-mobile.native.js b/packages/components/src/mobile/utils/use-unit-converter-to-mobile.native.js index 891f11f502ebf..0b1dfd31147de 100644 --- a/packages/components/src/mobile/utils/use-unit-converter-to-mobile.native.js +++ b/packages/components/src/mobile/utils/use-unit-converter-to-mobile.native.js @@ -66,9 +66,7 @@ const useConvertUnitToMobile = ( value, unit, styles ) => { return () => { dimensionsChangeSubscription.remove(); }; - // Disable reason: deferring this refactor to the native team. - // see https://github.com/WordPress/gutenberg/pull/41166 - // eslint-disable-next-line react-hooks/exhaustive-deps + // See https://github.com/WordPress/gutenberg/pull/41166 }, [] ); const onDimensionsChange = useCallback( ( { window } ) => { @@ -85,9 +83,7 @@ const useConvertUnitToMobile = ( value, unit, styles ) => { valueToConvert, valueUnit ); - // Disable reason: deferring this refactor to the native team. - // see https://github.com/WordPress/gutenberg/pull/41166 - // eslint-disable-next-line react-hooks/exhaustive-deps + // See https://github.com/WordPress/gutenberg/pull/41166 }, [ windowSizes, value, unit ] ); }; diff --git a/packages/components/src/navigation/index.tsx b/packages/components/src/navigation/index.tsx index 0069369f3e00c..92f431dfb22fc 100644 --- a/packages/components/src/navigation/index.tsx +++ b/packages/components/src/navigation/index.tsx @@ -104,9 +104,8 @@ export function Navigation( { if ( activeMenu !== menu ) { setActiveMenu( activeMenu ); } - // Ignore exhaustive-deps here, as it would require either a larger refactor or some questionable workarounds. + // Not adding deps for now, as it would require either a larger refactor or some questionable workarounds. // See https://github.com/WordPress/gutenberg/pull/41612 for context. - // eslint-disable-next-line react-hooks/exhaustive-deps }, [ activeMenu ] ); const context = { diff --git a/packages/components/src/navigation/item/use-navigation-tree-item.tsx b/packages/components/src/navigation/item/use-navigation-tree-item.tsx index e294af4169517..335e55f2401bf 100644 --- a/packages/components/src/navigation/item/use-navigation-tree-item.tsx +++ b/packages/components/src/navigation/item/use-navigation-tree-item.tsx @@ -41,7 +41,7 @@ export const useNavigationTreeItem = ( return () => { removeItem( itemId ); }; - // Ignore exhaustive-deps rule for now. See https://github.com/WordPress/gutenberg/pull/41639 - // eslint-disable-next-line react-hooks/exhaustive-deps + // Not adding deps for now, as it would require either a larger refactor. + // See https://github.com/WordPress/gutenberg/pull/41639 }, [ activeMenu, search ] ); }; diff --git a/packages/components/src/navigation/menu/menu-title-search.tsx b/packages/components/src/navigation/menu/menu-title-search.tsx index c1dbda5af88fb..f0014fa476804 100644 --- a/packages/components/src/navigation/menu/menu-title-search.tsx +++ b/packages/components/src/navigation/menu/menu-title-search.tsx @@ -55,8 +55,8 @@ function MenuTitleSearch( { count ); debouncedSpeak( resultsFoundMessage ); - // Ignore exhaustive-deps rule for now. See https://github.com/WordPress/gutenberg/pull/44090 - // eslint-disable-next-line react-hooks/exhaustive-deps + // Not adding deps for now, as it would require either a larger refactor. + // See https://github.com/WordPress/gutenberg/pull/44090 }, [ items, search ] ); const onClose = () => { diff --git a/packages/components/src/navigation/menu/use-navigation-tree-menu.tsx b/packages/components/src/navigation/menu/use-navigation-tree-menu.tsx index 1db2ee87fa784..8631812445cd7 100644 --- a/packages/components/src/navigation/menu/use-navigation-tree-menu.tsx +++ b/packages/components/src/navigation/menu/use-navigation-tree-menu.tsx @@ -23,7 +23,7 @@ export const useNavigationTreeMenu = ( props: NavigationMenuProps ) => { return () => { removeMenu( key ); }; - // Ignore exhaustive-deps rule for now. See https://github.com/WordPress/gutenberg/pull/44090 - // eslint-disable-next-line react-hooks/exhaustive-deps + // Not adding deps for now, as it would require either a larger refactor + // See https://github.com/WordPress/gutenberg/pull/44090 }, [] ); }; diff --git a/packages/components/src/sandbox/index.native.js b/packages/components/src/sandbox/index.native.js index b9bbc9a4e3281..72070bf6efcd0 100644 --- a/packages/components/src/sandbox/index.native.js +++ b/packages/components/src/sandbox/index.native.js @@ -336,9 +336,7 @@ const Sandbox = forwardRef( function Sandbox( useEffect( () => { updateContentHtml(); - // Disable reason: deferring this refactor to the native team. - // see https://github.com/WordPress/gutenberg/pull/41166 - // eslint-disable-next-line react-hooks/exhaustive-deps + // See https://github.com/WordPress/gutenberg/pull/41166 }, [ html, title, type, styles, scripts ] ); useEffect( () => { diff --git a/packages/components/src/sandbox/index.tsx b/packages/components/src/sandbox/index.tsx index 4ad971cb63ca9..5288fea3f7e43 100644 --- a/packages/components/src/sandbox/index.tsx +++ b/packages/components/src/sandbox/index.tsx @@ -262,23 +262,20 @@ function SandBox( { checkMessageForResize ); }; - // Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor. + // Passing `exhaustive-deps` will likely involve a more detailed refactor. // See https://github.com/WordPress/gutenberg/pull/44378 - // eslint-disable-next-line react-hooks/exhaustive-deps }, [] ); useEffect( () => { trySandBox(); - // Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor. + // Passing `exhaustive-deps` will likely involve a more detailed refactor. // See https://github.com/WordPress/gutenberg/pull/44378 - // eslint-disable-next-line react-hooks/exhaustive-deps }, [ title, styles, scripts ] ); useEffect( () => { trySandBox( true ); - // Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor. + // Passing `exhaustive-deps` will likely involve a more detailed refactor. // See https://github.com/WordPress/gutenberg/pull/44378 - // eslint-disable-next-line react-hooks/exhaustive-deps }, [ html, type ] ); return ( diff --git a/packages/components/src/search-control/index.native.js b/packages/components/src/search-control/index.native.js index 8bff86049b018..5bb03196d1de1 100644 --- a/packages/components/src/search-control/index.native.js +++ b/packages/components/src/search-control/index.native.js @@ -122,9 +122,7 @@ function SearchControl( { mergeFutureStyles( activeDarkStyles, [ isActive, isDark ] ); setCurrentStyles( futureStyles ); - // Disable reason: deferring this refactor to the native team. - // see https://github.com/WordPress/gutenberg/pull/41166 - // eslint-disable-next-line react-hooks/exhaustive-deps + // See https://github.com/WordPress/gutenberg/pull/41166 }, [ isActive, isDark ] ); const clearInput = useCallback( () => { diff --git a/packages/components/src/slot-fill/bubbles-virtually/slot.tsx b/packages/components/src/slot-fill/bubbles-virtually/slot.tsx index e836782c90615..6ac2d51e1f857 100644 --- a/packages/components/src/slot-fill/bubbles-virtually/slot.tsx +++ b/packages/components/src/slot-fill/bubbles-virtually/slot.tsx @@ -49,11 +49,10 @@ function Slot( return () => { unregisterSlot( name, ref ); }; - // Ignore reason: We don't want to unregister and register the slot whenever + // We don't want to unregister and register the slot whenever // `fillProps` change, which would cause the fill to be re-mounted. Instead, // we can just update the slot (see hook below). // For more context, see https://github.com/WordPress/gutenberg/pull/44403#discussion_r994415973 - // eslint-disable-next-line react-hooks/exhaustive-deps }, [ registerSlot, unregisterSlot, name ] ); // fillProps may be an update that interacts with the layout, so we // useLayoutEffect. diff --git a/packages/components/src/slot-fill/fill.ts b/packages/components/src/slot-fill/fill.ts index 6aefacc4ff6f1..4134af25684b0 100644 --- a/packages/components/src/slot-fill/fill.ts +++ b/packages/components/src/slot-fill/fill.ts @@ -23,9 +23,8 @@ export default function Fill( { name, children }: FillComponentProps ) { const refValue = ref.current; registerFill( name, refValue ); return () => unregisterFill( name, refValue ); - // Ignore reason: the useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior. + // The useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior. // We'll leave them as-is until a more detailed investigation/refactor can be performed. - // eslint-disable-next-line react-hooks/exhaustive-deps }, [] ); useLayoutEffect( () => { @@ -33,9 +32,8 @@ export default function Fill( { name, children }: FillComponentProps ) { if ( slot ) { slot.forceUpdate(); } - // Ignore reason: the useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior. + // The useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior. // We'll leave them as-is until a more detailed investigation/refactor can be performed. - // eslint-disable-next-line react-hooks/exhaustive-deps }, [ children ] ); useLayoutEffect( () => { @@ -46,9 +44,8 @@ export default function Fill( { name, children }: FillComponentProps ) { unregisterFill( ref.current.name, ref.current ); ref.current.name = name; registerFill( name, ref.current ); - // Ignore reason: the useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior. + // The useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior. // We'll leave them as-is until a more detailed investigation/refactor can be performed. - // eslint-disable-next-line react-hooks/exhaustive-deps }, [ name ] ); return null; diff --git a/packages/components/src/tools-panel/tools-panel-item/hook.ts b/packages/components/src/tools-panel/tools-panel-item/hook.ts index 1e33e7c6740de..e0a1f0139dcac 100644 --- a/packages/components/src/tools-panel/tools-panel-item/hook.ts +++ b/packages/components/src/tools-panel/tools-panel-item/hook.ts @@ -54,11 +54,9 @@ export function useToolsPanelItem( // hasValue is a new function on every render, so do not add it as a // dependency to the useCallback hook! If needed, we should use a ref. - // eslint-disable-next-line react-hooks/exhaustive-deps const hasValueCallback = useCallback( hasValue, [ panelId ] ); // resetAllFilter is a new function on every render, so do not add it as a // dependency to the useCallback hook! If needed, we should use a ref. - // eslint-disable-next-line react-hooks/exhaustive-deps const resetAllFilterCallback = useCallback( resetAllFilter, [ panelId ] ); const previousPanelId = usePrevious( currentPanelId ); diff --git a/packages/components/src/tooltip/index.native.js b/packages/components/src/tooltip/index.native.js index 61b08c052dfac..ff880d38e1982 100644 --- a/packages/components/src/tooltip/index.native.js +++ b/packages/components/src/tooltip/index.native.js @@ -62,9 +62,7 @@ const useKeyboardVisibility = () => { showListener.remove(); hideListener.remove(); }; - // Disable reason: deferring this refactor to the native team. - // see https://github.com/WordPress/gutenberg/pull/41166 - // eslint-disable-next-line react-hooks/exhaustive-deps + // See https://github.com/WordPress/gutenberg/pull/41166 }, [] ); return keyboardVisible; @@ -105,9 +103,7 @@ const Tooltip = ( { } ); } return () => onHandleScreenTouch( null ); - // Disable reason: deferring this refactor to the native team. - // see https://github.com/WordPress/gutenberg/pull/41166 - // eslint-disable-next-line react-hooks/exhaustive-deps + // See https://github.com/WordPress/gutenberg/pull/41166 }, [ visible ] ); // Manage visibility animation. @@ -121,9 +117,7 @@ const Tooltip = ( { setAnimating( true ); startAnimation(); } - // Disable reason: deferring this refactor to the native team. - // see https://github.com/WordPress/gutenberg/pull/41166 - // eslint-disable-next-line react-hooks/exhaustive-deps + // See https://github.com/WordPress/gutenberg/pull/41166 }, [ visible ] ); // Manage tooltip visibility and position in relation to keyboard. @@ -142,9 +136,7 @@ const Tooltip = ( { setAnimating( true ); setVisible( false ); } - // Disable reason: deferring this refactor to the native team. - // see https://github.com/WordPress/gutenberg/pull/41166 - // eslint-disable-next-line react-hooks/exhaustive-deps + // See https://github.com/WordPress/gutenberg/pull/41166 }, [ visible, keyboardVisible ] ); // Manage tooltip position during keyboard frame changes. @@ -273,9 +265,7 @@ const TooltipSlot = ( { children, ...rest } ) => { setHandleScreenTouch( null ); }; // Memoize context value to avoid unnecessary rerenders of the Provider's children - // Disable reason: deferring this refactor to the native team. - // see https://github.com/WordPress/gutenberg/pull/41166 - // eslint-disable-next-line react-hooks/exhaustive-deps + // See https://github.com/WordPress/gutenberg/pull/41166 const value = useMemo( () => ( { onHandleScreenTouch } ) ); return ( diff --git a/packages/components/src/unit-control/index.native.js b/packages/components/src/unit-control/index.native.js index a4c0b913f5343..4aae14de65779 100644 --- a/packages/components/src/unit-control/index.native.js +++ b/packages/components/src/unit-control/index.native.js @@ -47,10 +47,8 @@ function UnitControl( { if ( pickerRef?.current ) { pickerRef.current.presentPicker(); } - // Disable reason: this should be fixed by the native team. - // It would be great if this could be done in the context of + // It would be great if the deps could be addressed in the context of // https://github.com/WordPress/gutenberg/pull/39218 - // eslint-disable-next-line react-hooks/exhaustive-deps }, [ pickerRef?.current ] ); const currentInputValue = currentInput === null ? value : currentInput; @@ -106,10 +104,8 @@ function UnitControl( { anchorNodeRef?.current ? findNodeHandle( anchorNodeRef?.current ) : undefined, - // Disable reason: this should be fixed by the native team. - // It would be great if this could be done in the context of + // It would be great if the deps could be addressed in the context of // https://github.com/WordPress/gutenberg/pull/39218 - // eslint-disable-next-line react-hooks/exhaustive-deps [ anchorNodeRef?.current ] ); diff --git a/packages/components/src/utils/element-rect.ts b/packages/components/src/utils/element-rect.ts index 7f9693ef9f7df..0f58ea6d7caf5 100644 --- a/packages/components/src/utils/element-rect.ts +++ b/packages/components/src/utils/element-rect.ts @@ -181,7 +181,6 @@ export function useTrackElementOffsetRect( measure(); // `measure` is a stable function, so it's safe to omit it from the deps array. // deps can't be statically analyzed by ESLint - // eslint-disable-next-line react-hooks/exhaustive-deps }, deps ); return indicatorPosition; diff --git a/packages/components/src/utils/hooks/use-update-effect.js b/packages/components/src/utils/hooks/use-update-effect.js index ed2c3ca436357..e371647f033de 100644 --- a/packages/components/src/utils/hooks/use-update-effect.js +++ b/packages/components/src/utils/hooks/use-update-effect.js @@ -19,11 +19,9 @@ function useUpdateEffect( effect, deps ) { } mountedRef.current = true; return undefined; - // Disable reasons: // 1. This hook needs to pass a dep list that isn't an array literal // 2. `effect` is missing from the array, and will need to be added carefully to avoid additional warnings // see https://github.com/WordPress/gutenberg/pull/41166 - // eslint-disable-next-line react-hooks/exhaustive-deps }, deps ); useEffect( From 7cda6744d81cefc46976d72a5bd45cbd91988ad3 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 25 Oct 2024 11:15:24 +0100 Subject: [PATCH 16/19] Don't switch editor mode when changing entities (#66452) * Only reset zoom level * Avoid set editor mode on sidebar toggle Co-authored-by: getdave Co-authored-by: youknowriad Co-authored-by: Ella <4710635+ellatrix@users.noreply.github.com> --- packages/edit-site/src/components/editor/index.js | 7 +------ .../use-init-edited-entity-from-url.js | 14 +++++++++----- 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 9058a16370799..c7481a1d12bd7 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -153,9 +153,7 @@ export default function EditSiteEditor( { isPostsList = false } ) { ], [ settings.styles, canvas, currentPostIsTrashed ] ); - const { __unstableSetEditorMode, resetZoomLevel } = unlock( - useDispatch( blockEditorStore ) - ); + const { resetZoomLevel } = unlock( useDispatch( blockEditorStore ) ); const { createSuccessNotice } = useDispatch( noticesStore ); const history = useHistory(); const onActionPerformed = useCallback( @@ -263,9 +261,6 @@ export default function EditSiteEditor( { isPostsList = false } ) { showTooltip tooltipPosition="middle right" onClick={ () => { - __unstableSetEditorMode( - 'edit' - ); resetZoomLevel(); // TODO: this is a temporary solution to navigate to the posts list if we are diff --git a/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js b/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js index 9f507693c4cfd..35eeb5963fb54 100644 --- a/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js +++ b/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js @@ -249,15 +249,19 @@ export default function useInitEditedEntityFromURL() { useResolveEditedEntityAndContext( params ); const { setEditedEntity } = useDispatch( editSiteStore ); - const { __unstableSetEditorMode, resetZoomLevel } = unlock( - useDispatch( blockEditorStore ) - ); + const { resetZoomLevel } = unlock( useDispatch( blockEditorStore ) ); useEffect( () => { if ( isReady ) { - __unstableSetEditorMode( 'edit' ); resetZoomLevel(); setEditedEntity( postType, postId, context ); } - }, [ isReady, postType, postId, context, setEditedEntity ] ); + }, [ + isReady, + postType, + postId, + context, + setEditedEntity, + resetZoomLevel, + ] ); } From f1b307ab30ad0b61b1105939d2ad5722a662de2d Mon Sep 17 00:00:00 2001 From: Nik Tsekouras Date: Fri, 25 Oct 2024 14:07:52 +0300 Subject: [PATCH 17/19] Remove purple coloring from DocumentBar and PostCard (#66451) Co-authored-by: ntsekouras Co-authored-by: jasmussen Co-authored-by: annezazu Co-authored-by: creativecoder Co-authored-by: richtabor --- packages/editor/src/components/document-bar/style.scss | 4 ---- packages/editor/src/components/post-card-panel/style.scss | 8 -------- 2 files changed, 12 deletions(-) diff --git a/packages/editor/src/components/document-bar/style.scss b/packages/editor/src/components/document-bar/style.scss index 3e5fbf5f4b1ae..6a7e7930f5bfb 100644 --- a/packages/editor/src/components/document-bar/style.scss +++ b/packages/editor/src/components/document-bar/style.scss @@ -67,10 +67,6 @@ flex: 1; overflow: hidden; text-overflow: ellipsis; - - .editor-document-bar.is-global & { - color: var(--wp-block-synced-color); - } } .editor-document-bar__post-type-label { diff --git a/packages/editor/src/components/post-card-panel/style.scss b/packages/editor/src/components/post-card-panel/style.scss index f69fe5aa00ad5..d8a2a4628e6f9 100644 --- a/packages/editor/src/components/post-card-panel/style.scss +++ b/packages/editor/src/components/post-card-panel/style.scss @@ -34,14 +34,6 @@ } } -.editor-post-card-panel__icon.is-sync { - fill: var(--wp-block-synced-color); - - & + .editor-post-card-panel__title { - color: var(--wp-block-synced-color); - } -} - .editor-post-card-panel__title-badge { background: $gray-100; color: $gray-800; From 399d585a01561fccabc281bdc2e93d21bf33ecc1 Mon Sep 17 00:00:00 2001 From: Marin Atanasov <8436925+tyxla@users.noreply.github.com> Date: Fri, 25 Oct 2024 14:29:41 +0300 Subject: [PATCH 18/19] ESLint: Remove explicit react-hooks/exhaustive-deps disabling (#66461) Co-authored-by: tyxla Co-authored-by: Mamaduka --- .../block-editor/src/components/block-list/block.native.js | 4 ---- .../inserter/block-patterns-tab/pattern-category-previews.js | 1 - packages/block-editor/src/components/list-view/index.js | 3 +-- .../block-editor/src/components/rich-text/index.native.js | 2 -- .../src/components/use-block-drop-zone/index.native.js | 1 - .../block-editor/src/components/use-moving-animation/index.js | 1 - packages/block-editor/src/components/use-settings/index.js | 1 - packages/block-editor/src/hooks/contrast-checker.js | 1 - packages/block-library/src/cover/edit/index.js | 3 +-- packages/block-library/src/file/edit.js | 3 +-- packages/block-library/src/social-links/edit.js | 1 - packages/data/src/components/use-select/index.js | 1 - .../src/components/block-editor/use-site-editor-settings.js | 3 +-- packages/edit-site/src/components/layout/animation.js | 1 - packages/edit-site/src/components/layout/index.js | 1 - packages/edit-widgets/src/components/sidebar/index.js | 1 - 16 files changed, 4 insertions(+), 24 deletions(-) diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js index 4112d614da35f..9f34195e50e04 100644 --- a/packages/block-editor/src/components/block-list/block.native.js +++ b/packages/block-editor/src/components/block-list/block.native.js @@ -320,7 +320,6 @@ function BlockListBlock( { name, fontSizes || EMPTY_ARRAY ); - // eslint-disable-next-line react-hooks/exhaustive-deps }, [ // It is crucial to keep the dependencies array minimal to prevent unnecessary calls that could negatively impact performance. // JSON.stringify is used for the following purposes: @@ -329,11 +328,8 @@ function BlockListBlock( { // 2. To filter the attributes object, ensuring that only the relevant attributes (included in // GlobalStylesContext.BLOCK_STYLE_ATTRIBUTES) are considered as dependencies. This reduces the likelihood of // unnecessary useMemo calls when other, unrelated attributes change. - // eslint-disable-next-line react-hooks/exhaustive-deps JSON.stringify( globalStyle ), - // eslint-disable-next-line react-hooks/exhaustive-deps JSON.stringify( wrapperProps?.style ), - // eslint-disable-next-line react-hooks/exhaustive-deps JSON.stringify( Object.fromEntries( Object.entries( attributes ?? {} ).filter( ( [ key ] ) => diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js b/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js index 835015704c944..fcb6c7601fcf7 100644 --- a/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js +++ b/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js @@ -117,7 +117,6 @@ export function PatternCategoryPreviews( { const { changePage } = pagingProps; // Hide block pattern preview on unmount. - // eslint-disable-next-line react-hooks/exhaustive-deps useEffect( () => () => onHover( null ), [] ); const onSetPatternSyncFilter = useCallback( diff --git a/packages/block-editor/src/components/list-view/index.js b/packages/block-editor/src/components/list-view/index.js index 87599ea870913..d7961bd6c02f3 100644 --- a/packages/block-editor/src/components/list-view/index.js +++ b/packages/block-editor/src/components/list-view/index.js @@ -185,8 +185,7 @@ function ListViewComponent( if ( selectedClientIds?.length ) { focusListItem( selectedClientIds[ 0 ], elementRef?.current ); } - // Disable reason: Only focus on the selected item when the list view is mounted. - // eslint-disable-next-line react-hooks/exhaustive-deps + // Only focus on the selected item when the list view is mounted. }, [] ); const expand = useCallback( diff --git a/packages/block-editor/src/components/rich-text/index.native.js b/packages/block-editor/src/components/rich-text/index.native.js index 4899d49b8c8eb..687c2759c05de 100644 --- a/packages/block-editor/src/components/rich-text/index.native.js +++ b/packages/block-editor/src/components/rich-text/index.native.js @@ -212,7 +212,6 @@ export function RichTextWrapper( selectionChangeEnd ); }, - // eslint-disable-next-line react-hooks/exhaustive-deps [ clientId, identifier ] ); @@ -368,7 +367,6 @@ export function RichTextWrapper( onChange( insert( value, '\n' ) ); } }, - // eslint-disable-next-line react-hooks/exhaustive-deps [ onReplace, onSplit, diff --git a/packages/block-editor/src/components/use-block-drop-zone/index.native.js b/packages/block-editor/src/components/use-block-drop-zone/index.native.js index 4f00880873c2f..f40900ec7db97 100644 --- a/packages/block-editor/src/components/use-block-drop-zone/index.native.js +++ b/packages/block-editor/src/components/use-block-drop-zone/index.native.js @@ -132,7 +132,6 @@ export default function useBlockDropZone( { const getSortedBlocksLayouts = useCallback( () => { return getBlockLayoutsOrderedByYCoord( blocksLayouts.current ); // We use the value of `blocksLayouts` as the dependency. - // eslint-disable-next-line react-hooks/exhaustive-deps }, [ blocksLayouts.current ] ); const isRTL = getSettings().isRTL; diff --git a/packages/block-editor/src/components/use-moving-animation/index.js b/packages/block-editor/src/components/use-moving-animation/index.js index a6ac0968ca16f..602b683150d0c 100644 --- a/packages/block-editor/src/components/use-moving-animation/index.js +++ b/packages/block-editor/src/components/use-moving-animation/index.js @@ -61,7 +61,6 @@ function useMovingAnimation( { triggerAnimationOnChange, clientId } ) { previous: ref.current && getAbsolutePosition( ref.current ), prevRect: ref.current && ref.current.getBoundingClientRect(), } ), - // eslint-disable-next-line react-hooks/exhaustive-deps [ triggerAnimationOnChange ] ); diff --git a/packages/block-editor/src/components/use-settings/index.js b/packages/block-editor/src/components/use-settings/index.js index e356260c2d6b3..072653b913c30 100644 --- a/packages/block-editor/src/components/use-settings/index.js +++ b/packages/block-editor/src/components/use-settings/index.js @@ -32,7 +32,6 @@ export function useSettings( ...paths ) { clientId, ...paths ), - // eslint-disable-next-line react-hooks/exhaustive-deps [ clientId, ...paths ] ); } diff --git a/packages/block-editor/src/hooks/contrast-checker.js b/packages/block-editor/src/hooks/contrast-checker.js index 6e503ae8f3319..368e2e7526485 100644 --- a/packages/block-editor/src/hooks/contrast-checker.js +++ b/packages/block-editor/src/hooks/contrast-checker.js @@ -21,7 +21,6 @@ export default function BlockColorContrastChecker( { clientId } ) { // There are so many things that can change the color of a block // So we perform this check on every render. - // eslint-disable-next-line react-hooks/exhaustive-deps useEffect( () => { if ( ! blockEl ) { return; diff --git a/packages/block-library/src/cover/edit/index.js b/packages/block-library/src/cover/edit/index.js index 88a47f566987c..77ce9e62d9eb0 100644 --- a/packages/block-library/src/cover/edit/index.js +++ b/packages/block-library/src/cover/edit/index.js @@ -152,8 +152,7 @@ function CoverEdit( { isUserOverlayColor: isUserOverlayColor || false, } ); } )(); - // Disable reason: Update the block only when the featured image changes. - // eslint-disable-next-line react-hooks/exhaustive-deps + // Update the block only when the featured image changes. }, [ mediaUrl ] ); // instead of destructuring the attributes diff --git a/packages/block-library/src/file/edit.js b/packages/block-library/src/file/edit.js index be061d357bffd..59e660dd3211f 100644 --- a/packages/block-library/src/file/edit.js +++ b/packages/block-library/src/file/edit.js @@ -103,8 +103,7 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) { downloadButtonText: _x( 'Download', 'button label' ), } ); } - // Reason: This effect should only run on mount. - // eslint-disable-next-line react-hooks/exhaustive-deps + // This effect should only run on mount. }, [] ); function onSelectFile( newMedia ) { diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js index d4dfae70aac5a..068b34a3a70a4 100644 --- a/packages/block-library/src/social-links/edit.js +++ b/packages/block-library/src/social-links/edit.js @@ -86,7 +86,6 @@ export function SocialLinksEdit( props ) { } else { setAttributes( { ...backgroundBackupRef.current } ); } - // eslint-disable-next-line react-hooks/exhaustive-deps }, [ logosOnly ] ); const SocialPlaceholder = ( diff --git a/packages/data/src/components/use-select/index.js b/packages/data/src/components/use-select/index.js index a0073d7e847fc..3e28e9489e977 100644 --- a/packages/data/src/components/use-select/index.js +++ b/packages/data/src/components/use-select/index.js @@ -223,7 +223,6 @@ function useMappingSelect( suspense, mapSelect, deps ) { // These are "pass-through" dependencies from the parent hook, // and the parent should catch any hook rule violations. - // eslint-disable-next-line react-hooks/exhaustive-deps const selector = useCallback( mapSelect, deps ); const { subscribe, getValue } = store( selector, isAsync ); const result = useSyncExternalStore( subscribe, getValue, getValue ); diff --git a/packages/edit-site/src/components/block-editor/use-site-editor-settings.js b/packages/edit-site/src/components/block-editor/use-site-editor-settings.js index e6dd036824962..37fa0a2eaf30c 100644 --- a/packages/edit-site/src/components/block-editor/use-site-editor-settings.js +++ b/packages/edit-site/src/components/block-editor/use-site-editor-settings.js @@ -29,10 +29,9 @@ function useNavigateToPreviousEntityRecord() { previousLocation?.params.canvas === 'edit'; const showBackButton = isFocusMode && didComeFromEditorCanvas; return showBackButton ? () => history.back() : undefined; - // Disable reason: previousLocation changes when the component updates for any reason, not + // `previousLocation` changes when the component updates for any reason, not // just when location changes. Until this is fixed we can't add it to deps. See // https://github.com/WordPress/gutenberg/pull/58710#discussion_r1479219465. - // eslint-disable-next-line react-hooks/exhaustive-deps }, [ location, history ] ); return goBack; } diff --git a/packages/edit-site/src/components/layout/animation.js b/packages/edit-site/src/components/layout/animation.js index 0dc6c61b165aa..00f6eb01a6f1a 100644 --- a/packages/edit-site/src/components/layout/animation.js +++ b/packages/edit-site/src/components/layout/animation.js @@ -41,7 +41,6 @@ function useMovingAnimation( { triggerAnimationOnChange } ) { previous: ref.current && getAbsolutePosition( ref.current ), prevRect: ref.current && ref.current.getBoundingClientRect(), } ), - // eslint-disable-next-line react-hooks/exhaustive-deps [ triggerAnimationOnChange ] ); diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index 12799f46fbe34..713b1f179b7ad 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -75,7 +75,6 @@ export default function Layout( { route } ) { toggleRef.current?.focus(); } // Should not depend on the previous canvas mode value but the next. - // eslint-disable-next-line react-hooks/exhaustive-deps }, [ canvas ] ); return ( diff --git a/packages/edit-widgets/src/components/sidebar/index.js b/packages/edit-widgets/src/components/sidebar/index.js index 79a47b18c7bf1..a42a6d7c4be7a 100644 --- a/packages/edit-widgets/src/components/sidebar/index.js +++ b/packages/edit-widgets/src/components/sidebar/index.js @@ -88,7 +88,6 @@ function SidebarContent( { // We're intentionally leaving `currentArea` and `isGeneralSidebarOpen` // out of the dep array because we want this effect to run based on // block selection changes, not sidebar state changes. - // eslint-disable-next-line react-hooks/exhaustive-deps }, [ hasSelectedNonAreaBlock, enableComplementaryArea ] ); const tabsContextValue = useContext( Tabs.Context ); From b2d692c11504da5727261540909ecd1b0814aeab Mon Sep 17 00:00:00 2001 From: Marin Atanasov <8436925+tyxla@users.noreply.github.com> Date: Fri, 25 Oct 2024 14:41:54 +0300 Subject: [PATCH 19/19] Fields: Fix React Compiler mutation errors (#66464) Co-authored-by: tyxla Co-authored-by: Mamaduka --- packages/fields/src/fields/slug/slug-edit.tsx | 10 +++++----- packages/fields/src/fields/slug/slug-view.tsx | 8 ++++---- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/fields/src/fields/slug/slug-edit.tsx b/packages/fields/src/fields/slug/slug-edit.tsx index 760e67c9cff3b..aeb02ba42873b 100644 --- a/packages/fields/src/fields/slug/slug-edit.tsx +++ b/packages/fields/src/fields/slug/slug-edit.tsx @@ -38,15 +38,15 @@ const SlugEdit = ( { const permalinkPrefix = prefix; const permalinkSuffix = suffix; const isEditable = PERMALINK_POSTNAME_REGEX.test( permalinkTemplate ); - const originalSlug = useRef( slug ); - const slugToDisplay = slug || originalSlug.current; + const originalSlugRef = useRef( slug ); + const slugToDisplay = slug || originalSlugRef.current; const permalink = isEditable ? `${ permalinkPrefix }${ slugToDisplay }${ permalinkSuffix }` : safeDecodeURIComponent( data.link || '' ); useEffect( () => { - if ( slug && originalSlug.current === undefined ) { - originalSlug.current = slug; + if ( slug && originalSlugRef.current === undefined ) { + originalSlugRef.current = slug; } }, [ slug ] ); @@ -111,7 +111,7 @@ const SlugEdit = ( { } } onBlur={ () => { if ( slug === '' ) { - onChangeControl( originalSlug.current ); + onChangeControl( originalSlugRef.current ); } } } aria-describedby={ postUrlSlugDescriptionId } diff --git a/packages/fields/src/fields/slug/slug-view.tsx b/packages/fields/src/fields/slug/slug-view.tsx index 7448673c6a846..dc17eae128d68 100644 --- a/packages/fields/src/fields/slug/slug-view.tsx +++ b/packages/fields/src/fields/slug/slug-view.tsx @@ -10,15 +10,15 @@ import type { BasePost } from '../../types'; const SlugView = ( { item }: { item: BasePost } ) => { const slug = item.slug; - const originalSlug = useRef( slug ); + const originalSlugRef = useRef( slug ); useEffect( () => { - if ( slug && originalSlug.current === undefined ) { - originalSlug.current = slug; + if ( slug && originalSlugRef.current === undefined ) { + originalSlugRef.current = slug; } }, [ slug ] ); - const slugToDisplay = slug || originalSlug.current; + const slugToDisplay = slug || originalSlugRef.current; return `/${ slugToDisplay ?? '' }`; };