From 41580fe1dc844beec03140b656c648a8d835effe Mon Sep 17 00:00:00 2001 From: Gutenberg Repository Automation Date: Wed, 30 Oct 2024 13:16:47 +0000 Subject: [PATCH] Merge changes published in the Gutenberg plugin "release/19.6" branch --- .eslintrc.js | 12 - .github/ISSUE_TEMPLATE/Bug_report.yml | 10 + .github/workflows/performance.yml | 4 +- .github/workflows/pull-request-automation.yml | 20 +- .github/workflows/rnmobile-android-runner.yml | 8 +- .github/workflows/rnmobile-ios-runner.yml | 8 +- .github/workflows/unit-test.yml | 2 +- README.md | 2 + backport-changelog/6.7/7661.md | 4 + backport-changelog/6.8/7488.md | 3 + backport-changelog/6.8/7498.md | 3 + backport-changelog/6.8/7604.md | 5 + backport-changelog/6.8/7643.md | 3 + .../get-subcomponent-descriptions.mjs | 46 + bin/api-docs/gen-components-docs/index.mjs | 30 +- .../gen-components-docs/markdown/index.mjs | 2 +- bin/api-docs/gen-theme-reference.mjs | 29 +- bin/check-licenses.mjs | 69 + changelog.txt | 236 + docs/contributors/code/README.md | 6 +- docs/contributors/code/managing-packages.md | 6 +- docs/explanations/architecture/styles.md | 2 +- docs/reference-guides/core-blocks.md | 2 +- .../data/data-core-block-editor.md | 33 + .../interactivity-api/api-reference.md | 935 +-- ...l-state-local-context-and-derived-state.md | 106 +- docs/tool/manifest.js | 2 +- gutenberg.php | 2 +- lib/class-wp-theme-json-gutenberg.php | 26 +- lib/client-assets.php | 7 +- lib/compat/wordpress-6.7/blocks.php | 62 +- ...ss-gutenberg-rest-posts-controller-6-7.php | 38 +- lib/compat/wordpress-6.7/rest-api.php | 19 + lib/compat/wordpress-6.8/block-comments.php | 70 + ...-gutenberg-rest-comment-controller-6-8.php | 135 + lib/experimental/editor-settings.php | 3 + lib/experiments-page.php | 12 + lib/global-styles-and-settings.php | 45 +- lib/load.php | 4 + package-lock.json | 5234 +++++++---------- package.json | 115 +- packages/README.md | 75 +- packages/a11y/package.json | 7 +- packages/annotations/.npmrc | 1 - packages/annotations/package.json | 11 +- packages/api-fetch/.npmrc | 1 - packages/api-fetch/package.json | 7 +- packages/autop/.npmrc | 1 - packages/autop/package.json | 3 +- .../babel-plugin-import-jsx-pragma/.npmrc | 1 - packages/babel-plugin-makepot/.npmrc | 1 - packages/babel-preset-default/.npmrc | 1 - packages/babel-preset-default/package.json | 4 +- packages/base-styles/.npmrc | 1 - packages/base-styles/_animations.scss | 5 + packages/base-styles/_z-index.scss | 3 + packages/blob/.npmrc | 1 - packages/blob/package.json | 3 +- packages/block-directory/.npmrc | 1 - packages/block-directory/package.json | 39 +- .../downloadable-block-list-item/index.js | 12 +- .../downloadable-block-list-item/style.scss | 12 +- packages/block-editor/.npmrc | 1 - packages/block-editor/README.md | 8 - packages/block-editor/package.json | 63 +- .../block-editor/src/autocompleters/block.js | 23 +- .../src/components/block-canvas/index.js | 18 +- .../src/components/block-canvas/style.scss | 2 + .../src/components/block-card/index.js | 6 +- .../index.js | 2 +- .../src/components/block-inspector/style.scss | 6 - .../src/components/block-list/block.js | 3 +- .../src/components/block-list/block.native.js | 4 - .../src/components/block-list/content.scss | 2 +- .../src/components/block-list/index.js | 8 +- .../block-list/use-block-props/index.js | 2 - .../use-focus-first-element.js | 8 +- .../use-selected-block-event-handlers.js | 27 +- .../block-list/use-in-between-inserter.js | 2 +- .../block-patterns-list/stories/fixtures.js | 834 +++ .../stories/index.story.js | 81 + .../components/block-patterns-list/style.scss | 2 + .../components/block-patterns-paging/index.js | 2 +- .../src/components/block-popover/index.js | 62 - .../src/components/block-preview/index.js | 4 +- .../block-settings-dropdown.js | 4 + .../components/block-settings-menu/index.js | 3 + .../components/block-toolbar/change-design.js | 133 + .../src/components/block-toolbar/index.js | 33 +- .../src/components/block-toolbar/shuffle.js | 111 - .../src/components/block-toolbar/style.scss | 16 + .../src/components/block-tools/index.js | 21 +- .../components/block-tools/insertion-point.js | 7 +- .../src/components/block-tools/style.scss | 20 - .../block-tools/use-show-block-tools.js | 13 - .../block-tools/zoom-out-mode-inserters.js | 65 +- .../block-tools/zoom-out-popover.js | 47 - .../block-tools/zoom-out-toolbar.js | 135 - .../block-variation-transforms/index.js | 4 +- .../block-vertical-alignment-control/icons.js | 34 - .../block-vertical-alignment-control/ui.js | 26 +- .../border-radius-control/linked-button.js | 20 +- .../collab/block-comment-icon-slot.js | 12 + .../collab/block-comment-icon-toolbar-slot.js | 12 + ...se-multiple-origin-colors-and-gradients.js | 8 +- .../convert-to-group-buttons/toolbar.js | 8 +- .../components/global-styles/color-panel.js | 12 +- .../test/use-global-styles-context.native.js | 1 + .../use-global-styles-context.native.js | 6 + .../src/components/iframe/content.scss | 13 +- .../src/components/iframe/index.js | 65 +- .../src/components/iframe/style.scss | 5 +- .../components/image-size-control/index.js | 117 +- .../image-size-control/test/index.js | 68 +- .../src/components/inner-blocks/index.js | 18 +- .../inserter-button/index.native.js | 2 +- .../pattern-category-previews.js | 5 +- .../block-patterns-tab/patterns-filter.js | 2 +- .../inserter/category-tabs/index.js | 18 +- .../src/components/inserter/menu.js | 10 +- .../src/components/inserter/style.scss | 13 + .../inspector-controls-tabs/index.js | 7 +- .../inspector-controls-tabs/utils.js | 3 - .../components/link-control/link-preview.js | 23 +- .../src/components/link-control/test/index.js | 87 +- .../src/components/list-view/appender.js | 11 +- .../src/components/list-view/branch.js | 14 +- .../src/components/list-view/index.js | 3 +- .../src/components/provider/index.js | 4 +- .../provider/test/experimental-provider.js | 44 +- .../rich-text/event-listeners/index.js | 6 +- .../src/components/rich-text/index.native.js | 2 - .../components/spacing-sizes-control/index.js | 6 +- .../input-controls/spacing-input-control.js | 8 +- .../spacing-sizes-control/linked-button.js | 14 +- .../src/components/tool-selector/index.js | 6 +- .../src/components/url-input/index.js | 2 +- .../components/use-block-commands/index.js | 2 +- .../components/use-block-drop-zone/index.js | 10 +- .../use-block-drop-zone/index.native.js | 1 - .../components/use-moving-animation/index.js | 1 - .../src/components/use-settings/index.js | 1 - .../src/components/writing-flow/index.js | 8 +- .../components/writing-flow/use-tab-nav.js | 3 +- .../block-editor/src/hooks/block-bindings.js | 79 +- .../src/hooks/contrast-checker.js | 1 - packages/block-editor/src/hooks/duotone.js | 4 +- packages/block-editor/src/hooks/style.js | 10 +- .../block-editor/src/hooks/use-zoom-out.js | 48 +- packages/block-editor/src/index.js | 1 - packages/block-editor/src/private-apis.js | 9 +- packages/block-editor/src/store/actions.js | 55 +- packages/block-editor/src/store/defaults.js | 3 +- .../block-editor/src/store/private-actions.js | 79 +- .../src/store/private-selectors.js | 28 +- packages/block-editor/src/store/reducer.js | 36 +- packages/block-editor/src/store/selectors.js | 67 +- .../block-editor/src/store/test/actions.js | 41 + .../block-editor/src/store/test/reducer.js | 23 + packages/block-editor/src/utils/dom.js | 24 +- .../src/utils/get-font-styles-and-weights.js | 4 +- .../src/utils/transform-styles/index.js | 5 +- packages/block-library/.npmrc | 1 - packages/block-library/README.md | 15 +- packages/block-library/package.json | 69 +- .../block-library/src/archives/block.json | 6 + .../block-library/src/archives/editor.scss | 8 + packages/block-library/src/avatar/hooks.js | 5 +- packages/block-library/src/avatar/index.php | 9 +- .../src/button/get-updated-link-attributes.js | 2 +- packages/block-library/src/button/style.scss | 3 + .../test/get-updated-link-attributes.js | 15 + .../src/comment-author-avatar/index.php | 2 +- .../block-library/src/comments/block.json | 24 +- .../block-library/src/comments/style.scss | 5 +- packages/block-library/src/cover/block.json | 3 + packages/block-library/src/cover/constants.js | 1 + .../block-library/src/cover/edit/index.js | 22 +- .../src/cover/edit/inspector-controls.js | 47 +- packages/block-library/src/cover/save.js | 2 + packages/block-library/src/cover/style.scss | 6 + packages/block-library/src/cover/test/edit.js | 4 +- packages/block-library/src/file/edit.js | 3 +- .../block-library/src/gallery/constants.js | 1 + packages/block-library/src/gallery/edit.js | 27 +- packages/block-library/src/gallery/utils.js | 25 +- packages/block-library/src/group/editor.scss | 12 + packages/block-library/src/html/edit.js | 8 +- packages/block-library/src/html/preview.js | 5 +- packages/block-library/src/image/style.scss | 1 + .../block-library/src/latest-posts/edit.js | 10 +- .../block-library/src/latest-posts/index.php | 2 +- .../src/navigation/edit/index.js | 33 +- .../edit/menu-inspector-controls.js | 4 +- .../edit/navigation-menu-selector.js | 4 +- .../block-library/src/navigation/editor.scss | 1 + packages/block-library/src/paragraph/edit.js | 2 +- .../src/post-featured-image/edit.js | 2 +- .../src/post-time-to-read/edit.js | 4 +- .../src/post-time-to-read/index.php | 2 +- .../block-library/src/query-title/edit.js | 4 +- .../edit/inspector-controls/order-control.js | 4 +- packages/block-library/src/rss/index.php | 2 +- packages/block-library/src/search/edit.js | 53 +- .../__snapshots__/transforms.native.js.snap | 6 + .../src/separator/test/transforms.native.js | 2 +- .../block-library/src/separator/transforms.js | 11 + .../block-library/src/social-links/edit.js | 1 - packages/block-library/src/spacer/index.js | 2 + .../__snapshots__/transforms.native.js.snap | 6 + .../src/spacer/test/transforms.native.js | 2 +- .../block-library/src/spacer/transforms.js | 20 + .../src/table-of-contents/edit.js | 8 +- packages/block-library/src/table/edit.js | 1 - .../src/template-part/edit/index.js | 2 +- .../block-library/src/video/tracks-editor.js | 4 +- .../block-serialization-default-parser/.npmrc | 1 - .../package.json | 3 +- .../block-serialization-spec-parser/.npmrc | 1 - .../package.json | 3 +- packages/blocks/.npmrc | 1 - packages/blocks/CHANGELOG.md | 4 + packages/blocks/package.json | 33 +- packages/blocks/src/api/test/registration.js | 44 + .../blocks/src/store/process-block-type.js | 36 + packages/browserslist-config/.npmrc | 1 - packages/commands/.npmrc | 0 packages/commands/package.json | 17 +- packages/components/.npmrc | 1 - packages/components/CHANGELOG.md | 33 + packages/components/package.json | 37 +- .../src/alignment-matrix-control/README.md | 3 +- .../src/angle-picker-control/README.md | 3 +- .../src/animate/stories/index.story.tsx | 3 +- .../autocomplete/autocompleter-ui.native.js | 6 +- .../src/autocomplete/autocompleter-ui.tsx | 8 +- .../components/src/autocomplete/index.tsx | 9 +- .../components/src/base-control/README.md | 105 +- .../src/base-control/docs-manifest.json | 12 + .../src/base-control/stories/index.story.tsx | 4 + packages/components/src/base-control/types.ts | 3 + .../border-box-control/README.md | 1 + .../border-box-control/component.tsx | 1 + .../border-box-control/hook.ts | 7 + .../stories/index.story.tsx | 1 + .../src/border-box-control/test/index.tsx | 1 + .../border-control-dropdown/component.tsx | 36 +- .../border-control/border-control/README.md | 1 + .../border-control/component.tsx | 1 + .../src/border-control/border-control/hook.ts | 8 +- .../border-control/stories/index.story.tsx | 1 + .../src/border-control/test/index.js | 1 + .../src/button/stories/index.story.tsx | 3 +- .../src/card/stories/index.story.tsx | 3 +- .../src/color-palette/index.native.js | 3 +- .../components/src/color-palette/index.tsx | 2 +- .../components/src/color-palette/style.scss | 6 +- .../src/color-picker/index.native.js | 1 - .../components/src/composite/legacy/index.tsx | 7 +- .../src/composite/stories/index.story.tsx | 3 +- .../gradient-bar/control-points.tsx | 2 +- .../components/src/date-time/date/index.tsx | 1 - .../src/disabled/stories/index.story.tsx | 3 +- .../src/draggable/stories/index.story.tsx | 3 +- .../src/dropdown-menu-v2/context.tsx | 13 - .../components/src/dropdown-menu-v2/group.tsx | 26 - .../src/dropdown-menu-v2/separator.tsx | 27 - .../dropdown-menu-v2/stories/index.story.tsx | 639 -- .../src/font-size-picker/index.native.js | 14 +- .../components/src/form-token-field/index.tsx | 3 - .../src/form-token-field/style.scss | 5 +- .../src/form-token-field/suggestions-list.tsx | 6 + .../src/item-group/stories/index.story.tsx | 12 +- .../stories/index.story.tsx | 3 +- .../src/{dropdown-menu-v2 => menu}/README.md | 68 +- .../checkbox-item.tsx | 28 +- packages/components/src/menu/context.tsx | 13 + .../group-label.tsx | 16 +- packages/components/src/menu/group.tsx | 26 + .../src/{dropdown-menu-v2 => menu}/index.tsx | 135 +- .../item-help-text.tsx | 10 +- .../{dropdown-menu-v2 => menu}/item-label.tsx | 10 +- .../src/{dropdown-menu-v2 => menu}/item.tsx | 26 +- .../{dropdown-menu-v2 => menu}/radio-item.tsx | 28 +- packages/components/src/menu/separator.tsx | 27 + .../src/menu/stories/index.story.tsx | 542 ++ .../src/{dropdown-menu-v2 => menu}/styles.ts | 34 +- .../{dropdown-menu-v2 => menu}/test/index.tsx | 370 +- .../src/{dropdown-menu-v2 => menu}/types.ts | 47 +- .../use-temporary-focus-visible-fix.ts | 0 .../index.native.js | 4 +- .../navigation-screen.native.js | 8 +- .../mobile/bottom-sheet/range-cell.native.js | 2 +- .../bottom-sheet/stepper-cell/index.native.js | 2 +- .../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 +- .../stories/navigable-menu.story.tsx | 3 +- .../stories/tabbable-container.story.tsx | 3 +- 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/palette-edit/index.tsx | 9 +- .../components/src/palette-edit/styles.ts | 68 +- .../src/panel/stories/index.story.tsx | 3 +- packages/components/src/private-apis.ts | 6 +- packages/components/src/radio-group/index.tsx | 2 + .../src/resizable-box/stories/index.story.tsx | 3 +- .../components/src/sandbox/index.native.js | 4 +- packages/components/src/sandbox/index.tsx | 9 +- .../src/sandbox/stories/index.story.tsx | 3 +- .../src/scroll-lock/stories/index.story.tsx | 3 +- .../src/search-control/index.native.js | 4 +- .../src/shortcut/stories/index.story.tsx | 3 +- .../src/slot-fill/bubbles-virtually/slot.tsx | 3 +- packages/components/src/slot-fill/fill.ts | 9 +- .../src/slot-fill/stories/index.story.tsx | 3 +- packages/components/src/spacer/hook.ts | 5 +- packages/components/src/tab-panel/index.tsx | 3 + .../src/tab-panel/stories/index.story.tsx | 3 +- packages/components/src/tab-panel/style.scss | 4 +- packages/components/src/tabs/README.md | 84 +- packages/components/src/tabs/index.tsx | 301 +- .../src/tabs/stories/index.story.tsx | 7 +- packages/components/src/tabs/styles.ts | 18 +- packages/components/src/tabs/tab.tsx | 26 +- packages/components/src/tabs/tablist.tsx | 46 +- packages/components/src/tabs/test/index.tsx | 249 +- packages/components/src/tabs/types.ts | 138 +- .../src/theme/stories/index.story.tsx | 3 +- .../toggle-group-control/component.tsx | 1 + .../components/src/toolbar/toolbar/index.tsx | 3 + .../tools-panel-header/component.tsx | 2 +- .../src/tools-panel/tools-panel-item/hook.ts | 2 - .../components/src/tooltip/index.native.js | 20 +- .../src/unit-control/index.native.js | 8 +- .../src/utils/deprecated-36px-size.ts | 24 + packages/components/src/utils/element-rect.ts | 16 +- .../utils/hooks/use-animated-offset-rect.ts | 14 +- .../src/utils/hooks/use-update-effect.js | 2 - .../visually-hidden/stories/index.story.tsx | 3 +- packages/compose/.npmrc | 1 - packages/compose/package.json | 17 +- .../src/hooks/use-copy-to-clipboard/index.js | 6 +- .../compose/src/hooks/use-drop-zone/index.js | 68 +- packages/core-commands/.npmrc | 1 - packages/core-commands/package.json | 29 +- packages/core-data/.npmrc | 1 - packages/core-data/package.json | 35 +- packages/core-data/src/actions.js | 20 +- packages/core-data/src/entities.js | 64 - .../core-data/src/entity-types/attachment.ts | 36 +- .../src/hooks/test/use-entity-record.js | 11 +- .../src/hooks/use-entity-block-editor.js | 13 +- packages/core-data/src/resolvers.js | 88 +- packages/core-data/src/test/actions.js | 63 +- packages/core-data/src/test/entities.js | 80 - packages/core-data/src/test/resolvers.js | 124 +- .../create-block-interactive-template/.npmrc | 1 - .../create-block-tutorial-template/.npmrc | 1 - packages/create-block/.npmrc | 1 - packages/create-block/CHANGELOG.md | 4 + packages/create-block/README.md | 31 +- packages/create-block/lib/index.js | 10 +- packages/create-block/lib/init-block.js | 23 +- .../create-block/lib/init-package-json.js | 10 +- packages/create-block/lib/init-wp-env.js | 8 +- packages/create-block/lib/init-wp-scripts.js | 11 +- packages/create-block/lib/output.js | 13 +- packages/create-block/lib/scaffold.js | 14 +- packages/create-block/package.json | 2 +- packages/customize-widgets/.npmrc | 1 - packages/customize-widgets/package.json | 45 +- packages/data-controls/package.json | 9 +- packages/data-controls/src/index.ts | 4 +- packages/data/.npmrc | 1 - packages/data/package.json | 17 +- .../data/src/components/use-select/index.js | 1 - .../src/components/use-select/test/index.js | 4 +- packages/dataviews/.npmrc | 1 - packages/dataviews/package.json | 21 +- .../dataviews-bulk-actions/index.tsx | 12 +- .../dataviews-filters/add-filter.tsx | 18 +- .../components/dataviews-filters/index.tsx | 8 +- .../dataviews-item-actions/index.tsx | 30 +- .../dataviews-selection-checkbox/index.tsx | 5 +- .../dataviews-view-config/index.tsx | 18 +- .../src/dataforms-layouts/panel/index.tsx | 4 +- .../src/dataviews-layouts/list/index.tsx | 22 +- .../src/dataviews-layouts/list/style.scss | 8 +- .../table/column-header-menu.tsx | 66 +- packages/dataviews/src/types.ts | 8 +- packages/date/.npmrc | 1 - packages/date/package.json | 5 +- packages/deprecated/.npmrc | 1 - packages/deprecated/package.json | 5 +- packages/docgen/.npmrc | 1 - packages/dom-ready/.npmrc | 1 - packages/dom-ready/package.json | 3 +- packages/dom/.npmrc | 1 - packages/dom/package.json | 5 +- packages/e2e-test-utils-playwright/.npmrc | 1 - packages/e2e-test-utils/.npmrc | 1 - packages/e2e-test-utils/package.json | 6 +- packages/e2e-tests/.npmrc | 1 - packages/e2e-tests/package.json | 14 +- packages/e2e-tests/plugins/block-bindings.php | 86 + packages/edit-post/.npmrc | 1 - packages/edit-post/package.json | 61 +- .../components/keyboard-shortcuts/index.js | 2 +- .../edit-post/src/components/layout/index.js | 8 +- .../components/layout/use-should-iframe.js | 25 +- packages/edit-site/.npmrc | 1 - packages/edit-site/package.json | 82 +- .../src/components/add-new-post/index.js | 2 +- .../src/components/add-new-template/index.js | 2 +- .../src/components/add-new-template/utils.js | 21 +- .../edit-site/src/components/app/index.js | 6 +- .../block-editor/use-editor-iframe-props.js | 40 +- .../block-editor/use-site-editor-settings.js | 22 +- .../edit-site/src/components/editor/index.js | 47 +- .../editor/use-adapt-editor-to-canvas.js | 53 + .../src/components/editor/use-editor-title.js | 6 +- .../global-styles-sidebar/default-sidebar.js | 1 - .../components/global-styles-sidebar/index.js | 151 +- .../global-styles-sidebar/style.scss | 6 + .../global-styles/font-sizes/font-size.js | 26 +- .../font-sizes/font-sizes-count.js | 5 +- .../global-styles/font-sizes/font-sizes.js | 16 +- .../src/components/global-styles/palette.js | 39 +- .../src/components/global-styles/root-menu.js | 19 +- .../global-styles/screen-block-list.js | 7 - .../components/global-styles/screen-css.js | 1 + .../screen-revisions/revisions-buttons.js | 4 +- .../components/global-styles/screen-root.js | 15 +- .../global-styles/screen-style-variations.js | 5 +- .../global-styles/shadows-edit-panel.js | 25 +- .../components/global-styles/shadows-panel.js | 4 - .../global-styles/typography-elements.js | 14 +- .../src/components/global-styles/ui.js | 11 + .../global-styles/variations/variation.js | 6 +- .../variations/variations-panel.js | 1 - .../components/keyboard-shortcuts/global.js | 47 - .../components/keyboard-shortcuts/register.js | 27 - .../src/components/layout/animation.js | 1 - .../edit-site/src/components/layout/index.js | 50 +- .../edit-site/src/components/layout/router.js | 151 +- .../src/components/layout/style.scss | 4 +- .../delete-category-menu-item.js | 8 +- .../page-patterns/use-pattern-settings.js | 2 +- .../src/components/page-templates/index.js | 1 - .../src/components/pagination/index.js | 2 +- .../src/components/post-edit/index.js | 39 +- .../src/components/post-fields/index.js | 61 +- .../src/components/post-fields/style.scss | 3 + .../src/components/post-list/index.js | 2 +- .../src/components/post-list/style.scss | 2 +- .../src/components/posts-app/index.js | 4 +- .../src/components/posts-app/router.js | 6 +- .../src/components/resizable-frame/index.js | 29 +- .../src/components/revisions/index.js | 5 +- .../save-keyboard-shortcut/index.js | 69 + .../src/components/save-panel/index.js | 62 +- .../sidebar-dataviews/default-views.js | 7 +- .../index.js | 76 +- .../use-navigation-menu-handlers.js | 4 +- .../build-navigation-label.js | 8 +- .../index.js | 24 +- .../style.scss | 2 +- .../sidebar-navigation-screen/index.js | 3 +- .../components/site-editor-routes/README.md | 20 + .../site-editor-routes/home-edit.js | 17 + .../site-editor-routes/home-view.js | 16 + .../components/site-editor-routes/index.js | 60 + .../site-editor-routes/navigation-edit.js | 22 + .../navigation-item-edit.js | 26 + .../navigation-item-view.js | 25 + .../site-editor-routes/navigation-view.js | 21 + .../site-editor-routes/pages-edit.js | 35 + .../pages-list-view-quick-edit.js | 56 + .../site-editor-routes/pages-list-view.js | 44 + .../pages-view-quick-edit.js | 53 + .../site-editor-routes/pages-view.js | 39 + .../site-editor-routes/patterns-edit.js | 24 + .../site-editor-routes/patterns-view.js | 22 + .../site-editor-routes/styles-edit.js | 17 + .../site-editor-routes/styles-view.js | 16 + .../site-editor-routes/templates-edit.js | 22 + .../site-editor-routes/templates-list-view.js | 28 + .../site-editor-routes/templates-view.js | 22 + .../src/components/site-hub/index.js | 4 +- .../src/components/site-hub/style.scss | 4 + .../components/style-book/color-examples.tsx | 44 + .../src/components/style-book/constants.ts | 93 +- .../style-book/duotone-examples.tsx | 53 + .../src/components/style-book/examples.ts | 63 - .../src/components/style-book/examples.tsx | 113 + .../src/components/style-book/index.js | 201 +- .../src/components/style-book/style.scss | 26 +- .../components/style-book/test/categories.js | 5 - .../src/components/style-book/types.ts | 35 +- .../use-init-edited-entity-from-url.js | 12 +- .../use-sync-canvas-mode-with-url.js | 73 - .../src/hooks/commands/use-common-commands.js | 100 +- .../hooks/commands/use-edit-mode-commands.js | 32 +- .../hooks/commands/use-set-command-context.js | 16 +- .../edit-site/src/store/private-actions.js | 86 +- .../edit-site/src/store/private-selectors.js | 15 +- packages/edit-site/src/store/reducer.js | 28 +- packages/edit-site/src/style.scss | 3 + packages/edit-widgets/.npmrc | 1 - packages/edit-widgets/package.json | 57 +- .../src/components/sidebar/index.js | 1 - packages/editor/.npmrc | 1 - packages/editor/CHANGELOG.md | 4 + packages/editor/README.md | 4 +- packages/editor/package.json | 73 +- packages/editor/src/bindings/post-meta.js | 1 + .../components/collab-sidebar/add-comment.js | 124 + .../collab-sidebar/comment-button-toolbar.js | 29 + .../collab-sidebar/comment-button.js | 31 + .../src/components/collab-sidebar/comments.js | 404 ++ .../components/collab-sidebar/constants.js | 1 + .../src/components/collab-sidebar/index.js | 307 + .../src/components/collab-sidebar/style.scss | 111 + .../src/components/collab-sidebar/utils.js | 9 + .../editor/src/components/commands/index.js | 16 +- .../src/components/document-bar/index.js | 22 +- .../src/components/document-bar/style.scss | 4 - .../src/components/document-tools/index.js | 8 +- .../src/components/editor-interface/index.js | 7 +- .../components/entities-saved-states/index.js | 4 +- .../register-shortcuts.js | 6 +- .../global-styles-provider/index.js | 26 +- .../editor/src/components/header/index.js | 4 +- .../src/components/inserter-sidebar/index.js | 9 +- .../src/components/page-attributes/parent.js | 10 +- .../components/plugin-more-menu-item/index.js | 23 +- .../plugin-preview-menu-item/index.js | 27 +- .../src/components/plugin-sidebar/index.js | 13 - .../src/components/post-actions/index.js | 19 +- .../src/components/post-author/panel.js | 6 +- .../src/components/post-card-panel/index.js | 52 +- .../src/components/post-card-panel/style.scss | 10 +- .../post-content-information/index.js | 2 +- .../components/post-featured-image/index.js | 47 +- .../components/post-featured-image/style.scss | 7 +- .../components/post-last-revision/index.js | 2 +- .../src/components/post-schedule/label.js | 2 +- .../src/components/post-sticky/test/index.js | 12 +- .../post-taxonomies/flat-term-selector.js | 19 +- .../hierarchical-term-selector.js | 4 +- .../editor/src/components/post-url/index.js | 2 +- .../editor/src/components/post-url/panel.js | 6 +- .../src/components/preview-dropdown/index.js | 2 - .../editor/src/components/provider/index.js | 55 +- .../provider/use-block-editor-settings.js | 2 +- .../editor/src/components/sidebar/header.js | 5 +- .../editor/src/components/sidebar/index.js | 8 +- .../src/components/time-to-read/index.js | 6 +- .../src/components/visual-editor/index.js | 73 +- .../visual-editor}/use-zoom-out-mode-exit.js | 28 +- .../src/components/zoom-out-toggle/index.js | 44 +- .../actions/duplicate-template-part.tsx | 6 +- packages/editor/src/store/actions.js | 8 +- packages/editor/src/store/private-actions.js | 6 +- packages/editor/src/store/selectors.js | 5 +- packages/editor/src/style.scss | 1 + packages/editor/src/utils/pageTypeBadge.js | 41 + packages/editor/src/utils/terms.js | 6 +- packages/editor/src/utils/test/terms.js | 6 +- packages/element/.npmrc | 1 - packages/element/package.json | 5 +- packages/env/.npmrc | 1 - packages/escape-html/.npmrc | 1 - packages/escape-html/package.json | 3 +- packages/eslint-plugin/.npmrc | 1 - packages/eslint-plugin/package.json | 4 +- packages/fields/.npmrc | 1 - packages/fields/README.md | 12 + packages/fields/package.json | 46 +- packages/fields/src/actions/delete-post.tsx | 13 +- .../fields/src/actions/duplicate-post.tsx | 4 +- .../src/actions/view-post-revisions.tsx | 2 +- .../featured-image/featured-image-edit.tsx | 122 + .../featured-image/featured-image-view.tsx | 38 + .../fields/src/fields/featured-image/index.ts | 24 + .../src/fields/featured-image/style.scss | 95 + packages/fields/src/fields/index.ts | 3 + packages/fields/src/fields/parent/index.ts | 27 + .../fields/src/fields/parent/parent-edit.tsx | 348 ++ .../fields/src/fields/parent/parent-view.tsx | 33 + packages/fields/src/fields/parent/utils.ts | 18 + packages/fields/src/fields/slug/index.ts | 23 + packages/fields/src/fields/slug/slug-edit.tsx | 156 + packages/fields/src/fields/slug/slug-view.tsx | 26 + packages/fields/src/fields/slug/style.scss | 22 + packages/fields/src/mutation/index.ts | 6 +- packages/fields/src/styles.scss | 1 + packages/fields/src/types.ts | 2 + packages/fields/tsconfig.json | 4 +- packages/format-library/.npmrc | 1 - packages/format-library/package.json | 27 +- packages/format-library/src/link/index.js | 10 +- packages/hooks/.npmrc | 1 - packages/hooks/package.json | 3 +- packages/html-entities/.npmrc | 1 - packages/html-entities/package.json | 3 +- packages/i18n/.npmrc | 1 - packages/i18n/package.json | 5 +- packages/icons/.npmrc | 1 - packages/icons/package.json | 7 +- packages/icons/src/index.js | 5 + packages/icons/src/library/justify-bottom.js | 12 + .../src/library/justify-center-vertical.js | 12 + .../library/justify-space-between-vertical.js | 12 + .../src/library/justify-stretch-vertical.js | 12 + packages/icons/src/library/justify-top.js | 12 + packages/interactivity-router/.npmrc | 1 - packages/interactivity-router/package.json | 4 +- packages/interactivity/.npmrc | 1 - packages/interactivity/CHANGELOG.md | 4 + packages/interactivity/src/proxies/state.ts | 25 +- .../src/proxies/test/deep-merge.ts | 125 +- packages/interface/.npmrc | 1 - packages/interface/CHANGELOG.md | 4 + .../complementary-area-context/index.js | 12 - packages/interface/lock-unlock.js | 10 - packages/interface/package.json | 26 +- .../complementary-area-context/index.js | 12 - .../complementary-area-header/index.js | 33 +- .../complementary-area-header/style.scss | 30 - .../complementary-area-toggle/index.js | 13 +- .../components/complementary-area/README.md | 8 - .../components/complementary-area/index.js | 24 +- .../components/complementary-area/style.scss | 6 +- .../components/interface-skeleton/index.js | 2 +- packages/is-shallow-equal/.npmrc | 1 - packages/is-shallow-equal/package.json | 3 +- packages/jest-console/.npmrc | 1 - packages/jest-preset-default/.npmrc | 1 - packages/jest-preset-default/package.json | 2 +- packages/jest-puppeteer-axe/.npmrc | 1 - packages/keyboard-shortcuts/.npmrc | 0 packages/keyboard-shortcuts/package.json | 9 +- packages/keycodes/.npmrc | 1 - packages/keycodes/package.json | 5 +- packages/lazy-import/.npmrc | 1 - packages/list-reusable-blocks/.npmrc | 1 - packages/list-reusable-blocks/package.json | 15 +- packages/media-utils/.npmrc | 1 - packages/media-utils/package.json | 11 +- packages/notices/.npmrc | 1 - packages/notices/package.json | 7 +- packages/npm-package-json-lint-config/.npmrc | 1 - packages/nux/.npmrc | 1 - packages/nux/package.json | 17 +- packages/patterns/.npmrc | 1 - packages/patterns/package.json | 31 +- .../src/components/duplicate-pattern-modal.js | 6 +- .../pattern-overrides-block-controls.js | 2 +- packages/plugins/.npmrc | 1 - packages/plugins/README.md | 2 + packages/plugins/package.json | 16 +- .../src/components/plugin-context/index.tsx | 7 + packages/plugins/tsconfig.json | 1 + packages/postcss-plugins-preset/.npmrc | 1 - packages/postcss-plugins-preset/package.json | 2 +- packages/postcss-themes/.npmrc | 1 - packages/preferences-persistence/.npmrc | 1 - packages/preferences-persistence/package.json | 5 +- packages/preferences/.npmrc | 1 - packages/preferences/package.json | 21 +- packages/prettier-config/.npmrc | 1 - packages/primitives/.npmrc | 1 - packages/primitives/package.json | 5 +- packages/priority-queue/.npmrc | 1 - packages/priority-queue/package.json | 3 +- packages/private-apis/package.json | 3 +- packages/private-apis/src/implementation.js | 1 - packages/project-management-automation/.npmrc | 1 - packages/react-i18n/package.json | 7 +- packages/react-native-aztec/.npmrc | 1 - packages/react-native-aztec/package.json | 4 +- packages/react-native-bridge/.npmrc | 1 - packages/react-native-bridge/package.json | 2 +- packages/react-native-editor/.npmrc | 1 - packages/react-native-editor/package.json | 24 +- .../readable-js-assets-webpack-plugin/.npmrc | 1 - packages/redux-routine/.npmrc | 1 - packages/redux-routine/package.json | 3 +- packages/report-flaky-tests/.npmrc | 1 - packages/reusable-blocks/.npmrc | 1 - packages/reusable-blocks/package.json | 25 +- packages/rich-text/.npmrc | 1 - packages/rich-text/package.json | 19 +- .../src/component/event-listeners/index.js | 6 +- .../src/remove-unregistered-formatting.js | 0 packages/router/.npmrc | 0 packages/router/package.json | 9 +- packages/router/src/history.ts | 36 +- packages/scripts/.npmrc | 1 - packages/scripts/CHANGELOG.md | 9 + packages/scripts/README.md | 8 + packages/scripts/package.json | 22 +- packages/scripts/scripts/check-licenses.js | 346 +- packages/scripts/scripts/plugin-zip.js | 29 +- packages/scripts/utils/license.js | 377 ++ .../test/license.js} | 5 +- .../test/licenses/apache2-mit.txt | 0 .../test/licenses/apache2.txt | 0 .../test/licenses/bsd3clause.txt | 0 .../{scripts => utils}/test/licenses/mit.txt | 0 .../test/licenses/w3cbsd.txt | 0 packages/server-side-render/.npmrc | 1 - packages/server-side-render/package.json | 21 +- packages/shortcode/.npmrc | 1 - packages/shortcode/package.json | 3 +- packages/style-engine/.npmrc | 1 - packages/style-engine/package.json | 3 +- packages/stylelint-config/.npmrc | 1 - packages/sync/.npmrc | 1 - packages/sync/package.json | 5 +- packages/token-list/.npmrc | 1 - packages/token-list/package.json | 3 +- packages/undo-manager/.npmrc | 1 - packages/undo-manager/package.json | 5 +- packages/url/.npmrc | 1 - packages/url/package.json | 3 +- packages/viewport/.npmrc | 1 - packages/viewport/package.json | 9 +- packages/{a11y => vips}/.npmrc | 0 packages/vips/CHANGELOG.md | 7 + packages/vips/README.md | 98 + packages/vips/package.json | 36 + packages/vips/src/index.ts | 366 ++ packages/vips/src/test/resize-image.ts | 223 + packages/vips/src/types.ts | 170 + packages/vips/src/utils.ts | 43 + packages/vips/tsconfig.json | 9 + packages/warning/.npmrc | 1 - packages/warning/package.json | 3 +- packages/widgets/.npmrc | 1 - packages/widgets/package.json | 25 +- packages/wordcount/.npmrc | 1 - packages/wordcount/package.json | 3 +- patches/wasm-vips+0.0.10.patch | 15 + storybook/manager-head.html | 1 + storybook/preview.js | 7 + .../foundations/design-language/elevation.mdx | 87 + .../foundations/design-language/radius.mdx | 55 + .../static/elevation-examples.svg | 170 + .../design-language/static/elevation.svg | 208 + .../design-language/static/radius-do.svg | 58 + .../design-language/static/radius-dont.svg | 58 + .../design-language/static/radius.svg | 62 + .../design-language/static/wp-logo@2x.png | Bin 0 -> 5395 bytes storybook/stories/playground/index.story.js | 12 + .../playground/with-undo-redo/index.js | 2 + .../stories/playground/zoom-out/index.js | 68 + .../stories/playground/zoom-out/pattern.js | 39 + storybook/stories/tokens/components.tsx | 53 + storybook/stories/tokens/elevation.mdx | 90 + storybook/stories/tokens/radius.mdx | 105 + test/e2e/specs/editor/blocks/buttons.spec.js | 12 +- test/e2e/specs/editor/blocks/cover.spec.js | 71 + test/e2e/specs/editor/blocks/links.spec.js | 48 +- .../editor/blocks/navigation-colors.spec.js | 6 +- .../various/block-bindings/post-meta.spec.js | 49 + .../editor/various/inserting-blocks.spec.js | 4 + .../keep-styles-on-block-transforms.spec.js | 2 +- .../specs/site-editor/font-library.spec.js | 34 +- .../site-editor/global-styles-sidebar.spec.js | 6 +- .../site-editor/push-to-global-styles.spec.js | 15 +- test/e2e/specs/site-editor/style-book.spec.js | 6 +- .../site-editor/style-variations.spec.js | 22 +- test/e2e/specs/site-editor/styles.spec.js | 4 +- .../user-global-styles-revisions.spec.js | 6 +- test/e2e/specs/site-editor/zoom-out.spec.js | 9 +- test/unit/config/global-mocks.js | 5 + test/unit/config/wasm-stub.js | 1 + test/unit/jest.config.js | 1 + tools/webpack/packages.js | 52 +- tools/webpack/script-modules.js | 39 +- tsconfig.json | 1 + 794 files changed, 16063 insertions(+), 10119 deletions(-) create mode 100644 backport-changelog/6.7/7661.md create mode 100644 backport-changelog/6.8/7488.md create mode 100644 backport-changelog/6.8/7498.md create mode 100644 backport-changelog/6.8/7604.md create mode 100644 backport-changelog/6.8/7643.md create mode 100644 bin/api-docs/gen-components-docs/get-subcomponent-descriptions.mjs create mode 100755 bin/check-licenses.mjs create mode 100644 lib/compat/wordpress-6.8/block-comments.php create mode 100644 lib/compat/wordpress-6.8/class-gutenberg-rest-comment-controller-6-8.php delete mode 100644 packages/annotations/.npmrc delete mode 100644 packages/api-fetch/.npmrc delete mode 100644 packages/autop/.npmrc delete mode 100644 packages/babel-plugin-import-jsx-pragma/.npmrc delete mode 100644 packages/babel-plugin-makepot/.npmrc delete mode 100644 packages/babel-preset-default/.npmrc delete mode 100644 packages/base-styles/.npmrc delete mode 100644 packages/blob/.npmrc delete mode 100644 packages/block-directory/.npmrc delete mode 100644 packages/block-editor/.npmrc create mode 100644 packages/block-editor/src/components/block-patterns-list/stories/fixtures.js create mode 100644 packages/block-editor/src/components/block-patterns-list/stories/index.story.js create mode 100644 packages/block-editor/src/components/block-toolbar/change-design.js delete mode 100644 packages/block-editor/src/components/block-toolbar/shuffle.js delete mode 100644 packages/block-editor/src/components/block-tools/zoom-out-popover.js delete mode 100644 packages/block-editor/src/components/block-tools/zoom-out-toolbar.js delete mode 100644 packages/block-editor/src/components/block-vertical-alignment-control/icons.js create mode 100644 packages/block-editor/src/components/collab/block-comment-icon-slot.js create mode 100644 packages/block-editor/src/components/collab/block-comment-icon-toolbar-slot.js delete mode 100644 packages/block-library/.npmrc create mode 100644 packages/block-library/src/cover/constants.js create mode 100644 packages/block-library/src/spacer/transforms.js delete mode 100644 packages/block-serialization-default-parser/.npmrc delete mode 100644 packages/block-serialization-spec-parser/.npmrc delete mode 100644 packages/blocks/.npmrc delete mode 100644 packages/browserslist-config/.npmrc delete mode 100644 packages/commands/.npmrc delete mode 100644 packages/components/.npmrc create mode 100644 packages/components/src/base-control/docs-manifest.json delete mode 100644 packages/components/src/dropdown-menu-v2/context.tsx delete mode 100644 packages/components/src/dropdown-menu-v2/group.tsx delete mode 100644 packages/components/src/dropdown-menu-v2/separator.tsx delete mode 100644 packages/components/src/dropdown-menu-v2/stories/index.story.tsx rename packages/components/src/{dropdown-menu-v2 => menu}/README.md (70%) rename packages/components/src/{dropdown-menu-v2 => menu}/checkbox-item.tsx (63%) create mode 100644 packages/components/src/menu/context.tsx rename packages/components/src/{dropdown-menu-v2 => menu}/group-label.tsx (55%) create mode 100644 packages/components/src/menu/group.tsx rename packages/components/src/{dropdown-menu-v2 => menu}/index.tsx (60%) rename packages/components/src/{dropdown-menu-v2 => menu}/item-help-text.tsx (61%) rename packages/components/src/{dropdown-menu-v2 => menu}/item-label.tsx (62%) rename packages/components/src/{dropdown-menu-v2 => menu}/item.tsx (60%) rename packages/components/src/{dropdown-menu-v2 => menu}/radio-item.tsx (67%) create mode 100644 packages/components/src/menu/separator.tsx create mode 100644 packages/components/src/menu/stories/index.story.tsx rename packages/components/src/{dropdown-menu-v2 => menu}/styles.ts (91%) rename packages/components/src/{dropdown-menu-v2 => menu}/test/index.tsx (75%) rename packages/components/src/{dropdown-menu-v2 => menu}/types.ts (71%) rename packages/components/src/{dropdown-menu-v2 => menu}/use-temporary-focus-visible-fix.ts (100%) create mode 100644 packages/components/src/utils/deprecated-36px-size.ts delete mode 100644 packages/compose/.npmrc delete mode 100644 packages/core-commands/.npmrc delete mode 100644 packages/core-data/.npmrc delete mode 100644 packages/create-block-interactive-template/.npmrc delete mode 100644 packages/create-block-tutorial-template/.npmrc delete mode 100644 packages/create-block/.npmrc delete mode 100644 packages/customize-widgets/.npmrc delete mode 100644 packages/data/.npmrc delete mode 100644 packages/dataviews/.npmrc delete mode 100644 packages/date/.npmrc delete mode 100644 packages/deprecated/.npmrc delete mode 100644 packages/docgen/.npmrc delete mode 100644 packages/dom-ready/.npmrc delete mode 100644 packages/dom/.npmrc delete mode 100644 packages/e2e-test-utils-playwright/.npmrc delete mode 100644 packages/e2e-test-utils/.npmrc delete mode 100644 packages/e2e-tests/.npmrc delete mode 100644 packages/edit-post/.npmrc delete mode 100644 packages/edit-site/.npmrc create mode 100644 packages/edit-site/src/components/editor/use-adapt-editor-to-canvas.js delete mode 100644 packages/edit-site/src/components/keyboard-shortcuts/global.js delete mode 100644 packages/edit-site/src/components/keyboard-shortcuts/register.js create mode 100644 packages/edit-site/src/components/post-fields/style.scss create mode 100644 packages/edit-site/src/components/save-keyboard-shortcut/index.js create mode 100644 packages/edit-site/src/components/site-editor-routes/README.md create mode 100644 packages/edit-site/src/components/site-editor-routes/home-edit.js create mode 100644 packages/edit-site/src/components/site-editor-routes/home-view.js create mode 100644 packages/edit-site/src/components/site-editor-routes/index.js create mode 100644 packages/edit-site/src/components/site-editor-routes/navigation-edit.js create mode 100644 packages/edit-site/src/components/site-editor-routes/navigation-item-edit.js create mode 100644 packages/edit-site/src/components/site-editor-routes/navigation-item-view.js create mode 100644 packages/edit-site/src/components/site-editor-routes/navigation-view.js create mode 100644 packages/edit-site/src/components/site-editor-routes/pages-edit.js create mode 100644 packages/edit-site/src/components/site-editor-routes/pages-list-view-quick-edit.js create mode 100644 packages/edit-site/src/components/site-editor-routes/pages-list-view.js create mode 100644 packages/edit-site/src/components/site-editor-routes/pages-view-quick-edit.js create mode 100644 packages/edit-site/src/components/site-editor-routes/pages-view.js create mode 100644 packages/edit-site/src/components/site-editor-routes/patterns-edit.js create mode 100644 packages/edit-site/src/components/site-editor-routes/patterns-view.js create mode 100644 packages/edit-site/src/components/site-editor-routes/styles-edit.js create mode 100644 packages/edit-site/src/components/site-editor-routes/styles-view.js create mode 100644 packages/edit-site/src/components/site-editor-routes/templates-edit.js create mode 100644 packages/edit-site/src/components/site-editor-routes/templates-list-view.js create mode 100644 packages/edit-site/src/components/site-editor-routes/templates-view.js create mode 100644 packages/edit-site/src/components/style-book/color-examples.tsx create mode 100644 packages/edit-site/src/components/style-book/duotone-examples.tsx delete mode 100644 packages/edit-site/src/components/style-book/examples.ts create mode 100644 packages/edit-site/src/components/style-book/examples.tsx delete mode 100644 packages/edit-site/src/components/sync-state-with-url/use-sync-canvas-mode-with-url.js delete mode 100644 packages/edit-widgets/.npmrc delete mode 100644 packages/editor/.npmrc create mode 100644 packages/editor/src/components/collab-sidebar/add-comment.js create mode 100644 packages/editor/src/components/collab-sidebar/comment-button-toolbar.js create mode 100644 packages/editor/src/components/collab-sidebar/comment-button.js create mode 100644 packages/editor/src/components/collab-sidebar/comments.js create mode 100644 packages/editor/src/components/collab-sidebar/constants.js create mode 100644 packages/editor/src/components/collab-sidebar/index.js create mode 100644 packages/editor/src/components/collab-sidebar/style.scss create mode 100644 packages/editor/src/components/collab-sidebar/utils.js rename packages/{block-editor/src/components/block-list/use-block-props => editor/src/components/visual-editor}/use-zoom-out-mode-exit.js (58%) create mode 100644 packages/editor/src/utils/pageTypeBadge.js delete mode 100644 packages/element/.npmrc delete mode 100644 packages/env/.npmrc delete mode 100644 packages/escape-html/.npmrc delete mode 100644 packages/eslint-plugin/.npmrc delete mode 100644 packages/fields/.npmrc create mode 100644 packages/fields/src/fields/featured-image/featured-image-edit.tsx create mode 100644 packages/fields/src/fields/featured-image/featured-image-view.tsx create mode 100644 packages/fields/src/fields/featured-image/index.ts create mode 100644 packages/fields/src/fields/featured-image/style.scss create mode 100644 packages/fields/src/fields/parent/index.ts create mode 100644 packages/fields/src/fields/parent/parent-edit.tsx create mode 100644 packages/fields/src/fields/parent/parent-view.tsx create mode 100644 packages/fields/src/fields/parent/utils.ts create mode 100644 packages/fields/src/fields/slug/index.ts create mode 100644 packages/fields/src/fields/slug/slug-edit.tsx create mode 100644 packages/fields/src/fields/slug/slug-view.tsx create mode 100644 packages/fields/src/fields/slug/style.scss create mode 100644 packages/fields/src/styles.scss delete mode 100644 packages/format-library/.npmrc delete mode 100644 packages/hooks/.npmrc delete mode 100644 packages/html-entities/.npmrc delete mode 100644 packages/i18n/.npmrc delete mode 100644 packages/icons/.npmrc create mode 100644 packages/icons/src/library/justify-bottom.js create mode 100644 packages/icons/src/library/justify-center-vertical.js create mode 100644 packages/icons/src/library/justify-space-between-vertical.js create mode 100644 packages/icons/src/library/justify-stretch-vertical.js create mode 100644 packages/icons/src/library/justify-top.js delete mode 100644 packages/interactivity-router/.npmrc delete mode 100644 packages/interactivity/.npmrc delete mode 100644 packages/interface/.npmrc delete mode 100644 packages/interface/complementary-area-context/index.js delete mode 100644 packages/interface/lock-unlock.js delete mode 100644 packages/interface/src/components/complementary-area-context/index.js delete mode 100644 packages/is-shallow-equal/.npmrc delete mode 100644 packages/jest-console/.npmrc delete mode 100644 packages/jest-preset-default/.npmrc delete mode 100644 packages/jest-puppeteer-axe/.npmrc delete mode 100644 packages/keyboard-shortcuts/.npmrc delete mode 100644 packages/keycodes/.npmrc delete mode 100644 packages/lazy-import/.npmrc delete mode 100644 packages/list-reusable-blocks/.npmrc delete mode 100644 packages/media-utils/.npmrc delete mode 100644 packages/notices/.npmrc delete mode 100644 packages/npm-package-json-lint-config/.npmrc delete mode 100644 packages/nux/.npmrc delete mode 100644 packages/patterns/.npmrc delete mode 100644 packages/plugins/.npmrc delete mode 100644 packages/postcss-plugins-preset/.npmrc delete mode 100644 packages/postcss-themes/.npmrc delete mode 100644 packages/preferences-persistence/.npmrc delete mode 100644 packages/preferences/.npmrc delete mode 100644 packages/prettier-config/.npmrc delete mode 100644 packages/primitives/.npmrc delete mode 100644 packages/priority-queue/.npmrc delete mode 100644 packages/project-management-automation/.npmrc delete mode 100644 packages/react-native-aztec/.npmrc delete mode 100644 packages/react-native-bridge/.npmrc delete mode 100644 packages/react-native-editor/.npmrc delete mode 100644 packages/readable-js-assets-webpack-plugin/.npmrc delete mode 100644 packages/redux-routine/.npmrc delete mode 100644 packages/report-flaky-tests/.npmrc delete mode 100644 packages/reusable-blocks/.npmrc delete mode 100644 packages/rich-text/.npmrc delete mode 100644 packages/rich-text/src/remove-unregistered-formatting.js delete mode 100644 packages/router/.npmrc delete mode 100644 packages/scripts/.npmrc create mode 100644 packages/scripts/utils/license.js rename packages/scripts/{scripts/test/check-licenses.js => utils/test/license.js} (96%) rename packages/scripts/{scripts => utils}/test/licenses/apache2-mit.txt (100%) rename packages/scripts/{scripts => utils}/test/licenses/apache2.txt (100%) rename packages/scripts/{scripts => utils}/test/licenses/bsd3clause.txt (100%) rename packages/scripts/{scripts => utils}/test/licenses/mit.txt (100%) rename packages/scripts/{scripts => utils}/test/licenses/w3cbsd.txt (100%) delete mode 100644 packages/server-side-render/.npmrc delete mode 100644 packages/shortcode/.npmrc delete mode 100644 packages/style-engine/.npmrc delete mode 100644 packages/stylelint-config/.npmrc delete mode 100644 packages/sync/.npmrc delete mode 100644 packages/token-list/.npmrc delete mode 100644 packages/undo-manager/.npmrc delete mode 100644 packages/url/.npmrc delete mode 100644 packages/viewport/.npmrc rename packages/{a11y => vips}/.npmrc (100%) create mode 100644 packages/vips/CHANGELOG.md create mode 100644 packages/vips/README.md create mode 100644 packages/vips/package.json create mode 100644 packages/vips/src/index.ts create mode 100644 packages/vips/src/test/resize-image.ts create mode 100644 packages/vips/src/types.ts create mode 100644 packages/vips/src/utils.ts create mode 100644 packages/vips/tsconfig.json delete mode 100644 packages/warning/.npmrc delete mode 100644 packages/widgets/.npmrc delete mode 100644 packages/wordcount/.npmrc create mode 100644 patches/wasm-vips+0.0.10.patch create mode 100644 storybook/stories/foundations/design-language/elevation.mdx create mode 100644 storybook/stories/foundations/design-language/radius.mdx create mode 100644 storybook/stories/foundations/design-language/static/elevation-examples.svg create mode 100644 storybook/stories/foundations/design-language/static/elevation.svg create mode 100644 storybook/stories/foundations/design-language/static/radius-do.svg create mode 100644 storybook/stories/foundations/design-language/static/radius-dont.svg create mode 100644 storybook/stories/foundations/design-language/static/radius.svg create mode 100644 storybook/stories/foundations/design-language/static/wp-logo@2x.png create mode 100644 storybook/stories/playground/zoom-out/index.js create mode 100644 storybook/stories/playground/zoom-out/pattern.js create mode 100644 storybook/stories/tokens/components.tsx create mode 100644 storybook/stories/tokens/elevation.mdx create mode 100644 storybook/stories/tokens/radius.mdx create mode 100644 test/unit/config/wasm-stub.js 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/.github/ISSUE_TEMPLATE/Bug_report.yml b/.github/ISSUE_TEMPLATE/Bug_report.yml index 5d7c876ccefca..41bb6f1c9ba10 100644 --- a/.github/ISSUE_TEMPLATE/Bug_report.yml +++ b/.github/ISSUE_TEMPLATE/Bug_report.yml @@ -65,3 +65,13 @@ body: options: - label: 'Yes' required: true + + - type: checkboxes + id: themes + attributes: + label: Please confirm which theme type you used for testing. + options: + - label: 'Block' + - label: 'Classic' + - label: 'Hybrid (e.g. classic with theme.json)' + - label: 'Not sure' diff --git a/.github/workflows/performance.yml b/.github/workflows/performance.yml index a79f2eee9315a..b947f4ff08c60 100644 --- a/.github/workflows/performance.yml +++ b/.github/workflows/performance.yml @@ -47,9 +47,9 @@ jobs: [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" nvm -v - - name: Compare performance with trunk + - name: Compare performance with base branch if: github.event_name == 'pull_request' - run: ./bin/plugin/cli.js perf $GITHUB_SHA trunk --tests-branch $GITHUB_SHA + run: ./bin/plugin/cli.js perf $GITHUB_SHA ${{ github.base_ref }} --tests-branch $GITHUB_SHA - name: Compare performance with current WordPress Core and previous Gutenberg versions if: github.event_name == 'release' diff --git a/.github/workflows/pull-request-automation.yml b/.github/workflows/pull-request-automation.yml index 9aecafc2009e7..cf37fa00c060b 100644 --- a/.github/workflows/pull-request-automation.yml +++ b/.github/workflows/pull-request-automation.yml @@ -17,24 +17,8 @@ jobs: ref: trunk show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} - - name: Use desired version of Node.js - uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4 - with: - node-version-file: '.nvmrc' - check-latest: true - - - name: Cache NPM packages - uses: actions/cache@3624ceb22c1c5a301c8db4169662070a689d9ea8 # v4.1.1 - with: - # npm cache files are stored in `~/.npm` on Linux/macOS - path: ~/.npm - key: ${{ runner.os }}-node-${{ matrix.node }}-npm-pr-automation-cache-${{ hashFiles('**/package-lock.json') }} - - # Changing into the action's directory and running `npm install` is much - # faster than a full project-wide `npm ci`. - - name: Install NPM dependencies - run: npm install - working-directory: packages/project-management-automation + - name: Setup Node.js and install dependencies + uses: ./.github/setup-node - uses: ./packages/project-management-automation with: diff --git a/.github/workflows/rnmobile-android-runner.yml b/.github/workflows/rnmobile-android-runner.yml index a1e332be78303..df302926f20ce 100644 --- a/.github/workflows/rnmobile-android-runner.yml +++ b/.github/workflows/rnmobile-android-runner.yml @@ -37,7 +37,7 @@ jobs: uses: ./.github/setup-node - name: Restore tests setup cache - uses: actions/cache@3624ceb22c1c5a301c8db4169662070a689d9ea8 # v4.1.1 + uses: actions/cache@6849a6489940f00c2f30c0fb92c6274307ccb58a # v4.1.2 with: path: | ~/.appium @@ -50,7 +50,7 @@ jobs: uses: gradle/actions/setup-gradle@d156388eb19639ec20ade50009f3d199ce1e2808 # v4.1.0 - name: AVD cache - uses: actions/cache@3624ceb22c1c5a301c8db4169662070a689d9ea8 # v4.1.1 + uses: actions/cache@6849a6489940f00c2f30c0fb92c6274307ccb58a # v4.1.2 id: avd-cache with: path: | @@ -60,7 +60,7 @@ jobs: - name: Create AVD and generate snapshot for caching if: steps.avd-cache.outputs.cache-hit != 'true' - uses: reactivecircus/android-emulator-runner@f0d1ed2dcad93c7479e8b2f2226c83af54494915 # v2.32.0 + uses: reactivecircus/android-emulator-runner@62dbb605bba737720e10b196cb4220d374026a6d # v2.33.0 with: api-level: ${{ matrix.api-level }} force-avd-creation: false @@ -71,7 +71,7 @@ jobs: script: echo "Generated AVD snapshot for caching." - name: Run tests - uses: reactivecircus/android-emulator-runner@f0d1ed2dcad93c7479e8b2f2226c83af54494915 # v2.32.0 + uses: reactivecircus/android-emulator-runner@62dbb605bba737720e10b196cb4220d374026a6d # v2.33.0 with: api-level: ${{ matrix.api-level }} force-avd-creation: false diff --git a/.github/workflows/rnmobile-ios-runner.yml b/.github/workflows/rnmobile-ios-runner.yml index a5c5dfd3f96f9..90fb7e15fe4d1 100644 --- a/.github/workflows/rnmobile-ios-runner.yml +++ b/.github/workflows/rnmobile-ios-runner.yml @@ -27,7 +27,7 @@ jobs: with: show-progress: ${{ runner.debug == '1' && 'true' || 'false' }} - - uses: ruby/setup-ruby@f26937343756480a8cb3ae1f623b9c8d89ed6984 # v1.196.0 + - uses: ruby/setup-ruby@7bae1d00b5db9166f4f0fc47985a3a5702cb58f0 # v1.197.0 with: # `.ruby-version` file location working-directory: packages/react-native-editor/ios @@ -42,7 +42,7 @@ jobs: uses: ./.github/setup-node - name: Restore tests setup cache - uses: actions/cache@3624ceb22c1c5a301c8db4169662070a689d9ea8 # v4.1.1 + uses: actions/cache@6849a6489940f00c2f30c0fb92c6274307ccb58a # v4.1.2 with: path: | ~/.appium @@ -55,7 +55,7 @@ jobs: run: find package-lock.json packages/react-native-editor/ios packages/react-native-aztec/ios packages/react-native-bridge/ios -type f -print0 | sort -z | xargs -0 shasum | tee ios-checksums.txt - name: Restore build cache - uses: actions/cache@3624ceb22c1c5a301c8db4169662070a689d9ea8 # v4.1.1 + uses: actions/cache@6849a6489940f00c2f30c0fb92c6274307ccb58a # v4.1.2 with: path: | packages/react-native-editor/ios/build/GutenbergDemo/Build/Products/Release-iphonesimulator/GutenbergDemo.app @@ -63,7 +63,7 @@ jobs: key: ${{ runner.os }}-ios-build-${{ matrix.xcode }}-${{ matrix.device }}-${{ hashFiles('ios-checksums.txt') }} - name: Restore pods cache - uses: actions/cache@3624ceb22c1c5a301c8db4169662070a689d9ea8 # v4.1.1 + uses: actions/cache@6849a6489940f00c2f30c0fb92c6274307ccb58a # v4.1.2 with: path: | packages/react-native-editor/ios/Pods diff --git a/.github/workflows/unit-test.yml b/.github/workflows/unit-test.yml index 272d7e12d7193..cb3ac1cc1b154 100644 --- a/.github/workflows/unit-test.yml +++ b/.github/workflows/unit-test.yml @@ -296,7 +296,7 @@ jobs: run: echo "date=$(/bin/date -u --date='last Mon' "+%F")" >> $GITHUB_OUTPUT - name: Cache PHPCS scan cache - uses: actions/cache@3624ceb22c1c5a301c8db4169662070a689d9ea8 # v4.1.1 + uses: actions/cache@6849a6489940f00c2f30c0fb92c6274307ccb58a # v4.1.2 with: path: .cache/phpcs.json key: ${{ runner.os }}-date-${{ steps.get-date.outputs.date }}-phpcs-cache-${{ hashFiles('**/composer.json', 'phpcs.xml.dist') }} diff --git a/README.md b/README.md index 9c920337ef594..87db481b5b6b4 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,8 @@ [![React Native E2E Tests (iOS)]()](https://github.com/WordPress/gutenberg/actions?query=workflow%3A%22React+Native+E2E+Tests+%28iOS%29%22+branch%3Atrunk) [![React Native E2E Tests (Android)]()](https://github.com/WordPress/gutenberg/actions?query=workflow%3A%22React+Native+E2E+Tests+%28Android%29%22+branch%3Atrunk) +Storybook Badge + [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org) ![Screenshot of the Gutenberg Editor, editing a post in WordPress](https://user-images.githubusercontent.com/1204802/100067796-fc3e8700-2e36-11eb-993b-6b80b4310b87.png) diff --git a/backport-changelog/6.7/7661.md b/backport-changelog/6.7/7661.md new file mode 100644 index 0000000000000..711d03595162c --- /dev/null +++ b/backport-changelog/6.7/7661.md @@ -0,0 +1,4 @@ +https://github.com/WordPress/wordpress-develop/pull/7661 + +* https://github.com/WordPress/gutenberg/pull/66468 +* https://github.com/WordPress/gutenberg/pull/66543 diff --git a/backport-changelog/6.8/7488.md b/backport-changelog/6.8/7488.md new file mode 100644 index 0000000000000..a588bef0e0179 --- /dev/null +++ b/backport-changelog/6.8/7488.md @@ -0,0 +1,3 @@ +https://github.com/WordPress/wordpress-develop/pull/7488 + +* https://github.com/WordPress/gutenberg/pull/60622 \ No newline at end of file diff --git a/backport-changelog/6.8/7498.md b/backport-changelog/6.8/7498.md new file mode 100644 index 0000000000000..6c903246166b6 --- /dev/null +++ b/backport-changelog/6.8/7498.md @@ -0,0 +1,3 @@ +https://github.com/WordPress/wordpress-develop/pull/7498 + +* https://github.com/WordPress/gutenberg/pull/60622 \ No newline at end of file diff --git a/backport-changelog/6.8/7604.md b/backport-changelog/6.8/7604.md new file mode 100644 index 0000000000000..0ab4769810340 --- /dev/null +++ b/backport-changelog/6.8/7604.md @@ -0,0 +1,5 @@ +https://github.com/WordPress/wordpress-develop/pull/7604 + +* https://github.com/WordPress/gutenberg/pull/66285 +* https://github.com/WordPress/gutenberg/pull/66302 +* https://github.com/WordPress/gutenberg/pull/66306 diff --git a/backport-changelog/6.8/7643.md b/backport-changelog/6.8/7643.md new file mode 100644 index 0000000000000..e3c923a487be0 --- /dev/null +++ b/backport-changelog/6.8/7643.md @@ -0,0 +1,3 @@ +https://github.com/WordPress/wordpress-develop/pull/7643 + +* https://github.com/WordPress/gutenberg/pull/66432 diff --git a/bin/api-docs/gen-components-docs/get-subcomponent-descriptions.mjs b/bin/api-docs/gen-components-docs/get-subcomponent-descriptions.mjs new file mode 100644 index 0000000000000..4bb82652f1737 --- /dev/null +++ b/bin/api-docs/gen-components-docs/get-subcomponent-descriptions.mjs @@ -0,0 +1,46 @@ +/** + * External dependencies + */ +import fs from 'node:fs/promises'; +import babel from '@babel/core'; +import { parse as commentParser } from 'comment-parser'; + +/** + * Try to get subcomponent descriptions from the main component Object.assign() call. + */ +export async function getDescriptionsForSubcomponents( + filePath, + mainComponentName +) { + const fileContent = await fs.readFile( filePath, 'utf8' ); + const parsedFile = babel.parse( fileContent, { + filename: filePath, + } ); + const mainComponent = parsedFile.program.body + .filter( ( node ) => node.type === 'ExportNamedDeclaration' ) + .flatMap( ( node ) => node.declaration?.declarations ) + .find( ( node ) => node?.id.name === mainComponentName ); + + if ( + ! ( + // If the main component export has `Object.assign( ... )` + ( + mainComponent?.init?.type === 'CallExpression' && + mainComponent?.init?.callee?.object?.name === 'Object' && + mainComponent?.init?.callee?.property?.name === 'assign' + ) + ) + ) { + return; + } + + const properties = mainComponent?.init?.arguments[ 1 ]?.properties.map( + ( node ) => [ + node.key.name, + commentParser( `/*${ node.leadingComments?.[ 0 ].value }*/`, { + spacing: 'preserve', + } )?.[ 0 ]?.description, + ] + ); + return Object.fromEntries( properties ); +} diff --git a/bin/api-docs/gen-components-docs/index.mjs b/bin/api-docs/gen-components-docs/index.mjs index e036995b4c4f7..c7109dc4982c3 100644 --- a/bin/api-docs/gen-components-docs/index.mjs +++ b/bin/api-docs/gen-components-docs/index.mjs @@ -10,6 +10,7 @@ import path from 'path'; * Internal dependencies */ import { generateMarkdownDocs } from './markdown/index.mjs'; +import { getDescriptionsForSubcomponents } from './get-subcomponent-descriptions.mjs'; const MANIFEST_GLOB = 'packages/components/src/**/docs-manifest.json'; @@ -79,8 +80,10 @@ await Promise.all( displayName: manifest.displayName, } ); - const subcomponentTypeDocs = manifest.subcomponents?.map( - ( subcomponent ) => { + let subcomponentDescriptions; + + const subcomponentTypeDocs = await Promise.all( + manifest.subcomponents?.map( async ( subcomponent ) => { const docs = getTypeDocsForComponent( { manifestPath, componentFilePath: subcomponent.filePath, @@ -91,10 +94,29 @@ await Promise.all( docs.displayName = subcomponent.preferredDisplayName; } + if ( ! subcomponent.description ) { + subcomponentDescriptions ??= + getDescriptionsForSubcomponents( + path.resolve( + path.dirname( manifestPath ), + manifest.filePath + ), + manifest.displayName + ); + + docs.description = ( await subcomponentDescriptions )?.[ + subcomponent.displayName + ]; + } + return docs; - } + } ) ?? [] ); - const docs = generateMarkdownDocs( { typeDocs, subcomponentTypeDocs } ); + + const docs = generateMarkdownDocs( { + typeDocs, + subcomponentTypeDocs, + } ); const outputFile = path.resolve( path.dirname( manifestPath ), './README.md' diff --git a/bin/api-docs/gen-components-docs/markdown/index.mjs b/bin/api-docs/gen-components-docs/markdown/index.mjs index 85655b89f0841..126fdf0057b6e 100644 --- a/bin/api-docs/gen-components-docs/markdown/index.mjs +++ b/bin/api-docs/gen-components-docs/markdown/index.mjs @@ -10,8 +10,8 @@ import { generateMarkdownPropsJson } from './props.mjs'; export function generateMarkdownDocs( { typeDocs, subcomponentTypeDocs } ) { const mainDocsJson = [ - '\n', { h1: typeDocs.displayName }, + '', { p: `

See the WordPress Storybook for more detailed, interactive documentation.

`, }, 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', } ); } diff --git a/bin/check-licenses.mjs b/bin/check-licenses.mjs new file mode 100755 index 0000000000000..458590e696a9f --- /dev/null +++ b/bin/check-licenses.mjs @@ -0,0 +1,69 @@ +#!/usr/bin/env node + +/** + * External dependencies + */ +import { spawnSync } from 'node:child_process'; + +/** + * Internal dependencies + */ +import { checkDepsInTree } from '../packages/scripts/utils/license.js'; + +const ignored = [ '@ampproject/remapping' ]; + +/* + * `wp-scripts check-licenses` uses prod and dev dependencies of the package to scan for dependencies. With npm workspaces, workspace packages (the @wordpress/* packages) are not listed in the main package json and this approach does not work. + * + * Instead, work from an npm query that uses some custom information in package.json files to declare packages that are shipped with WordPress (and must be GPLv2 compatible) or other files that may use more permissive licenses. + */ + +/** + * @typedef PackageInfo + * @property {string} name Package name. + */ + +/** @type {ReadonlyArray} */ +const workspacePackages = JSON.parse( + spawnSync( + 'npm', + [ + 'query', + '.workspace:attr([wpScript]), .workspace:attr([wpScriptModuleExports])', + ], + /* + * Set the max buffer to ~157MB, since the output size for + * prod is ~21 MB and dev is ~110 MB + */ + { maxBuffer: 1024 * 1024 * 150 } + ).stdout +); + +const packageNames = workspacePackages.map( ( { name } ) => name ); + +const dependenciesToProcess = JSON.parse( + spawnSync( + 'npm', + [ + 'ls', + '--json', + '--long', + '--all', + '--lockfile-only', + '--omit=dev', + ...packageNames.map( + ( packageName ) => `--workspace=${ packageName }` + ), + ], + /* + * Set the max buffer to ~157MB, since the output size for + * prod is ~21 MB and dev is ~110 MB + */ + { maxBuffer: 1024 * 1024 * 150 } + ).stdout +).dependencies; + +checkDepsInTree( dependenciesToProcess, { + ignored, + gpl2: true, +} ); diff --git a/changelog.txt b/changelog.txt index b74a541e9cd1e..2b10884ae1088 100644 --- a/changelog.txt +++ b/changelog.txt @@ -1,5 +1,241 @@ == Changelog == += 19.5.0 = + +## Changelog + +### Enhancements + +- Remove the verb Toggle from the Block Inserter button. ([65983](https://github.com/WordPress/gutenberg/pull/65983)) +- Update jsdom to 25.0.1. ([65879](https://github.com/WordPress/gutenberg/pull/65879)) +- Write/Design tool: Persist as a user preference. ([65945](https://github.com/WordPress/gutenberg/pull/65945)) + +#### Zoom Out +- Make zoom transition smoother. ([66017](https://github.com/WordPress/gutenberg/pull/66017)) +- Try zooming out when selecting the patterns tab in the inserter. ([65785](https://github.com/WordPress/gutenberg/pull/65785)) +- Update/replace edit button with enter on selection. ([65760](https://github.com/WordPress/gutenberg/pull/65760)) + +#### Block Editor +- Cleanup `AutoBlockPreview` render memoization of `BlockList`. ([66060](https://github.com/WordPress/gutenberg/pull/66060)) +- Use shallow memo for prioritized inserter blocks. ([65737](https://github.com/WordPress/gutenberg/pull/65737)) + +#### Components +- Add type tokens to storybook. ([65993](https://github.com/WordPress/gutenberg/pull/65993)) +- Storybook: Add stub doc on existing colors. ([65982](https://github.com/WordPress/gutenberg/pull/65982)) + +#### Icons +- Update "hidden" icon to be clearer, and invert logic as used in Data Views. ([65914](https://github.com/WordPress/gutenberg/pull/65914)) +- Update cloud upload and add cloud download icon. ([65906](https://github.com/WordPress/gutenberg/pull/65906)) + +#### Global Styles +- Improve navigation logic for revisions screen. ([65946](https://github.com/WordPress/gutenberg/pull/65946)) + +#### Block bindings +- Register bindings sources in widgets screens. ([65937](https://github.com/WordPress/gutenberg/pull/65937)) + +#### Block Library +- Cover Block: Refactor setting panel. ([65432](https://github.com/WordPress/gutenberg/pull/65432)) + + +### Bug Fixes + +- Add argument with post ID to the editor.savePost hook. ([66165](https://github.com/WordPress/gutenberg/pull/66165)) +- Backport from WordPress Core: improve performance of WP_Theme_JSON::Merge when merging background styles. ([66002](https://github.com/WordPress/gutenberg/pull/66002)) +- BlockCanvas: Fix the height prop and width of the block editor. ([65977](https://github.com/WordPress/gutenberg/pull/65977)) +- Correct capability for the Experiments page. ([66118](https://github.com/WordPress/gutenberg/pull/66118)) +- Fix rich text toolbar corners. ([66163](https://github.com/WordPress/gutenberg/pull/66163)) +- Fix: Add missing `post.slug` dependency to `useMemo`. ([66125](https://github.com/WordPress/gutenberg/pull/66125)) +- Fix: Return result from wp_register_block_template function. ([66102](https://github.com/WordPress/gutenberg/pull/66102)) +- List all active fonts in the typography section. ([65806](https://github.com/WordPress/gutenberg/pull/65806)) + +#### Zoom Out +- Exit zoom out when mode is changed. ([65975](https://github.com/WordPress/gutenberg/pull/65975)) +- Fix scaling issues. ([65998](https://github.com/WordPress/gutenberg/pull/65998)) +- Fix zoom reflow by replacing border with padding. ([66012](https://github.com/WordPress/gutenberg/pull/66012)) +- Focus first section root block if no selected block and tabbing to zoom out canvas. ([65843](https://github.com/WordPress/gutenberg/pull/65843)) +- Make zoom out vertical toolbar consistent. ([65627](https://github.com/WordPress/gutenberg/pull/65627)) +- Polish zoom out inserter. ([66110](https://github.com/WordPress/gutenberg/pull/66110)) +- Position scaled html within available container space. ([66034](https://github.com/WordPress/gutenberg/pull/66034)) +- Restores setting zoom out mode to useZoomOut hook. ([65999](https://github.com/WordPress/gutenberg/pull/65999)) +- Use consistent canvas frame spacing on device preview and zoom out. ([66018](https://github.com/WordPress/gutenberg/pull/66018)) +- Zoom layout shift: Second alternate fix. ([66041](https://github.com/WordPress/gutenberg/pull/66041)) + +#### Block Library +- Code block: Set LTR direction for RTL languages. ([65891](https://github.com/WordPress/gutenberg/pull/65891)) +- Fix duotone on parallax/repeated featured image cover blocks. ([65929](https://github.com/WordPress/gutenberg/pull/65929)) +- Fix: Embed Block: Match HTML in the editor and frontend. ([65478](https://github.com/WordPress/gutenberg/pull/65478)) +- Hide grid visualizer when grid is template locked or block editing mode is not default. ([66065](https://github.com/WordPress/gutenberg/pull/66065)) +- Post Content Block: Fix conflict between clearFix and focus ring in the editor. ([65364](https://github.com/WordPress/gutenberg/pull/65364)) +- Post Content: Fix display of block support styles. ([66003](https://github.com/WordPress/gutenberg/pull/66003)) +- Post Terms: Fix fatal error when 'get_the_term_list' returns 'WP_Error'. ([65848](https://github.com/WordPress/gutenberg/pull/65848)) +- Query Loop: Fix isControlAllowed and isTemplate combined logic. ([65984](https://github.com/WordPress/gutenberg/pull/65984)) +- Query Loop: Fix query type indicator. ([65877](https://github.com/WordPress/gutenberg/pull/65877)) +- Revert "Update z-index hierarchy". ([66074](https://github.com/WordPress/gutenberg/pull/66074)) + +#### Block bindings +- Accept client ID as parameter for `useBlockBindingsUtils`. ([65818](https://github.com/WordPress/gutenberg/pull/65818)) +- Allow label override when it is defined in client registration. ([66160](https://github.com/WordPress/gutenberg/pull/66160)) +- Bootstrap server sources earlier. ([66058](https://github.com/WordPress/gutenberg/pull/66058)) +- Fix: Don't render image when `src` attribute is empty. ([66004](https://github.com/WordPress/gutenberg/pull/66004)) +- Allow the field types matching attribute types in bindings. ([66174](https://github.com/WordPress/gutenberg/pull/66174)) + +#### Global Styles +- Always preview style variations using desktop device type. ([66023](https://github.com/WordPress/gutenberg/pull/66023)) +- Improve Navigator usage in typography panel. ([65942](https://github.com/WordPress/gutenberg/pull/65942)) +- Leave screen if current shadow entry gets deleted. ([65935](https://github.com/WordPress/gutenberg/pull/65935)) +- `PaletteEdit`: Dedupe palette element slugs. ([65772](https://github.com/WordPress/gutenberg/pull/65772)) + +#### Block Editor +- Fix DropZone class names on drop. ([65798](https://github.com/WordPress/gutenberg/pull/65798)) +- Fix padding appender hook. ([66143](https://github.com/WordPress/gutenberg/pull/66143)) +- Memoize pattern objects returned from getAllowedPatterns. ([66159](https://github.com/WordPress/gutenberg/pull/66159)) + +#### Components +- Fix : Secondary Button Transition. ([66045](https://github.com/WordPress/gutenberg/pull/66045)) +- Global Styles: Fix overflow caused by RangeControl tooltip. ([65875](https://github.com/WordPress/gutenberg/pull/65875)) +- ToggleGroupControl: Don't set value on focus after a reset. ([66151](https://github.com/WordPress/gutenberg/pull/66151)) + +#### Interactivity API +- Allow "default" suffix values. ([65815](https://github.com/WordPress/gutenberg/pull/65815)) +- Correctly handle lazily added, deeply nested properties with `deepMerge()`. ([65465](https://github.com/WordPress/gutenberg/pull/65465)) +- Improvements to the experimental full-page navigation. ([64067](https://github.com/WordPress/gutenberg/pull/64067)) + +#### Site Editor +- Fix site editor back button visual regressions. ([66166](https://github.com/WordPress/gutenberg/pull/66166)) +- Zoom Out: When double clicking a template while zoomed out , reset zoom level instead of showing dialog. ([65963](https://github.com/WordPress/gutenberg/pull/65963)) + +#### CSS & Styling +- Editor: Prevent wrapping text when showing icon labels in header. ([66038](https://github.com/WordPress/gutenberg/pull/66038)) +- Update z-index hierarchy. ([65626](https://github.com/WordPress/gutenberg/pull/65626)) + +#### Data Views +- Data Views list layout: Revise for improved text truncation. ([65376](https://github.com/WordPress/gutenberg/pull/65376)) +- Fix: Pattern rendering issue. ([66022](https://github.com/WordPress/gutenberg/pull/66022)) + +#### Extensibility +- Rename wp_register_block_template() to register_block_template(). ([65958](https://github.com/WordPress/gutenberg/pull/65958)) + +#### Post Editor +- Fix "typewriter" spacing style application. ([65885](https://github.com/WordPress/gutenberg/pull/65885)) + +#### Synced Patterns +- Pattern block: Ensure consistent editing of overrides in Write Mode. ([65408](https://github.com/WordPress/gutenberg/pull/65408)) + + +### Accessibility + +#### Post Editor +- Fix meta boxes accessibility. ([65466](https://github.com/WordPress/gutenberg/pull/65466)) +- Fix navigate regions shortcuts on the back button WP logo slot. ([63611](https://github.com/WordPress/gutenberg/pull/63611)) +- Improve PostURL terminology and accessibility. ([63669](https://github.com/WordPress/gutenberg/pull/63669)) +- Match visible label of search inputs with their actual label. ([65458](https://github.com/WordPress/gutenberg/pull/65458)) + +#### Components +- Fixed : Modal dialog: Small improvement for elementShouldBeHidden. ([65941](https://github.com/WordPress/gutenberg/pull/65941)) +- ToggleGroupControl: Don't autoselect option on first group focus. ([65892](https://github.com/WordPress/gutenberg/pull/65892)) +- Tooltip: Add aria-describedby to anchor only if not redundant. ([65989](https://github.com/WordPress/gutenberg/pull/65989)) + +#### Typography +- Revert the "Manage fonts" button in Global Styles. ([66107](https://github.com/WordPress/gutenberg/pull/66107)) + + +### Performance + +#### Interactivity API +- Leverage scheduler.yield in splitTask when available. ([66001](https://github.com/WordPress/gutenberg/pull/66001)) + + +### Documentation + +- Add heading level curation documentation. ([66076](https://github.com/WordPress/gutenberg/pull/66076)) +- Components: Set up README auto-generator. ([66035](https://github.com/WordPress/gutenberg/pull/66035)) +- Contrast notes: Update 4.6:1 note with further context. ([66168](https://github.com/WordPress/gutenberg/pull/66168)) +- Data-basics/4-building-a-create-page-form is ready now. ([66100](https://github.com/WordPress/gutenberg/pull/66100)) +- Docs: env: Expand examples of path syntax. ([65972](https://github.com/WordPress/gutenberg/pull/65972)) +- Updated several typos in client-assets.php file. ([66084](https://github.com/WordPress/gutenberg/pull/66084)) +- Use correct label in PHP Backport documentation. ([65908](https://github.com/WordPress/gutenberg/pull/65908)) +- add: Usage examples in core editor documentation. ([63768](https://github.com/WordPress/gutenberg/pull/63768)) + + +### Code Quality + +- .screen-reader-text CSS update for responsive-block-control style.scss. ([66145](https://github.com/WordPress/gutenberg/pull/66145)) +- Add missing CHANGELOG entries for #64067. ([66120](https://github.com/WordPress/gutenberg/pull/66120)) +- Button: Move to stricter lint rule for 40px size adherence. ([65840](https://github.com/WordPress/gutenberg/pull/65840)) +- Private APIs: Remove obsolete try/catch block. ([65898](https://github.com/WordPress/gutenberg/pull/65898)) +- Remove clip and -webkit-clip for block-library common.scss. ([66144](https://github.com/WordPress/gutenberg/pull/66144)) +- Remove unused select toolbar code. ([65834](https://github.com/WordPress/gutenberg/pull/65834)) +- Simplify logical expression in `InitPatternModal`. ([65922](https://github.com/WordPress/gutenberg/pull/65922)) +- Theme JSON: Remove redundant check and relocate $selectors assignment. ([66154](https://github.com/WordPress/gutenberg/pull/66154)) +- Type the router package. ([65854](https://github.com/WordPress/gutenberg/pull/65854)) + +#### Global Styles +- Edit Site: Avoid recomputing variations when no theme variations. ([66137](https://github.com/WordPress/gutenberg/pull/66137)) +- Edit Site: Remove redundant state in `StyleVariationsContainer`. ([66130](https://github.com/WordPress/gutenberg/pull/66130)) + +#### Block Library +- Post Terms: Remove unnecessary 'get_the_terms' call. ([65867](https://github.com/WordPress/gutenberg/pull/65867)) +- Query Loop Block: Remove redundant sticky state. ([66126](https://github.com/WordPress/gutenberg/pull/66126)) + +#### Components +- Clean up Tabs animation logic. ([65878](https://github.com/WordPress/gutenberg/pull/65878)) +- SearchControl: Deprecate onClose prop. ([65988](https://github.com/WordPress/gutenberg/pull/65988)) + +#### Post Editor +- Block Visibility: Add end-to-end test. ([65880](https://github.com/WordPress/gutenberg/pull/65880)) + +#### Zoom Out +- Fix components coding standards in Zoom Out Toolbar. ([65858](https://github.com/WordPress/gutenberg/pull/65858)) + + +### Tools + +#### Testing +- Add an end-to-end test to check the interactions in write mode. ([65819](https://github.com/WordPress/gutenberg/pull/65819)) +- Composite: Add legacy unit tests to stable version. ([65952](https://github.com/WordPress/gutenberg/pull/65952)) +- Fix end-to-end Storybook configuration. ([66089](https://github.com/WordPress/gutenberg/pull/66089)) +- Tests: Add unit tests for image rendering. ([66010](https://github.com/WordPress/gutenberg/pull/66010)) +- Zoom out: End-to-end test - zoomed out mode zooms the canvas. ([65943](https://github.com/WordPress/gutenberg/pull/65943)) +- e2e: Fix Block Visibility test. ([65939](https://github.com/WordPress/gutenberg/pull/65939)) + +#### Build Tooling +- Dedupe npm packages. ([65913](https://github.com/WordPress/gutenberg/pull/65913)) +- Update and align babel dependencies version. ([65949](https://github.com/WordPress/gutenberg/pull/65949)) +- Update node-fetch to 2.7.0. ([65957](https://github.com/WordPress/gutenberg/pull/65957)) +- Update npm lockfile to version 3. ([65923](https://github.com/WordPress/gutenberg/pull/65923)) +- Upgrade browserslist and webcompat data packages. ([65926](https://github.com/WordPress/gutenberg/pull/65926)) + + +### Various + +- Consistent with block-development-examples data-basics-59c8f8. ([65995](https://github.com/WordPress/gutenberg/pull/65995)) +- Interactivity: Update preact packages. ([66008](https://github.com/WordPress/gutenberg/pull/66008)) + +#### Patterns +- Revert "Pattern block: Ensure consistent editing of overrides in Write Mode (#65408)". ([65953](https://github.com/WordPress/gutenberg/pull/65953)) + + +## First-time contributors + +The following PRs were merged by first-time contributors: + +- @AnmolVerma404: Fix: Return result from wp_register_block_template function. ([66102](https://github.com/WordPress/gutenberg/pull/66102)) +- @leemyongpakva: Consistent with block-development-examples data-basics-59c8f8. ([65995](https://github.com/WordPress/gutenberg/pull/65995)) +- @matt-west: Icons: Update cloud upload and add cloud download icon. ([65906](https://github.com/WordPress/gutenberg/pull/65906)) +- @mediaformat: .screen-reader-text CSS update for responsive-block-control style.scss. ([66145](https://github.com/WordPress/gutenberg/pull/66145)) +- @vk17-starlord: Fixed : Modal dialog: Small improvement for elementShouldBeHidden. ([65941](https://github.com/WordPress/gutenberg/pull/65941)) +- @Vrishabhsk: SearchControl: Deprecate onClose prop. ([65988](https://github.com/WordPress/gutenberg/pull/65988)) + + +## Contributors + +The following contributors merged PRs in this release: + +@aaronrobertshaw @afercia @ajlende @akasunil @Aljullu @andrewserong @AnmolVerma404 @ciampo @DaniGuardiola @dhruvang21 @draganescu @getdave @hbhalodia @jameskoster @jasmussen @jeryj @jsnajdr @leemyongpakva @MaggieCabrera @Mamaduka @matiasbenedetto @matt-west @mcsf @mediaformat @michalczaplinski @mikachan @mirka @ndiego @ntsekouras @ramonjd @renatho @richtabor @rmccue @sabernhardt @SantosGuillamot @shail-mehta @sirreal @stokesman @t-hamano @talldan @troychaplin @tyxla @up1512001 @vk17-starlord @Vrishabhsk @westonruter @youknowriad + + + + = 19.4.0 = ## Changelog 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. diff --git a/docs/contributors/code/managing-packages.md b/docs/contributors/code/managing-packages.md index bfea8fed81242..8ad0266b1482b 100644 --- a/docs/contributors/code/managing-packages.md +++ b/docs/contributors/code/managing-packages.md @@ -1,11 +1,7 @@ # Managing Packages -This repository uses [monorepo] to manage WordPress modules and publish them with [lerna] as packages to [npm]. This enforces certain steps in the workflow which are described in details in [packages](https://github.com/WordPress/gutenberg/blob/HEAD/packages/README.md) documentation. +This repository uses [npm workspaces](https://docs.npmjs.com/cli/v10/using-npm/workspaces) to manage WordPress packages and [lerna](https://lerna.js.org/) to publish them to [npm](https://www.npmjs.com/). This enforces certain steps in the workflow which are described in details in [packages](https://github.com/WordPress/gutenberg/blob/HEAD/packages/README.md) documentation. Maintaining dozens of npm packages is difficult—it can be tough to keep track of changes. That's why we use `CHANGELOG.md` files for each package to simplify the release process. As a contributor, you should add an entry to the aforementioned file each time you contribute adding production code as described in [Maintaining Changelogs](https://github.com/WordPress/gutenberg/blob/HEAD/packages/README.md#maintaining-changelogs) section. Publishing WordPress packages to npm is automated by synchronizing it with the bi-weekly Gutenberg plugin RC1 release. You can learn more about this process and other ways to publish new versions of npm packages in the [Gutenberg Release Process document](/docs/contributors/code/release.md#packages-releases-to-npm-and-wordpress-core-updates). - -[lerna]: https://lerna.js.org/ -[monorepo]: https://monorepo.tools -[npm]: https://www.npmjs.com/ diff --git a/docs/explanations/architecture/styles.md b/docs/explanations/architecture/styles.md index 952c6c49caad2..68f09f04d21d3 100644 --- a/docs/explanations/architecture/styles.md +++ b/docs/explanations/architecture/styles.md @@ -510,7 +510,7 @@ When a block that opts in to layout support is rendered, two things are processe There are currently four layout types in use: -- Default/Flow: Items are stacked vertically. The parent container block is set to `display: flow` and the spacing between children is handled via vertical margins. +- Default/Flow: Items are stacked vertically. The parent container block's display value isn't specified, so that it may use the default value for that HTML element. For most elements that will usually be `block`. The spacing between children is handled via vertical margins. - Constrained: Items are stacked vertically, using the same spacing logic as the Flow layout. Features constrained widths for child content, outputting widths for standard content size and wide size. Defaults to using global `contentSize` and `wideSize` values set in `settings.layout` in the `theme.json`. - Flex: Items are displayed using a Flexbox layout. Defaults to a horizontal orientation. Spacing between children is handled via the `gap` CSS property. - Grid: Items are displayed using a Grid layout. Defaults to an `auto-fill` approach to column generation but can also be set to a fixed number of columns. Spacing between children is handled via the `gap` CSS property. diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 66f713b3aa40f..dd49d15685724 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -246,7 +246,7 @@ Add an image or video with a text overlay. ([Source](https://github.com/WordPres - **Name:** core/cover - **Category:** media - **Supports:** align, anchor, color (heading, text, ~~background~~, ~~enableContrastChecker~~), dimensions (aspectRatio), interactivity (clientNavigation), layout (~~allowJustification~~), shadow, spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~ -- **Attributes:** allowedBlocks, alt, backgroundType, contentPosition, customGradient, customOverlayColor, dimRatio, focalPoint, gradient, hasParallax, id, isDark, isRepeated, isUserOverlayColor, minHeight, minHeightUnit, overlayColor, tagName, templateLock, url, useFeaturedImage +- **Attributes:** allowedBlocks, alt, backgroundType, contentPosition, customGradient, customOverlayColor, dimRatio, focalPoint, gradient, hasParallax, id, isDark, isRepeated, isUserOverlayColor, minHeight, minHeightUnit, overlayColor, sizeSlug, tagName, templateLock, url, useFeaturedImage ## Details diff --git a/docs/reference-guides/data/data-core-block-editor.md b/docs/reference-guides/data/data-core-block-editor.md index 956e8dd010581..437f7be20f770 100644 --- a/docs/reference-guides/data/data-core-block-editor.md +++ b/docs/reference-guides/data/data-core-block-editor.md @@ -738,6 +738,39 @@ _Returns_ Returns the currently selected block, or null if there is no selected block. +_Usage_ + +```js +import { select } from '@wordpress/data'; +import { store as blockEditorStore } from '@wordpress/block-editor'; + +// Set initial active block client ID +let activeBlockClientId = null; + +const getActiveBlockData = () => { + const activeBlock = select( blockEditorStore ).getSelectedBlock(); + + if ( activeBlock && activeBlock.clientId !== activeBlockClientId ) { + activeBlockClientId = activeBlock.clientId; + + // Get active block name and attributes + const activeBlockName = activeBlock.name; + const activeBlockAttributes = activeBlock.attributes; + + // Log active block name and attributes + console.log( activeBlockName, activeBlockAttributes ); + } +}; + +// Subscribe to changes in the editor +// wp.data.subscribe(() => { +// getActiveBlockData() +// }) + +// Update active block data on click +// onclick="getActiveBlockData()" +``` + _Parameters_ - _state_ `Object`: Global application state. diff --git a/docs/reference-guides/interactivity-api/api-reference.md b/docs/reference-guides/interactivity-api/api-reference.md index 25498d10bde2e..bbbb565684c57 100644 --- a/docs/reference-guides/interactivity-api/api-reference.md +++ b/docs/reference-guides/interactivity-api/api-reference.md @@ -6,8 +6,8 @@ Interactivity API is only available for WordPress 6.5 and above. To add interactions to blocks using the Interactivity API, developers can use: -- **Directives:** Added to the markup to add specific behavior to the DOM elements of the block -- **Store:** Contains the logic and data (state, actions, side effects, etc.) needed for the behavior +- **Directives:** Added to the markup to add specific behavior to the DOM elements of the block +- **Store:** Contains the logic and data (state, actions, side effects, etc.) needed for the behavior DOM elements are connected to data stored in the state and context through directives. If data in the state or context change directives will react to those changes, updating the DOM accordingly (see [diagram](https://excalidraw.com/#json=T4meh6lltJh6TCX51NTIu,DmIhxYSGFTL_ywZFbsmuSw)). @@ -21,21 +21,21 @@ Interactivity API directives use the `data-` prefix. Here's an example of direct ```html
- - -

- This element is now visible! -

+ + +

+ This element is now visible! +

``` @@ -52,24 +52,44 @@ The `wp-interactive` directive "activates" the interactivity for the DOM element ```html
-

I'm interactive now, and I can use directives!

-
-

I'm also interactive, and I can also use directives!

-
+

+ I'm interactive now, + and I can use directives! +

+
+

+ I'm also interactive, + and I can also use directives! +

+
-

I'm interactive now, and I can use directives!

-
-

I'm also interactive, and I can also use directives!

-
+

+ I'm interactive now, + and I can use directives! +

+
+

+ I'm also interactive, + and I can also use directives! +

+
``` @@ -96,31 +116,31 @@ The `wp-context` directive accepts a stringified JSON as a value. See store used with the directive above ```js -store( "myPlugin", { - actions: { - logId: () => { - const { post } = getContext(); - console.log( post.id ); - }, - }, +store( 'myPlugin', { + actions: { + logId: () => { + const { post } = getContext(); + console.log( post.id ); + }, + }, } ); ``` + Different contexts can be defined at different levels, and deeper levels will merge their own context with any parent one: ```html
- + -
- +
+ -
- -
- -
+
+ +
+
``` @@ -130,18 +150,18 @@ This directive allows setting HTML attributes on elements based on a boolean or ```html
  • - -
    - Title -
      - SUBMENU ITEMS -
    -
    + +
    + Title +
      + SUBMENU ITEMS +
    +
    • ``` @@ -149,33 +169,34 @@ This directive allows setting HTML attributes on elements based on a boolean or See store used with the directive above ```js -store( "myPlugin", { - actions: { - toggleMenu: () => { - const context = getContext(); - context.isMenuOpen = !context.isMenuOpen; - }, - }, +store( 'myPlugin', { + actions: { + toggleMenu: () => { + const context = getContext(); + context.isMenuOpen = ! context.isMenuOpen; + }, + }, } ); ``` + The `wp-bind` directive is executed: -- When the element is created -- Each time there's a change on any of the properties of the `state` or `context` involved in getting the final value of the directive (inside the callback or the expression passed as reference) +- When the element is created +- Each time there's a change on any of the properties of the `state` or `context` involved in getting the final value of the directive (inside the callback or the expression passed as reference) When `wp-bind` directive references a callback to get its final value: -- The `wp-bind` directive will be executed each time there's a change on any of the properties of the `state` or `context` used inside this callback. -- The returned value in the callback function is used to change the value of the associated attribute. +- The `wp-bind` directive will be executed each time there's a change on any of the properties of the `state` or `context` used inside this callback. +- The returned value in the callback function is used to change the value of the associated attribute. The `wp-bind` will do different things when the DOM element is applied, depending on its value: - - If the value is `true`, the attribute is added: `
    ` - - If the value is `false`, the attribute is removed: `
    ` - - If the value is a string, the attribute is added with its value assigned: `
    ` +- If the value is `true`, the attribute is added: `
    ` +- If the value is `false`, the attribute is removed: `
    ` +- If the value is a string, the attribute is added with its value assigned: `
    ` ### `wp-class` @@ -183,20 +204,20 @@ This directive adds or removes a class to an HTML element, depending on a boolea ```html
    -
  • - Option 1 -
    • -
  • - Option 2 -
    • +
  • + Option 1 +
    • +
  • + Option 2 +
    • ``` @@ -204,21 +225,22 @@ This directive adds or removes a class to an HTML element, depending on a boolea See store used with the directive above ```js -store( "myPlugin", { - actions: { - toggleSelection: () => { - const context = getContext(); - context.isSelected = !context.isSelected - } - } +store( 'myPlugin', { + actions: { + toggleSelection: () => { + const context = getContext(); + context.isSelected = ! context.isSelected; + }, + }, } ); ``` + The `wp-class` directive is executed: -- When the element is created -- Each time there's a change on any of the properties of the `state` or `context` involved in getting the final value of the directive (inside the callback or the expression passed as reference) +- When the element is created +- Each time there's a change on any of the properties of the `state` or `context` involved in getting the final value of the directive (inside the callback or the expression passed as reference) The boolean value received by the directive is used to toggle (add when `true` or remove when `false`) the associated class name from the `class` attribute. @@ -229,24 +251,24 @@ So, for example, use the class name `is-dark` instead of `isDark` and `data-wp-c ```html
    - +
    - +
    ``` ```css /* Recommended */ .is-dark { - /* ... */ + /* ... */ } /* Not recommended */ .isDark { - /* ... */ + /* ... */ } ``` @@ -255,9 +277,11 @@ So, for example, use the class name `is-dark` instead of `isDark` and `data-wp-c This directive adds or removes inline style to an HTML element, depending on its value. It follows the syntax `data-wp-style--css-property`. ```html -
    - -

    Hello World!

    +
    + +

    Hello World!

    > ``` @@ -266,26 +290,27 @@ This directive adds or removes inline style to an HTML element, depending on its See store used with the directive above ```js -store( "myPlugin", { - actions: { - toggleContextColor: () => { - const context = getContext(); - context.color = context.color === 'red' ? 'blue' : 'red'; - }, - }, +store( 'myPlugin', { + actions: { + toggleContextColor: () => { + const context = getContext(); + context.color = context.color === 'red' ? 'blue' : 'red'; + }, + }, } ); ``` + The `wp-style` directive is executed: -- When the element is created -- Each time there's a change on any of the properties of the `state` or `context` involved in getting the final value of the directive (inside the callback or the expression passed as reference) +- When the element is created +- Each time there's a change on any of the properties of the `state` or `context` involved in getting the final value of the directive (inside the callback or the expression passed as reference) The value received by the directive is used to add or remove the style attribute with the associated CSS property: -- If the value is `false`, the style attribute is removed: `
    ` -- If the value is a string, the attribute is added with its value assigned: `
    ` +- If the value is `false`, the style attribute is removed: `
    ` +- If the value is a string, the attribute is added with its value assigned: `
    ` ### `wp-text` @@ -293,10 +318,10 @@ It sets the inner text of an HTML element. ```html
    - - + +
    ``` @@ -304,21 +329,22 @@ It sets the inner text of an HTML element. See store used with the directive above ```js -store( "myPlugin", { - actions: { - toggleContextText: () => { - const context = getContext(); - context.text = context.text === 'Text 1' ? 'Text 2' : 'Text 1'; - }, - }, +store( 'myPlugin', { + actions: { + toggleContextText: () => { + const context = getContext(); + context.text = context.text === 'Text 1' ? 'Text 2' : 'Text 1'; + }, + }, } ); ``` + The `wp-text` directive is executed: -- When the element is created -- Each time there's a change on any of the properties of the `state` or `context` involved in getting the final value of the directive (inside the callback or the expression passed as reference) +- When the element is created +- Each time there's a change on any of the properties of the `state` or `context` involved in getting the final value of the directive (inside the callback or the expression passed as reference) The returned value is used to change the inner content of the element: `
    value
    `. @@ -340,14 +366,15 @@ This directive runs code on dispatched DOM events like `click` or `keyup`. The s See store used with the directive above ```js -store( "myPlugin", { - actions: { - logTime: ( event ) => { - console.log( new Date() ) - }, - }, +store( 'myPlugin', { + actions: { + logTime: ( event ) => { + console.log( new Date() ); + }, + }, } ); ``` + The `wp-on` directive is executed each time the associated event is triggered. @@ -378,7 +405,7 @@ The syntax of this directive is `data-wp-on-window--[window-event]` (like `data- See store used with the directive above ```js -store( "myPlugin", { +store( 'myPlugin', { callbacks: { logWidth() { console.log( 'Window width: ', window.innerWidth ); @@ -386,6 +413,7 @@ store( "myPlugin", { }, } ); ``` + The callback passed as the reference receives [the event](https://developer.mozilla.org/en-US/docs/Web/API/Event) (`event`), and the returned value by this callback is ignored. When the element is removed from the DOM, the event listener is also removed. @@ -414,14 +442,15 @@ The syntax of this directive is `data-wp-on-document--[document-event]` (like `d See store used with the directive above ```js -store( "myPlugin", { +store( 'myPlugin', { callbacks: { - logKeydown(event) { + logKeydown( event ) { console.log( 'Key pressed: ', event.key ); }, - }, + }, } ); ``` + The callback passed as the reference receives [the event](https://developer.mozilla.org/en-US/docs/Web/API/Event) (`event`), and the returned value by this callback is ignored. When the element is removed from the DOM, the event listener is also removed. @@ -439,13 +468,10 @@ You can attach several side effects to the same DOM element by using the syntax The `unique-id` doesn't need to be unique globally. It just needs to be different from the other unique IDs of the `wp-watch` directives of that DOM element. ```html -
    -

    Counter:

    - - +
    +

    Counter:

    + +
    ``` @@ -453,40 +479,41 @@ The `unique-id` doesn't need to be unique globally. It just needs to be differen See store used with the directive above ```js -store( "myPlugin", { - actions: { - increaseCounter: () => { - const context = getContext(); - context.counter++; - }, - decreaseCounter: () => { - const context = getContext(); - context.counter--; - }, - }, - callbacks: { - logCounter: () => { - const { counter } = getContext(); - console.log("Counter is " + counter + " at " + new Date() ); - }, - }, +store( 'myPlugin', { + actions: { + increaseCounter: () => { + const context = getContext(); + context.counter++; + }, + decreaseCounter: () => { + const context = getContext(); + context.counter--; + }, + }, + callbacks: { + logCounter: () => { + const { counter } = getContext(); + console.log( 'Counter is ' + counter + ' at ' + new Date() ); + }, + }, } ); ``` + The `wp-watch` directive is executed: -- When the element is created -- Each time that any of the properties of the `state` or `context` used inside the callback changes +- When the element is created +- Each time that any of the properties of the `state` or `context` used inside the callback changes The `wp-watch` directive can return a function. If it does, the returned function is used as cleanup logic, i.e., it will run just before the callback runs again, and it will run again when the element is removed from the DOM. As a reference, some use cases for this directive may be: -- Logging -- Changing the title of the page -- Setting the focus on an element with `.focus()`. -- Changing the state or context when certain conditions are met +- Logging +- Changing the title of the page +- Setting the focus on an element with `.focus()`. +- Changing the state or context when certain conditions are met ### `wp-init` @@ -498,7 +525,7 @@ The `unique-id` doesn't need to be unique globally. It just needs to be differen ```html
    -

    Hi!

    +

    Hi!

    ``` @@ -506,10 +533,10 @@ Here's another example with several `wp-init` directives on the same DOM element ```html
    - +
    ``` @@ -546,7 +573,7 @@ The `unique-id` doesn't need to be unique globally. It just needs to be differen ```html
    -

    Hi!

    +

    Hi!

    ``` @@ -554,38 +581,44 @@ The `unique-id` doesn't need to be unique globally. It just needs to be differen See store used with the directive above ```js -import { getElement, store, useState, useEffect } from '@wordpress/interactivity'; +import { + getElement, + store, + useState, + useEffect, +} from '@wordpress/interactivity'; // Unlike `data-wp-init` and `data-wp-watch`, you can use any hooks inside // `data-wp-run` callbacks. const useInView = () => { - const [ inView, setInView ] = useState( false ); - useEffect( () => { - const { ref } = getElement(); - const observer = new IntersectionObserver( ( [ entry ] ) => { - setInView( entry.isIntersecting ); - } ); - observer.observe( ref ); - return () => ref && observer.unobserve( ref ); - }, []); - return inView; + const [ inView, setInView ] = useState( false ); + useEffect( () => { + const { ref } = getElement(); + const observer = new IntersectionObserver( ( [ entry ] ) => { + setInView( entry.isIntersecting ); + } ); + observer.observe( ref ); + return () => ref && observer.unobserve( ref ); + }, [] ); + return inView; }; store( 'myPlugin', { - callbacks: { - logInView: () => { - const isInView = useInView(); - useEffect( () => { - if ( isInView ) { - console.log( 'Inside' ); - } else { - console.log( 'Outside' ); - } - }); - } - }, + callbacks: { + logInView: () => { + const isInView = useInView(); + useEffect( () => { + if ( isInView ) { + console.log( 'Inside' ); + } else { + console.log( 'Outside' ); + } + } ); + }, + }, } ); ``` + It's important to note that, similar to (P)React components, the `ref` from `getElement()` is `null` during the first render. To properly access the DOM element reference, you typically need to use an effect-like hook such as `useEffect`, `useInit`, or `useWatch`. This ensures that the `getElement()` runs after the component has been mounted and the `ref` is available. @@ -598,8 +631,8 @@ The key should be a string that uniquely identifies the element among its siblin ```html
      -
    • Item 1
      • -
    • Item 2
      • +
    • Item 1
      • +
    • Item 2
    ``` @@ -607,8 +640,8 @@ But it can also be used on other elements: ```html ``` @@ -624,9 +657,9 @@ For example, let's consider the following HTML. ```html
      - +
    ``` @@ -634,9 +667,9 @@ It would generate the following output: ```html
      -
    • hello
      • -
    • hola
      • -
    • olá
      • +
    • hello
      • +
    • hola
      • +
    • olá
    ``` @@ -644,9 +677,9 @@ The prop that holds the item in the context can be changed by passing a suffix t ```html
      - +
    ``` @@ -655,19 +688,21 @@ By default, it uses each element as the key for the rendered nodes, but you can For that, you must use `data-wp-each-key` in the `