From c56672504bada434aee1ec331366cd2a10ab2b38 Mon Sep 17 00:00:00 2001 From: Dani Guardiola Date: Fri, 3 May 2024 22:04:02 +0200 Subject: [PATCH] Replace classnames with clsx (#61138) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Replace classnames with clsx. * Fix removeAspectRatioClasses. * Fix docs. * Fix test. * Fix trunk changes. * Fix removeAspectRatioClasses. * Undo unwanted PHP changes. * Add restricted import rule. * dummy commit * Update changelogs for all affected packages. * Remove test stuff 😅 * Make changelog entries internal. * Try the force flag to fix CI flakiness on Windows. * Add debug logs to CI task. * Try to log again. * Attempt logging again. Co-authored-by: DaniGuardiola Co-authored-by: tyxla Co-authored-by: desrosj Co-authored-by: dcalhoun --- .eslintrc.js | 5 ++ .github/setup-node/action.yml | 9 ++- docs/contributors/code/coding-guidelines.md | 6 +- package-lock.json | 79 ++++++++++--------- packages/block-editor/CHANGELOG.md | 10 ++- packages/block-editor/package.json | 2 +- .../components/block-alignment-control/ui.js | 4 +- .../src/components/block-card/index.js | 4 +- .../src/components/block-compare/index.js | 4 +- .../src/components/block-edit/edit.js | 4 +- .../src/components/block-icon/index.js | 4 +- .../components/block-list-appender/index.js | 4 +- .../src/components/block-list/block.js | 8 +- .../src/components/block-list/block.native.js | 4 +- .../src/components/block-list/index.js | 4 +- .../block-list/use-block-props/index.js | 4 +- .../src/components/block-mover/button.js | 4 +- .../src/components/block-mover/index.js | 4 +- .../components/block-patterns-list/index.js | 4 +- .../src/components/block-popover/inbetween.js | 4 +- .../src/components/block-popover/index.js | 7 +- .../src/components/block-preview/index.js | 4 +- .../src/components/block-styles/index.js | 4 +- .../src/components/block-toolbar/index.js | 6 +- .../block-tools/block-selection-button.js | 4 +- .../block-tools/block-toolbar-breadcrumb.js | 4 +- .../block-tools/block-toolbar-popover.js | 11 +-- .../block-tools/empty-block-inserter.js | 4 +- .../components/block-tools/insertion-point.js | 8 +- .../block-variation-picker/index.js | 4 +- .../components/button-block-appender/index.js | 4 +- .../components/colors-gradients/control.js | 4 +- .../components/colors-gradients/dropdown.js | 4 +- .../panel-color-gradient-settings.js | 4 +- .../default-block-appender/index.js | 4 +- .../global-styles/background-panel.js | 4 +- .../components/global-styles/color-panel.js | 4 +- .../global-styles/dimensions-panel.js | 8 +- .../components/global-styles/filters-panel.js | 4 +- .../global-styles/shadow-panel-components.js | 15 ++-- .../src/components/iframe/index.js | 4 +- .../src/components/image-editor/cropper.js | 4 +- .../inner-blocks/button-block-appender.js | 4 +- .../src/components/inner-blocks/index.js | 4 +- .../components/inserter-list-item/index.js | 6 +- .../src/components/inserter/index.js | 9 +-- .../inserter/media-tab/media-preview.js | 4 +- .../src/components/inserter/menu.js | 4 +- .../src/components/inserter/quick-inserter.js | 4 +- .../src/components/link-control/index.js | 4 +- .../components/link-control/link-preview.js | 6 +- .../components/link-control/search-results.js | 4 +- .../components/list-view/block-contents.js | 4 +- .../list-view/block-select-button.js | 4 +- .../src/components/list-view/block.js | 8 +- .../components/list-view/drop-indicator.js | 6 +- .../src/components/list-view/index.js | 4 +- .../src/components/list-view/leaf.js | 7 +- .../src/components/media-placeholder/index.js | 8 +- .../components/media-replace-flow/index.js | 4 +- .../src/components/plain-text/index.js | 4 +- .../responsive-block-control/index.js | 4 +- .../rich-text/format-toolbar/index.js | 4 +- .../src/components/rich-text/index.js | 4 +- .../src/components/rich-text/index.native.js | 4 +- .../segmented-text-control/index.js | 4 +- .../text-alignment-control/index.js | 4 +- .../text-decoration-control/index.js | 4 +- .../text-transform-control/index.js | 4 +- .../src/components/url-input/index.js | 8 +- .../src/components/url-popover/link-editor.js | 4 +- .../components/url-popover/link-viewer-url.js | 4 +- .../src/components/url-popover/link-viewer.js | 4 +- .../src/components/warning/index.js | 4 +- .../src/components/writing-flow/index.js | 4 +- .../components/writing-mode-control/index.js | 7 +- packages/block-editor/src/hooks/align.js | 4 +- packages/block-editor/src/hooks/border.js | 6 +- packages/block-editor/src/hooks/color.js | 31 +++----- .../src/hooks/custom-class-name.js | 4 +- .../src/hooks/custom-class-name.native.js | 4 +- packages/block-editor/src/hooks/dimensions.js | 4 +- packages/block-editor/src/hooks/layout.js | 4 +- packages/block-editor/src/hooks/position.js | 4 +- packages/block-editor/src/hooks/text-align.js | 6 +- .../block-editor/src/hooks/use-color-props.js | 4 +- .../src/hooks/use-typography-props.js | 4 +- packages/block-editor/src/hooks/utils.js | 4 +- packages/block-library/CHANGELOG.md | 9 ++- packages/block-library/package.json | 2 +- packages/block-library/src/audio/edit.js | 4 +- packages/block-library/src/avatar/edit.js | 4 +- packages/block-library/src/block/edit.js | 4 +- .../block-library/src/button/deprecated.js | 32 ++++---- packages/block-library/src/button/edit.js | 6 +- packages/block-library/src/button/save.js | 6 +- .../block-library/src/buttons/deprecated.js | 4 +- packages/block-library/src/buttons/edit.js | 4 +- packages/block-library/src/buttons/save.js | 4 +- packages/block-library/src/categories/edit.js | 4 +- .../block-library/src/column/deprecated.js | 4 +- packages/block-library/src/column/edit.js | 4 +- packages/block-library/src/column/save.js | 4 +- .../block-library/src/columns/deprecated.js | 6 +- packages/block-library/src/columns/edit.js | 4 +- packages/block-library/src/columns/save.js | 4 +- .../src/comment-author-name/edit.js | 4 +- .../block-library/src/comment-content/edit.js | 4 +- .../src/comment-edit-link/edit.js | 4 +- .../src/comment-reply-link/edit.js | 4 +- .../block-library/src/comments-title/edit.js | 4 +- .../src/comments/edit/comments-legacy.js | 4 +- .../block-library/src/cover/deprecated.js | 76 +++++++++--------- .../block-library/src/cover/edit.native.js | 4 +- .../block-library/src/cover/edit/index.js | 15 ++-- .../src/cover/edit/resizable-cover-popover.js | 4 +- packages/block-library/src/cover/save.js | 10 +-- .../block-library/src/embed/deprecated.js | 6 +- packages/block-library/src/embed/edit.js | 4 +- .../block-library/src/embed/edit.native.js | 4 +- .../block-library/src/embed/embed-preview.js | 6 +- .../src/embed/embed-preview.native.js | 4 +- packages/block-library/src/embed/save.js | 4 +- packages/block-library/src/embed/util.js | 14 ++-- packages/block-library/src/file/deprecated.js | 4 +- packages/block-library/src/file/edit.js | 6 +- packages/block-library/src/file/save.js | 4 +- .../src/form-input/deprecated.js | 6 +- packages/block-library/src/form-input/edit.js | 8 +- packages/block-library/src/form-input/save.js | 6 +- .../src/form-submission-notification/edit.js | 4 +- .../src/form-submission-notification/save.js | 11 +-- .../block-library/src/gallery/deprecated.js | 6 +- packages/block-library/src/gallery/edit.js | 4 +- packages/block-library/src/gallery/gallery.js | 4 +- packages/block-library/src/gallery/save.js | 6 +- .../src/gallery/v1/gallery-image.js | 4 +- .../block-library/src/gallery/v1/gallery.js | 6 +- packages/block-library/src/gallery/v1/save.js | 6 +- .../block-library/src/group/deprecated.js | 8 +- .../block-library/src/heading/deprecated.js | 12 +-- packages/block-library/src/heading/edit.js | 4 +- .../block-library/src/heading/edit.native.js | 4 +- packages/block-library/src/heading/save.js | 4 +- packages/block-library/src/home-link/edit.js | 4 +- .../block-library/src/image/deprecated.js | 20 ++--- packages/block-library/src/image/edit.js | 6 +- packages/block-library/src/image/save.js | 6 +- .../block-library/src/latest-posts/edit.js | 6 +- .../src/media-text/deprecated.js | 20 ++--- packages/block-library/src/media-text/edit.js | 4 +- .../src/media-text/media-container.js | 4 +- packages/block-library/src/media-text/save.js | 6 +- .../block-library/src/navigation-link/edit.js | 6 +- .../src/navigation-submenu/edit.js | 4 +- .../src/navigation/edit/index.js | 6 +- .../src/navigation/edit/responsive-wrapper.js | 6 +- .../src/navigation/edit/utils.js | 4 +- .../block-library/src/page-list-item/edit.js | 6 +- packages/block-library/src/page-list/edit.js | 4 +- .../block-library/src/paragraph/deprecated.js | 12 +-- packages/block-library/src/paragraph/edit.js | 4 +- packages/block-library/src/paragraph/save.js | 4 +- .../src/post-author-biography/edit.js | 4 +- .../src/post-author-name/edit.js | 4 +- .../block-library/src/post-author/edit.js | 4 +- .../src/post-comments-count/edit.js | 4 +- .../src/post-comments-form/edit.js | 4 +- .../src/post-comments-form/form.js | 4 +- .../src/post-comments-link/edit.js | 4 +- packages/block-library/src/post-date/edit.js | 4 +- .../block-library/src/post-excerpt/edit.js | 6 +- .../src/post-featured-image/edit.js | 6 +- .../src/post-featured-image/overlay.js | 4 +- .../src/post-navigation-link/edit.js | 4 +- .../block-library/src/post-template/edit.js | 8 +- packages/block-library/src/post-terms/edit.js | 4 +- .../src/post-time-to-read/edit.js | 4 +- packages/block-library/src/post-title/edit.js | 4 +- .../block-library/src/pullquote/deprecated.js | 14 ++-- packages/block-library/src/pullquote/edit.js | 4 +- packages/block-library/src/pullquote/save.js | 4 +- .../block-library/src/query-title/edit.js | 4 +- .../block-library/src/quote/deprecated.js | 6 +- packages/block-library/src/quote/edit.js | 4 +- packages/block-library/src/quote/save.js | 4 +- packages/block-library/src/search/edit.js | 12 +-- .../block-library/src/search/edit.native.js | 4 +- .../block-library/src/separator/deprecated.js | 4 +- packages/block-library/src/separator/edit.js | 4 +- packages/block-library/src/separator/save.js | 4 +- packages/block-library/src/site-logo/edit.js | 8 +- .../block-library/src/site-tagline/edit.js | 4 +- packages/block-library/src/site-title/edit.js | 4 +- .../block-library/src/social-link/edit.js | 6 +- .../src/social-links/deprecated.js | 4 +- .../block-library/src/social-links/edit.js | 4 +- .../block-library/src/social-links/save.js | 4 +- packages/block-library/src/spacer/edit.js | 6 +- .../block-library/src/table/deprecated.js | 32 +++----- packages/block-library/src/table/edit.js | 6 +- packages/block-library/src/table/save.js | 6 +- .../src/term-description/edit.js | 4 +- packages/block-library/src/utils/caption.js | 4 +- .../block-library/src/verse/deprecated.js | 4 +- packages/block-library/src/verse/edit.js | 4 +- packages/block-library/src/verse/save.js | 4 +- packages/block-library/src/video/edit.js | 4 +- packages/commands/CHANGELOG.md | 4 + packages/commands/package.json | 2 +- .../commands/src/components/command-menu.js | 6 +- packages/components/CHANGELOG.md | 5 ++ packages/components/package.json | 2 +- .../src/alignment-matrix-control/icon.tsx | 4 +- .../src/alignment-matrix-control/index.tsx | 7 +- .../src/angle-picker-control/index.tsx | 4 +- packages/components/src/animate/index.tsx | 11 +-- .../src/autocomplete/autocompleter-ui.tsx | 4 +- .../components/src/base-control/index.tsx | 7 +- .../components/src/button-group/index.tsx | 4 +- packages/components/src/button/index.tsx | 4 +- .../components/src/checkbox-control/index.tsx | 4 +- .../circular-option-picker-actions.tsx | 6 +- .../circular-option-picker-option-group.tsx | 4 +- .../circular-option-picker-option.tsx | 4 +- .../circular-option-picker.tsx | 7 +- .../components/src/clipboard-button/index.tsx | 4 +- .../components/src/color-indicator/index.tsx | 4 +- .../components/src/color-palette/index.tsx | 4 +- .../components/src/combobox-control/index.tsx | 7 +- .../gradient-bar/control-points.tsx | 6 +- .../gradient-bar/index.tsx | 4 +- .../src/custom-select-control/index.js | 9 +-- .../src/dimension-control/index.tsx | 7 +- packages/components/src/drop-zone/index.tsx | 4 +- .../src/dropdown-menu/index.native.js | 18 ++--- .../components/src/dropdown-menu/index.tsx | 25 +++--- packages/components/src/dropdown/index.tsx | 4 +- .../components/src/external-link/index.tsx | 4 +- .../src/focal-point-picker/focal-point.tsx | 6 +- .../src/focal-point-picker/index.tsx | 7 +- packages/components/src/form-toggle/index.tsx | 4 +- .../components/src/form-token-field/index.tsx | 4 +- .../src/form-token-field/suggestions-list.tsx | 4 +- .../src/form-token-field/token-input.tsx | 4 +- .../components/src/form-token-field/token.tsx | 4 +- packages/components/src/guide/index.tsx | 4 +- .../components/src/input-control/index.tsx | 4 +- packages/components/src/menu-group/index.tsx | 4 +- packages/components/src/menu-item/index.tsx | 6 +- packages/components/src/modal/index.tsx | 8 +- .../src/navigation/back-button/index.tsx | 7 +- .../components/src/navigation/group/index.tsx | 4 +- packages/components/src/navigation/index.tsx | 6 +- .../components/src/navigation/item/base.tsx | 4 +- .../components/src/navigation/item/index.tsx | 4 +- .../components/src/navigation/menu/index.tsx | 4 +- packages/components/src/notice/index.tsx | 15 ++-- packages/components/src/notice/list.tsx | 4 +- .../components/src/number-control/index.tsx | 4 +- .../components/src/palette-edit/index.tsx | 4 +- packages/components/src/panel/body.tsx | 4 +- packages/components/src/panel/index.tsx | 4 +- packages/components/src/panel/row.tsx | 4 +- packages/components/src/placeholder/index.tsx | 6 +- packages/components/src/popover/index.tsx | 4 +- .../components/src/radio-control/index.tsx | 4 +- .../components/src/range-control/index.tsx | 6 +- .../components/src/range-control/mark.tsx | 6 +- .../components/src/range-control/tooltip.tsx | 4 +- .../components/src/resizable-box/index.tsx | 20 ++--- .../resizable-box/resize-tooltip/index.tsx | 4 +- .../src/responsive-wrapper/index.tsx | 4 +- .../components/src/search-control/index.tsx | 7 +- .../components/src/select-control/index.tsx | 4 +- packages/components/src/snackbar/index.tsx | 13 ++- packages/components/src/snackbar/list.tsx | 4 +- packages/components/src/spinner/index.tsx | 4 +- packages/components/src/tab-panel/index.tsx | 4 +- .../components/src/text-control/index.tsx | 4 +- .../src/toolbar/toolbar-button/index.tsx | 6 +- .../src/toolbar/toolbar-group/index.tsx | 4 +- .../components/src/toolbar/toolbar/index.tsx | 4 +- .../components/src/unit-control/index.tsx | 4 +- .../src/unit-control/unit-select-control.tsx | 4 +- packages/customize-widgets/package.json | 2 +- .../src/components/header/index.js | 4 +- .../keyboard-shortcut-help-modal/index.js | 4 +- packages/dataviews/CHANGELOG.md | 14 ++-- packages/dataviews/package.json | 2 +- packages/dataviews/src/filter-summary.js | 6 +- packages/dataviews/src/view-grid.js | 8 +- packages/dataviews/src/view-list.js | 6 +- packages/dataviews/src/view-table.js | 8 +- packages/edit-post/CHANGELOG.md | 8 +- packages/edit-post/package.json | 2 +- .../header/fullscreen-mode-close/index.js | 4 +- .../edit-post/src/components/header/index.js | 4 +- .../edit-post/src/components/layout/index.js | 4 +- .../meta-boxes/meta-boxes-area/index.js | 12 +-- .../src/components/visual-editor/index.js | 4 +- packages/edit-site/CHANGELOG.md | 10 ++- packages/edit-site/package.json | 2 +- .../src/components/add-new-template/index.js | 4 +- .../components/block-editor/editor-canvas.js | 13 ++- .../block-editor/site-editor-canvas.js | 4 +- .../edit-site/src/components/editor/index.js | 4 +- .../global-styles/color-indicator-wrapper.js | 4 +- .../global-styles/icon-with-current-color.js | 4 +- .../screen-revisions/revisions-buttons.js | 4 +- .../global-styles/variations/variation.js | 11 +-- .../src/components/header-edit-mode/index.js | 6 +- .../edit-site/src/components/layout/index.js | 6 +- .../src/components/page-patterns/index.js | 11 +-- .../src/components/page-templates/index.js | 11 +-- .../edit-site/src/components/page/index.js | 4 +- .../src/components/pagination/index.js | 4 +- .../src/components/resizable-frame/index.js | 6 +- .../src/components/save-panel/index.js | 8 +- .../src/components/sidebar-button/index.js | 7 +- .../sidebar-dataviews/dataview-item.js | 11 +-- .../sidebar-navigation-item/index.js | 4 +- ...bar-navigation-screen-details-panel-row.js | 4 +- .../status-label.js | 4 +- .../sidebar-navigation-screen/index.js | 11 +-- .../edit-site/src/components/sidebar/index.js | 4 +- .../src/components/site-hub/index.js | 6 +- .../src/components/site-icon/index.js | 4 +- .../src/components/style-book/index.js | 10 +-- packages/edit-widgets/CHANGELOG.md | 8 +- packages/edit-widgets/package.json | 2 +- .../blocks/widget-area/edit/inner-blocks.js | 4 +- .../keyboard-shortcut-help-modal/index.js | 4 +- packages/editor/CHANGELOG.md | 12 ++- packages/editor/package.json | 2 +- .../collapsible-block-toolbar/index.js | 4 +- .../src/components/document-bar/index.js | 4 +- .../src/components/document-outline/item.js | 4 +- .../src/components/document-tools/index.js | 4 +- .../src/components/editor-canvas/index.js | 10 +-- .../keyboard-shortcut-help-modal/index.js | 4 +- .../src/components/post-card-panel/index.js | 4 +- .../src/components/post-excerpt/panel.js | 4 +- .../src/components/post-panel-row/index.js | 4 +- .../src/components/post-saved-state/index.js | 4 +- .../src/components/post-status/index.js | 4 +- .../editor/src/components/post-title/index.js | 4 +- .../components/post-title/post-title-raw.js | 4 +- packages/eslint-plugin/CHANGELOG.md | 4 + .../rules/__tests__/dependency-group.js | 12 +-- packages/interface/CHANGELOG.md | 8 +- packages/interface/package.json | 2 +- .../complementary-area-header/index.js | 4 +- .../components/complementary-area/index.js | 7 +- .../components/interface-skeleton/index.js | 4 +- .../src/components/navigable-region/index.js | 4 +- .../src/components/pinned-items/index.js | 4 +- packages/preferences/CHANGELOG.md | 4 + packages/preferences/package.json | 2 +- packages/primitives/CHANGELOG.md | 8 +- packages/primitives/package.json | 2 +- packages/primitives/src/svg/index.js | 5 +- packages/widgets/CHANGELOG.md | 4 + packages/widgets/package.json | 2 +- .../src/blocks/legacy-widget/edit/form.js | 4 +- .../src/blocks/legacy-widget/edit/index.js | 4 +- .../src/blocks/legacy-widget/edit/preview.js | 11 +-- storybook/decorators/with-global-css.js | 4 +- 368 files changed, 1083 insertions(+), 1130 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 9ac141fd09a04..0b0c71c39a266 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -76,6 +76,11 @@ const restrictedImports = [ message: "edit-widgets is a WordPress top level package that shouldn't be imported into other packages", }, + { + name: 'classnames', + message: + "Please use `clsx` instead. It's a lighter and faster drop-in replacement for `classnames`.", + }, ]; module.exports = { diff --git a/.github/setup-node/action.yml b/.github/setup-node/action.yml index af71abd3cd9b2..a17adfe5f5007 100644 --- a/.github/setup-node/action.yml +++ b/.github/setup-node/action.yml @@ -32,8 +32,15 @@ runs: - name: Install npm dependencies if: ${{ steps.cache-node_modules.outputs.cache-hit != 'true' }} - run: npm ci + run: | + npm ci shell: bash + - name: Upload npm logs as an artifact on failure + uses: actions/upload-artifact@65462800fd760344b1a7b4382951275a0abb4808 # v4.3.3 + if: failure() + with: + name: npm-logs + path: C:\npm\cache\_logs # On cache hit, we run the post-install script to match the native `npm ci` behavior. # An example of this is to patch `node_modules` using patch-package. diff --git a/docs/contributors/code/coding-guidelines.md b/docs/contributors/code/coding-guidelines.md index 63114073b1b80..06f86715a65a0 100644 --- a/docs/contributors/code/coding-guidelines.md +++ b/docs/contributors/code/coding-guidelines.md @@ -39,13 +39,13 @@ Components may be assigned with class names that indicate states (for example, a **Example:** -Consider again the Notices example. We may want to apply specific styling for dismissible notices. The [`classnames` package](https://www.npmjs.com/package/classnames) can be a helpful utility for conditionally applying modifier class names. +Consider again the Notices example. We may want to apply specific styling for dismissible notices. The [`clsx` package](https://www.npmjs.com/package/clsx) can be a helpful utility for conditionally applying modifier class names. ```jsx -import classnames from 'classnames'; +import clsx from 'clsx'; export default function Notice( { children, onRemove, isDismissible } ) { - const classes = classnames( 'components-notice', { + const classes = clsx( 'components-notice', { 'is-dismissible': isDismissible, } ); diff --git a/package-lock.json b/package-lock.json index 2d67d54cf6f63..fdbfc7d286d15 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21876,11 +21876,6 @@ "node": ">=0.10.0" } }, - "node_modules/classnames": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz", - "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==" - }, "node_modules/clean-css": { "version": "5.3.3", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz", @@ -22157,6 +22152,14 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "engines": { + "node": ">=6" + } + }, "node_modules/cmd-shim": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/cmd-shim/-/cmd-shim-6.0.1.tgz", @@ -53215,7 +53218,7 @@ "@wordpress/warning": "file:../warning", "@wordpress/wordcount": "file:../wordcount", "change-case": "^4.1.2", - "classnames": "^2.3.1", + "clsx": "^2.1.1", "colord": "^2.7.0", "deepmerge": "^4.3.0", "diff": "^4.0.2", @@ -53329,7 +53332,7 @@ "@wordpress/viewport": "file:../viewport", "@wordpress/wordcount": "file:../wordcount", "change-case": "^4.1.2", - "classnames": "^2.3.1", + "clsx": "^2.1.1", "colord": "^2.7.0", "escape-html": "^1.0.3", "fast-average-color": "^9.1.1", @@ -53452,7 +53455,7 @@ "@wordpress/icons": "file:../icons", "@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts", "@wordpress/private-apis": "file:../private-apis", - "classnames": "^2.3.1", + "clsx": "^2.1.1", "cmdk": "^0.2.0" }, "engines": { @@ -53498,7 +53501,7 @@ "@wordpress/rich-text": "file:../rich-text", "@wordpress/warning": "file:../warning", "change-case": "^4.1.2", - "classnames": "^2.3.1", + "clsx": "^2.1.1", "colord": "^2.7.0", "date-fns": "^3.6.0", "deepmerge": "^4.3.0", @@ -53730,7 +53733,7 @@ "@wordpress/preferences": "file:../preferences", "@wordpress/private-apis": "file:../private-apis", "@wordpress/widgets": "file:../widgets", - "classnames": "^2.3.1", + "clsx": "^2.1.1", "fast-deep-equal": "^3.1.3" }, "engines": { @@ -53802,7 +53805,7 @@ "@wordpress/keycodes": "file:../keycodes", "@wordpress/primitives": "file:../primitives", "@wordpress/private-apis": "file:../private-apis", - "classnames": "^2.3.1", + "clsx": "^2.1.1", "remove-accents": "^0.5.0" }, "engines": { @@ -54048,7 +54051,7 @@ "@wordpress/viewport": "file:../viewport", "@wordpress/warning": "file:../warning", "@wordpress/widgets": "file:../widgets", - "classnames": "^2.3.1", + "clsx": "^2.1.1", "memize": "^2.1.0" }, "engines": { @@ -54107,8 +54110,8 @@ "@wordpress/widgets": "file:../widgets", "@wordpress/wordcount": "file:../wordcount", "change-case": "^4.1.2", - "classnames": "^2.3.1", "client-zip": "^2.4.4", + "clsx": "^2.1.1", "colord": "^2.9.2", "deepmerge": "^4.3.0", "fast-deep-equal": "^3.1.3", @@ -54156,7 +54159,7 @@ "@wordpress/reusable-blocks": "file:../reusable-blocks", "@wordpress/url": "file:../url", "@wordpress/widgets": "file:../widgets", - "classnames": "^2.3.1" + "clsx": "^2.1.1" }, "engines": { "node": ">=12" @@ -54205,7 +54208,7 @@ "@wordpress/url": "file:../url", "@wordpress/warning": "file:../warning", "@wordpress/wordcount": "file:../wordcount", - "classnames": "^2.3.1", + "clsx": "^2.1.1", "date-fns": "^3.6.0", "memize": "^2.1.0", "react-autosize-textarea": "^7.1.0", @@ -54600,7 +54603,7 @@ "@wordpress/preferences": "file:../preferences", "@wordpress/private-apis": "file:../private-apis", "@wordpress/viewport": "file:../viewport", - "classnames": "^2.3.1" + "clsx": "^2.1.1" }, "engines": { "node": ">=12" @@ -54900,7 +54903,7 @@ "@wordpress/i18n": "file:../i18n", "@wordpress/icons": "file:../icons", "@wordpress/private-apis": "file:../private-apis", - "classnames": "^2.3.1" + "clsx": "^2.1.1" }, "engines": { "node": ">=12" @@ -54941,7 +54944,7 @@ "dependencies": { "@babel/runtime": "^7.16.0", "@wordpress/element": "file:../element", - "classnames": "^2.3.1" + "clsx": "^2.1.1" }, "engines": { "node": ">=12" @@ -55800,7 +55803,7 @@ "@wordpress/i18n": "file:../i18n", "@wordpress/icons": "file:../icons", "@wordpress/notices": "file:../notices", - "classnames": "^2.3.1" + "clsx": "^2.1.1" }, "peerDependencies": { "react": "^18.0.0", @@ -68565,7 +68568,7 @@ "@wordpress/warning": "file:../warning", "@wordpress/wordcount": "file:../wordcount", "change-case": "^4.1.2", - "classnames": "^2.3.1", + "clsx": "^2.1.1", "colord": "^2.7.0", "deepmerge": "^4.3.0", "diff": "^4.0.2", @@ -68648,7 +68651,7 @@ "@wordpress/viewport": "file:../viewport", "@wordpress/wordcount": "file:../wordcount", "change-case": "^4.1.2", - "classnames": "^2.3.1", + "clsx": "^2.1.1", "colord": "^2.7.0", "escape-html": "^1.0.3", "fast-average-color": "^9.1.1", @@ -68734,7 +68737,7 @@ "@wordpress/icons": "file:../icons", "@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts", "@wordpress/private-apis": "file:../private-apis", - "classnames": "^2.3.1", + "clsx": "^2.1.1", "cmdk": "^0.2.0" } }, @@ -68771,7 +68774,7 @@ "@wordpress/rich-text": "file:../rich-text", "@wordpress/warning": "file:../warning", "change-case": "^4.1.2", - "classnames": "^2.3.1", + "clsx": "^2.1.1", "colord": "^2.7.0", "date-fns": "^3.6.0", "deepmerge": "^4.3.0", @@ -68946,7 +68949,7 @@ "@wordpress/preferences": "file:../preferences", "@wordpress/private-apis": "file:../private-apis", "@wordpress/widgets": "file:../widgets", - "classnames": "^2.3.1", + "clsx": "^2.1.1", "fast-deep-equal": "^3.1.3" } }, @@ -68993,7 +68996,7 @@ "@wordpress/keycodes": "file:../keycodes", "@wordpress/primitives": "file:../primitives", "@wordpress/private-apis": "file:../private-apis", - "classnames": "^2.3.1", + "clsx": "^2.1.1", "remove-accents": "^0.5.0" }, "dependencies": { @@ -69152,7 +69155,7 @@ "@wordpress/viewport": "file:../viewport", "@wordpress/warning": "file:../warning", "@wordpress/widgets": "file:../widgets", - "classnames": "^2.3.1", + "clsx": "^2.1.1", "memize": "^2.1.0" } }, @@ -69202,8 +69205,8 @@ "@wordpress/widgets": "file:../widgets", "@wordpress/wordcount": "file:../wordcount", "change-case": "^4.1.2", - "classnames": "^2.3.1", "client-zip": "^2.4.4", + "clsx": "^2.1.1", "colord": "^2.9.2", "deepmerge": "^4.3.0", "fast-deep-equal": "^3.1.3", @@ -69242,7 +69245,7 @@ "@wordpress/reusable-blocks": "file:../reusable-blocks", "@wordpress/url": "file:../url", "@wordpress/widgets": "file:../widgets", - "classnames": "^2.3.1" + "clsx": "^2.1.1" } }, "@wordpress/editor": { @@ -69282,7 +69285,7 @@ "@wordpress/url": "file:../url", "@wordpress/warning": "file:../warning", "@wordpress/wordcount": "file:../wordcount", - "classnames": "^2.3.1", + "clsx": "^2.1.1", "date-fns": "^3.6.0", "memize": "^2.1.0", "react-autosize-textarea": "^7.1.0", @@ -69534,7 +69537,7 @@ "@wordpress/preferences": "file:../preferences", "@wordpress/private-apis": "file:../private-apis", "@wordpress/viewport": "file:../viewport", - "classnames": "^2.3.1" + "clsx": "^2.1.1" } }, "@wordpress/is-shallow-equal": { @@ -69691,7 +69694,7 @@ "@wordpress/i18n": "file:../i18n", "@wordpress/icons": "file:../icons", "@wordpress/private-apis": "file:../private-apis", - "classnames": "^2.3.1" + "clsx": "^2.1.1" } }, "@wordpress/preferences-persistence": { @@ -69709,7 +69712,7 @@ "requires": { "@babel/runtime": "^7.16.0", "@wordpress/element": "file:../element", - "classnames": "^2.3.1" + "clsx": "^2.1.1" } }, "@wordpress/priority-queue": { @@ -70298,7 +70301,7 @@ "@wordpress/i18n": "file:../i18n", "@wordpress/icons": "file:../icons", "@wordpress/notices": "file:../notices", - "classnames": "^2.3.1" + "clsx": "^2.1.1" } }, "@wordpress/wordcount": { @@ -73014,11 +73017,6 @@ } } }, - "classnames": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz", - "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==" - }, "clean-css": { "version": "5.3.3", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz", @@ -73234,6 +73232,11 @@ "mimic-response": "^1.0.0" } }, + "clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==" + }, "cmd-shim": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/cmd-shim/-/cmd-shim-6.0.1.tgz", diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md index 3db126ca2de34..a8c3cebbe8f1c 100644 --- a/packages/block-editor/CHANGELOG.md +++ b/packages/block-editor/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Internal + +- Replaced `classnames` package with the faster and smaller `clsx` package ([#61138](https://github.com/WordPress/gutenberg/pull/61138)). + ## 12.25.0 (2024-05-02) ## 12.24.0 (2024-04-19) @@ -20,7 +24,7 @@ ## 12.18.0 (2024-01-24) -- Deprecated `__experimentalRecursionProvider` and `__experimentalUseHasRecursion` in favor of their new stable counterparts `RecursionProvider` and `useHasRecursion`. +- Deprecated `__experimentalRecursionProvider` and `__experimentalUseHasRecursion` in favor of their new stable counterparts `RecursionProvider` and `useHasRecursion`. ## 12.17.0 (2024-01-10) @@ -251,8 +255,8 @@ ### Breaking Changes -- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. -- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. +- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at . +- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at . ## 5.3.0 (2021-03-17) diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json index 3bfdd48fd9137..26221e597db7d 100644 --- a/packages/block-editor/package.json +++ b/packages/block-editor/package.json @@ -65,7 +65,7 @@ "@wordpress/warning": "file:../warning", "@wordpress/wordcount": "file:../wordcount", "change-case": "^4.1.2", - "classnames": "^2.3.1", + "clsx": "^2.1.1", "colord": "^2.7.0", "deepmerge": "^4.3.0", "diff": "^4.0.2", diff --git a/packages/block-editor/src/components/block-alignment-control/ui.js b/packages/block-editor/src/components/block-alignment-control/ui.js index 9356e59ef465a..b1762547bb815 100644 --- a/packages/block-editor/src/components/block-alignment-control/ui.js +++ b/packages/block-editor/src/components/block-alignment-control/ui.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import classNames from 'classnames'; +import clsx from 'clsx'; /** * WordPress dependencies @@ -85,7 +85,7 @@ function BlockAlignmentUI( { key={ controlName } icon={ icon } iconPosition="left" - className={ classNames( + className={ clsx( 'components-dropdown-menu__menu-item', { 'is-active': isSelected, diff --git a/packages/block-editor/src/components/block-card/index.js b/packages/block-editor/src/components/block-card/index.js index 4b5478485d87a..3122fb5cf0373 100644 --- a/packages/block-editor/src/components/block-card/index.js +++ b/packages/block-editor/src/components/block-card/index.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import classnames from 'classnames'; +import clsx from 'clsx'; /** * WordPress dependencies @@ -45,7 +45,7 @@ function BlockCard( { title, icon, description, blockType, className } ) { const { selectBlock } = useDispatch( blockEditorStore ); return ( -
+
{ parentNavBlockClientId && ( // This is only used by the Navigation block for now. It's not ideal having Navigation block specific code here.