diff --git a/changelog.txt b/changelog.txt index ad860707a261f7..bcbfbb2dc48449 100644 --- a/changelog.txt +++ b/changelog.txt @@ -1,23 +1,318 @@ == Changelog == -= 19.6.0-rc.3 = += 19.6.0 = ## Changelog +### Enhancements + +#### Components +- Add elevation tokens to storybook. ([66122](https://github.com/WordPress/gutenberg/pull/66122)) +- Add foundations:Elevation to storybook. ([66124](https://github.com/WordPress/gutenberg/pull/66124)) +- Add radius foundation and tokens to storybook. ([66219](https://github.com/WordPress/gutenberg/pull/66219)) +- Combobox, FormTokenField: Show message when no matches found. ([66142](https://github.com/WordPress/gutenberg/pull/66142)) +- Storybook: Organizes components under 'Utilities'. ([66210](https://github.com/WordPress/gutenberg/pull/66210)) +- Tabs: Expose active tab item props, use ariakit prop types. ([66223](https://github.com/WordPress/gutenberg/pull/66223)) +- Tabs: Remove custom logic. ([66097](https://github.com/WordPress/gutenberg/pull/66097)) +- `DropdownMenuV2`: Rename to `Menu`. ([66289](https://github.com/WordPress/gutenberg/pull/66289)) + +#### Block Library +- Add Transformation from Separator to Spacer. ([66230](https://github.com/WordPress/gutenberg/pull/66230)) +- Add lightbox option in gallery block link control. ([64014](https://github.com/WordPress/gutenberg/pull/64014)) +- Archives: Add border block support. ([63400](https://github.com/WordPress/gutenberg/pull/63400)) +- Border support added to comments. ([66354](https://github.com/WordPress/gutenberg/pull/66354)) +- Cover Block: Add Image Resolution options. ([62926](https://github.com/WordPress/gutenberg/pull/62926)) +- HTML Block: Force HTML preview in view mode. ([66440](https://github.com/WordPress/gutenberg/pull/66440)) + +#### Zoom Out +- Add keyboard shortcut in editor. ([66400](https://github.com/WordPress/gutenberg/pull/66400)) +- Iterate zoom out shuffle into a more visual control. ([66194](https://github.com/WordPress/gutenberg/pull/66194)) +- Use the zoom-level value to scale the iframe. ([66280](https://github.com/WordPress/gutenberg/pull/66280)) + +#### Site Editor +- Remove synchronization of canvas mode into store. ([66213](https://github.com/WordPress/gutenberg/pull/66213)) +- Style Book: Clean up layout. ([66255](https://github.com/WordPress/gutenberg/pull/66255)) +- Update site icon and title position. ([66171](https://github.com/WordPress/gutenberg/pull/66171)) +- Editor Interface: Remove small header from global styles/plugin sidebar. ([64474](https://github.com/WordPress/gutenberg/pull/64474)) +- Remove purple coloring from DocumentBar and PostCard. ([66451](https://github.com/WordPress/gutenberg/pull/66451)) +- Core Data: Add the 'getEntitiesConfig' resolver. ([65871](https://github.com/WordPress/gutenberg/pull/65871)) +- BlockGroupToolbar: Better i18n context for toolbar labels. ([66211](https://github.com/WordPress/gutenberg/pull/66211)) +- Set `ResizableEditor` height based on border-box. ([66342](https://github.com/WordPress/gutenberg/pull/66342)) +- Add align-item related icons. ([66242](https://github.com/WordPress/gutenberg/pull/66242)) +- Stabilize isPreviewMode flag. ([66149](https://github.com/WordPress/gutenberg/pull/66149)) + +#### Data Views +- Fix alignment of action items in list layout. ([66273](https://github.com/WordPress/gutenberg/pull/66273)) +- Templates: Hide media field in list view. ([66573](https://github.com/WordPress/gutenberg/pull/66573)) + +#### Global Styles +- Backport: Caching of global styles for blocks from core. ([66349](https://github.com/WordPress/gutenberg/pull/66349)) +- Style Book: Add color tab. ([65692](https://github.com/WordPress/gutenberg/pull/65692)) + +#### Real-time Collaboration +- Inline Commenting: Disable comments on published posts for now. ([66583](https://github.com/WordPress/gutenberg/pull/66583)) + + +#### REST API +- Backport from WordPress core: Improvements for the post format query loop filter. ([66037](https://github.com/WordPress/gutenberg/pull/66037)) + +#### Build Tooling +- Create Block: Adds `--target-dir` flag to allow the tool to target where to scaffold. ([53781](https://github.com/WordPress/gutenberg/pull/53781)) +- Scripts: Add build-blocks-manifest command. ([65866](https://github.com/WordPress/gutenberg/pull/65866)) +- Scripts: Add BlueOak-1.0.0 license to GPL2 compatible. ([66139](https://github.com/WordPress/gutenberg/pull/66139)) +- WP Scripts: Add a `--root-folder` argument to the `plugin-zip` command. ([61375](https://github.com/WordPress/gutenberg/pull/61375)) + ### Bug Fixes +#### Zoom Out +- Disable zoom out toggle button when Style Book is open. ([66228](https://github.com/WordPress/gutenberg/pull/66228)) +- Don't switch editor mode when changing entities. ([66452](https://github.com/WordPress/gutenberg/pull/66452)) +- Fix scaling animation for device previews. ([66132](https://github.com/WordPress/gutenberg/pull/66132)) +- Fix zoom out not persisting while switching between editor and code editor. ([65932](https://github.com/WordPress/gutenberg/pull/65932)) +- Fix zoom out shortcut on Windows. ([66506](https://github.com/WordPress/gutenberg/pull/66506)) +- Fix: Activate zoom out on large viewport. ([66308](https://github.com/WordPress/gutenberg/pull/66308)) +- Hide slots and grouping buttons. ([66243](https://github.com/WordPress/gutenberg/pull/66243)) +- Remove zoom-out toolbar. ([66039](https://github.com/WordPress/gutenberg/pull/66039)) +- Resets the Zoom on viewed/edited entity change. ([66232](https://github.com/WordPress/gutenberg/pull/66232)) +- Revise zoom layout shift fix. ([66390](https://github.com/WordPress/gutenberg/pull/66390)) +- Zoom Out: Rely on zoom-level instead of zoom-out mode. ([66141](https://github.com/WordPress/gutenberg/pull/66141)) +- Zoom Out: Fix bouncy drop zones. ([66399](https://github.com/WordPress/gutenberg/pull/66399)) + #### Block Editor +- Block inserter: Prevent editor from crashing if `blockType.parent` is a string. ([66234](https://github.com/WordPress/gutenberg/pull/66234)) +- Block toolbar: Account for scrollable blocks that affect the position of the block toolbar. ([66188](https://github.com/WordPress/gutenberg/pull/66188)) +- Fix extra scrollbar appearing when searching in the inserter. ([66229](https://github.com/WordPress/gutenberg/pull/66229)) +- Fix: Show paragraph block variations in rich text inserter. ([66318](https://github.com/WordPress/gutenberg/pull/66318)) +- Group: Fix padding select. ([65857](https://github.com/WordPress/gutenberg/pull/65857)) +- Link Shortcut: Only trigger the link shortcut if there's a text selection. ([66056](https://github.com/WordPress/gutenberg/pull/66056)) +- Remove relative position from sidebar tabpanel. ([66267](https://github.com/WordPress/gutenberg/pull/66267)) +- Rich text: Remove empty file. ([66553](https://github.com/WordPress/gutenberg/pull/66553)) + +- Block editor: Self nesting and circular nesting block fix. ([66121](https://github.com/WordPress/gutenberg/pull/66121)) - Post Editor: Set the default value of the editorTool to edit. ([66636](https://github.com/WordPress/gutenberg/pull/66636)) +#### Components +- ColorPalette: Prevent overflow of custom color button background. ([66152](https://github.com/WordPress/gutenberg/pull/66152)) +- Fix: Text overflow in Patterns filter. ([66504](https://github.com/WordPress/gutenberg/pull/66504)) +- RadioGroup: Fix arrow key navigation in RTL. ([66202](https://github.com/WordPress/gutenberg/pull/66202)) +- Tabs and TabPanel: Fix arrow key navigation in RTL. ([66201](https://github.com/WordPress/gutenberg/pull/66201)) +- Tabs and ToggleGroupControl: Round indicator size. ([66426](https://github.com/WordPress/gutenberg/pull/66426)) +- Tabs: Fix animation timings. ([66198](https://github.com/WordPress/gutenberg/pull/66198)) +- Tabs: Override tablist's tabindex only when necessary. ([66209](https://github.com/WordPress/gutenberg/pull/66209)) +- Tabs: Restore vertical alignment for tabs content. ([66215](https://github.com/WordPress/gutenberg/pull/66215)) +- Tabs: Update indicator more reactively. ([66207](https://github.com/WordPress/gutenberg/pull/66207)) +- SpacingSizesControl: Use generic label for linked button. ([66304](https://github.com/WordPress/gutenberg/pull/66304)) + +#### i18n +- Miscellaneous i18n fixes. ([66510](https://github.com/WordPress/gutenberg/pull/66510)) +- Remove most of the occurrences of the verb toggle. ([66371](https://github.com/WordPress/gutenberg/pull/66371)) + +#### Post Editor +- Always force iframe in pattern editor. ([65887](https://github.com/WordPress/gutenberg/pull/65887)) +- Editor: Multi-entity saving: Show correct count of entities to be saved. ([66482](https://github.com/WordPress/gutenberg/pull/66482)) +- Fix : "Set featured image" button border flashes on focus. ([66092](https://github.com/WordPress/gutenberg/pull/66092)) +- Fix Parent Check Condition in `buildTermsTree`. ([66006](https://github.com/WordPress/gutenberg/pull/66006)) +- Fix: Improve the DocumentBar post type label for the Homepage and Posts Page cases. ([66355](https://github.com/WordPress/gutenberg/pull/66355)) +- PostTaxonomiesFlatTermSelector: Restore space between tag list and most used tags. ([66566](https://github.com/WordPress/gutenberg/pull/66566)) +- Typo metabox pane is a meta box panel. ([66502](https://github.com/WordPress/gutenberg/pull/66502)) + +#### Block Library +- Block registration: Normalize blockType.parent to `array`. ([66250](https://github.com/WordPress/gutenberg/pull/66250)) +- Button Block: Apply Stretch Styles Correctly. ([64770](https://github.com/WordPress/gutenberg/pull/64770)) +- Buttons: Fix the initial white space in nofollow rel. ([66303](https://github.com/WordPress/gutenberg/pull/66303)) +- Fix - Image block: Aspect ratio not responding when dimensions are not set. ([66217](https://github.com/WordPress/gutenberg/pull/66217)) +- Navigation block: Fix block appender size. ([66153](https://github.com/WordPress/gutenberg/pull/66153)) +- Fix the navigation issue inside cover blocks. ([66093](https://github.com/WordPress/gutenberg/pull/66093)) + +#### Site Editor +- Edit Site: Fix canvasMode var. ([66316](https://github.com/WordPress/gutenberg/pull/66316)) +- Fix button hover style in sidebar navigation screen. ([66505](https://github.com/WordPress/gutenberg/pull/66505)) +- Remove toggle verb from post list data views 'Toggle details panel'. ([66334](https://github.com/WordPress/gutenberg/pull/66334)) +- Revert 66431 (Site editor: Remove "default" admin CSS). ([66540](https://github.com/WordPress/gutenberg/pull/66540)) +- Restore block-library editor.css outside canvas. ([66556](https://github.com/WordPress/gutenberg/pull/66556)) +- Fix extraneous scrollbar in device previews. ([66494](https://github.com/WordPress/gutenberg/pull/66494)) +- Global styles: Move preload paths filter to 6.7 (previously 6.8). ([66543](https://github.com/WordPress/gutenberg/pull/66543)) +- Fix comment output in styles. ([66439](https://github.com/WordPress/gutenberg/pull/66439)) +- Site editor: Fix save shortcut. ([66423](https://github.com/WordPress/gutenberg/pull/66423)) +- Preload: Fix multiple regressions around global styles. ([66468](https://github.com/WordPress/gutenberg/pull/66468)) +#### Build tooling +- Create block: Ensure $slug is replaced with passed slug. ([66528](https://github.com/WordPress/gutenberg/pull/66528)) + +### Accessibility + +#### Post Editor +- Add featured image alt text. ([66189](https://github.com/WordPress/gutenberg/pull/66189)) +- Fix : Badge Color contrast. ([66360](https://github.com/WordPress/gutenberg/pull/66360)) + +#### Block Editor +- ImageSizeControls: Replace ButtonGroup with ToggleGroupControl. ([65386](https://github.com/WordPress/gutenberg/pull/65386)) +- Improve the link preview accessibility and labels. ([60908](https://github.com/WordPress/gutenberg/pull/60908)) + +#### Block Library +- Search: Replace ButtonGroup usage with ToggleGroupControl. ([65340](https://github.com/WordPress/gutenberg/pull/65340)) +- Remove clip & -webkit-clip-path for downloadable-block-list-item style.scss. ([66147](https://github.com/WordPress/gutenberg/pull/66147)) + +#### Global Styles +- Global styles menu: Avoid visible labels and accessible names mismatch. ([65124](https://github.com/WordPress/gutenberg/pull/65124)) + +#### Site Editor +- Fix Global styles panel header buttons text overlap for 'Show button text labels'. ([63243](https://github.com/WordPress/gutenberg/pull/63243)) +- Update the speak messages when switching editor modes. ([66278](https://github.com/WordPress/gutenberg/pull/66278)) + +### Performance + +#### Site Editor +- Remove "default" admin CSS. ([66431](https://github.com/WordPress/gutenberg/pull/66431)) +- Remove content styles outside canvas. ([66432](https://github.com/WordPress/gutenberg/pull/66432)) +- Block Style Variations: Reuse block metadata in WP_Theme_JSON::Get_valid_block_style_variations() for better performance. ([66539](https://github.com/WordPress/gutenberg/pull/66539)) +- Block Bindings: Use `getEntityConfig` instead of `getPostTypes` to get available slugs. ([66101](https://github.com/WordPress/gutenberg/pull/66101)) + +#### Build Tooling +- Fix/compare performance with correct branch. ([66196](https://github.com/WordPress/gutenberg/pull/66196)) + +### Experiments + +- Add Inline comment experimental flag. ([60622](https://github.com/WordPress/gutenberg/pull/60622)) +- QuickEdit: Add slug field control. ([65196](https://github.com/WordPress/gutenberg/pull/65196)) + +#### Data Views +- Quick Edit: Fix JS error when bulk editing pages. ([66358](https://github.com/WordPress/gutenberg/pull/66358)) +- QuickEdit: Add Featured Image Control. ([64496](https://github.com/WordPress/gutenberg/pull/64496)) +- QuickEdit: Add Parent field. ([66527](https://github.com/WordPress/gutenberg/pull/66527)) + +### Documentation + +- BaseControl: Auto-generate readme. ([66500](https://github.com/WordPress/gutenberg/pull/66500)) +- Components: Prevent generated readmes duplicating h1 elements when published. ([66180](https://github.com/WordPress/gutenberg/pull/66180)) +- Correct documentation on display type in flow layouts. ([66224](https://github.com/WordPress/gutenberg/pull/66224)) +- Docs: Interactivity API - Add documentation for `getServerState()` and `getServerContext()`. ([66104](https://github.com/WordPress/gutenberg/pull/66104)) +- Fix undo/redo Button size in Storybook playground. ([66538](https://github.com/WordPress/gutenberg/pull/66538)) +- Fix: JSON Schema Docgen doesn't work on Windows OS. ([66414](https://github.com/WordPress/gutenberg/pull/66414)) +- ItemGroup: Improve stories to default to bordered and separated. ([66191](https://github.com/WordPress/gutenberg/pull/66191)) +- README: Add Storybook badge. ([66529](https://github.com/WordPress/gutenberg/pull/66529)) +- Remove meetings that no longer occur from Contributor Guide. ([66421](https://github.com/WordPress/gutenberg/pull/66421)) +- Site editor routes: Add documentation for areas and prevent `edit` area from rendering when canvas is `edit`. ([66309](https://github.com/WordPress/gutenberg/pull/66309)) +- Update documentation about build process changes. ([66428](https://github.com/WordPress/gutenberg/pull/66428)) +- Docs: Example for getSelectedBlock. ([66108](https://github.com/WordPress/gutenberg/pull/66108)) + +### Code Quality + +#### Block Editor +- ESLint: Remove explicit `react-hooks/exhaustive-deps` disabling. ([66461](https://github.com/WordPress/gutenberg/pull/66461)) +- ESLint: Remove various React Compiler mutation violations. ([66327](https://github.com/WordPress/gutenberg/pull/66327)) +- Fix 'useInstanceId' hook reference. ([66406](https://github.com/WordPress/gutenberg/pull/66406)) +- Fix React Compiler error for Duotone. ([66492](https://github.com/WordPress/gutenberg/pull/66492)) +- Fix React Complier error for 'useEventListeners'. ([66495](https://github.com/WordPress/gutenberg/pull/66495)) +- Import only the actually used PostCSS exports. ([66379](https://github.com/WordPress/gutenberg/pull/66379)) +- No need to unlock public actions. ([66260](https://github.com/WordPress/gutenberg/pull/66260)) +- Remove patterns UI stylesheet from iframe. ([66306](https://github.com/WordPress/gutenberg/pull/66306)) +- Remove unnecessary Tooltip component from radius control linked button. ([66274](https://github.com/WordPress/gutenberg/pull/66274)) +- Rich Text: Fix React Complier error for 'useEventListeners'. ([66460](https://github.com/WordPress/gutenberg/pull/66460)) +- Storybook: Add BlockPatternsList story. ([66227](https://github.com/WordPress/gutenberg/pull/66227)) +- Block editor: Remove reusable blocks stylesheet from iframe. ([66285](https://github.com/WordPress/gutenberg/pull/66285)) + + +#### Components +- BorderBoxControl: Deprecate 36px default size. ([65752](https://github.com/WordPress/gutenberg/pull/65752)) +- BorderControl: Deprecate 36px default size. ([65755](https://github.com/WordPress/gutenberg/pull/65755)) +- DrodownMenuV2: Rename folder to `menu`. ([66473](https://github.com/WordPress/gutenberg/pull/66473)) +- ESLint: Stop disabling `react-hooks/exhaustive-deps` rule. ([66324](https://github.com/WordPress/gutenberg/pull/66324)) +- Fix React Compiler error for 'useAutocomplete'. ([66496](https://github.com/WordPress/gutenberg/pull/66496)) +- PaletteEdit: Use `ItemGroup` and `Item`, and avoid custom styles. ([66164](https://github.com/WordPress/gutenberg/pull/66164)) +- TabPanel: Add 40px size prop to tab Button. ([66557](https://github.com/WordPress/gutenberg/pull/66557)) +- Tabs: Align to standard compound components structure. ([66225](https://github.com/WordPress/gutenberg/pull/66225)) +- Tabs: Simplify styled components code. ([66208](https://github.com/WordPress/gutenberg/pull/66208)) + +#### Compose +- Compose: Fix React Complier error for 'useCopyToClipboard'. ([66444](https://github.com/WordPress/gutenberg/pull/66444)) +- Composer: Fix React Compiler errors for 'useDropZone'. ([66469](https://github.com/WordPress/gutenberg/pull/66469)) + +#### Dataviews +- Fields: Fix React Compiler mutation errors. ([66464](https://github.com/WordPress/gutenberg/pull/66464)) +- Fields: Update a few function definitions. ([66315](https://github.com/WordPress/gutenberg/pull/66315)) +#### Interface +- Interface: Remove duplicate 'withComplementaryAreaContext' file. ([66348](https://github.com/WordPress/gutenberg/pull/66348)) +- Interface: Remove unused private API support. ([66565](https://github.com/WordPress/gutenberg/pull/66565)) +- Interface: Use plugin context hook instead of HoC. ([66362](https://github.com/WordPress/gutenberg/pull/66362)) + +#### Zoom Out +- Bundle behavior in block-editor and add story. ([66240](https://github.com/WordPress/gutenberg/pull/66240)) +- Editor: Handle zoom out state via the 'switchEditorMode' action. ([66262](https://github.com/WordPress/gutenberg/pull/66262)) +- Fix/html scale code quality. ([66181](https://github.com/WordPress/gutenberg/pull/66181)) +- Make useZoomOut hook private. ([66374](https://github.com/WordPress/gutenberg/pull/66374)) +- Remove double click to exit hook from the block-editor package. ([66335](https://github.com/WordPress/gutenberg/pull/66335)) +- Remove viewport check from useZoomOut hook. ([66341](https://github.com/WordPress/gutenberg/pull/66341)) + +#### Post Editor +- Editor: No need to reset mode when changing device preview types. ([66261](https://github.com/WordPress/gutenberg/pull/66261)) +- Editor: Use plugin context hook in 'PluginMoreMenuItem'. ([66351](https://github.com/WordPress/gutenberg/pull/66351)) +- Editor: Use plugin context hook in 'PluginPreviewMenuItem'. ([66350](https://github.com/WordPress/gutenberg/pull/66350)) +- Fix typo after #63669. ([66396](https://github.com/WordPress/gutenberg/pull/66396)) +- Remove leftover JS code from 66451. ([66472](https://github.com/WordPress/gutenberg/pull/66472)) + +#### Block Library +- Cleanup unnecessary notice removal. ([66409](https://github.com/WordPress/gutenberg/pull/66409)) +- ESLint: Fix a couple of React Compiler reassignment errors. ([66331](https://github.com/WordPress/gutenberg/pull/66331)) +- Footnotes: Remove extra callback when parsing content. ([66370](https://github.com/WordPress/gutenberg/pull/66370)) +- Gallery: Fix React Compiler reassignment error. ([66408](https://github.com/WordPress/gutenberg/pull/66408)) +- Table Block: Remove hasArrowIndicator prop. ([66204](https://github.com/WordPress/gutenberg/pull/66204)) + +#### Style Book +- Avoid state/effect combo when generating values. ([66446](https://github.com/WordPress/gutenberg/pull/66446)) +- Fix React Compiler error. ([66445](https://github.com/WordPress/gutenberg/pull/66445)) + +#### Global Styles +- Clean up: Adjust reusable-blocks dependencies. ([66302](https://github.com/WordPress/gutenberg/pull/66302)) +- Fix React Compiler variable mutation error. ([66410](https://github.com/WordPress/gutenberg/pull/66410)) +- Theme JSON: Get_block_nodes - relocate $selectors assignment. ([66265](https://github.com/WordPress/gutenberg/pull/66265)) + +#### Interactivity API +- Interactivity API: Add comments to the `deepMerge()` function. ([66220](https://github.com/WordPress/gutenberg/pull/66220)) +- Interactivity API: Add tests for handling arrays in `deepMerge()`. ([66218](https://github.com/WordPress/gutenberg/pull/66218)) +- Interactivity API: Delay block hydration to allow interactive block stores to initialize. ([66772])(https://github.com/WordPress/gutenberg/pull/66772) + +#### Site Editor +- Prepare route registration by refactoring the site editor router. ([66030](https://github.com/WordPress/gutenberg/pull/66030)) +- Navigation: Improve trigger for fallback navigation. ([66478](https://github.com/WordPress/gutenberg/pull/66478)) +#### Build Tooling +- Scripts: Refactor to extract license logic. ([66179](https://github.com/WordPress/gutenberg/pull/66179)) +- Plugins: Deprecate 'withPluginContext' HOC. ([66363](https://github.com/WordPress/gutenberg/pull/66363)) + +### Tools + +#### Testing +- Fix [Flaky Test] Entering zoomed out mode zooms the canvas. ([66212](https://github.com/WordPress/gutenberg/pull/66212)) +- Fix end-to-end test for padding appender. ([66080](https://github.com/WordPress/gutenberg/pull/66080)) +- Upgrade Playwright to v1.48. ([66296](https://github.com/WordPress/gutenberg/pull/66296)) + +#### Build Tooling +- Add new private `vips` package. ([64845](https://github.com/WordPress/gutenberg/pull/64845)) +- Revert "Use npm workspaces for packages". ([66270](https://github.com/WordPress/gutenberg/pull/66270)) +- Add theme type to the bug report issue template. ([63851](https://github.com/WordPress/gutenberg/pull/63851)) +- Pull request automation: Use full npm install. ([66314](https://github.com/WordPress/gutenberg/pull/66314)) +- Use npm workspaces for packages (second attempt). ([66272](https://github.com/WordPress/gutenberg/pull/66272)) + + +## First-time contributors + +The following PRs were merged by first-time contributors: + +- @AhmarZaidi: Remove toggle verb from post list data views 'Toggle details panel'. ([66334](https://github.com/WordPress/gutenberg/pull/66334)) +- @mediaformat: Remove clip & -webkit-clip-path for downloadable-block-list-item style.scss. ([66147](https://github.com/WordPress/gutenberg/pull/66147)) +- @nicolasgalvez: WP Scripts: Add a `--root-folder` argument to the `plugin-zip` command. ([61375](https://github.com/WordPress/gutenberg/pull/61375)) +- @poojabhimani12: Add Inline comment experimental flag. ([60622](https://github.com/WordPress/gutenberg/pull/60622)) +- @rinkalpagdar: Border support added to comments. ([66354](https://github.com/WordPress/gutenberg/pull/66354)) +- @rudrakshi-gupta: Add Transformation from Separator to Spacer. ([66230](https://github.com/WordPress/gutenberg/pull/66230)) +- @SH4LIN: GH-66090: Self nesting and circular nesting block fix. ([66121](https://github.com/WordPress/gutenberg/pull/66121)) ## Contributors The following contributors merged PRs in this release: -@arthur791004 +@aaronrobertshaw @afercia @AhmarZaidi @akasunil @andrewserong @arthur791004 @carolinan @cbravobernal @ciampo @dhruvang21 @ellatrix @getdave @gigitux @hbhalodia @jameskoster @jeryj @jsnajdr @juanfra @madhusudhand @MaggieCabrera @Mamaduka @mattrwalker @mcsf @mediaformat @michalczaplinski @mirka @mreishus @ndiego @nicolasgalvez @ntsekouras @oandregal @PARTHVATALIYA @peterwilsoncc @poojabhimani12 @prajapatisagar @ramonjd @renatho @rinkalpagdar @rudrakshi-gupta @ryanwelcher @SantosGuillamot @SH4LIN @sirreal @stokesman @swissspidy @t-hamano @talldan @tellthemachines @torounit @troychaplin @tyxla @vipul0425 @Vrishabhsk @vykes-mac @westonruter @youknowriad @zaguiini = 19.5.1 = diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index dd49d156857249..4db90e9b2f8142 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -616,7 +616,7 @@ Displays the contents of a post or page. ([Source](https://github.com/WordPress/ - **Name:** core/post-content - **Category:** theme -- **Supports:** align (full, wide), background (backgroundImage, backgroundSize), color (background, gradients, link, text), dimensions (minHeight), layout, spacing (blockGap, padding), typography (fontSize, lineHeight), ~~html~~ +- **Supports:** align (full, wide), background (backgroundImage, backgroundSize), color (background, gradients, link, text), dimensions (minHeight), layout, spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~ ## Date diff --git a/package-lock.json b/package-lock.json index 59fb1310a15e72..80abc752c92120 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "gutenberg", - "version": "19.6.0-rc.3", + "version": "19.6.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "gutenberg", - "version": "19.6.0-rc.3", + "version": "19.6.0", "hasInstallScript": true, "license": "GPL-2.0-or-later", "workspaces": [ diff --git a/package.json b/package.json index 6e519e2f1070e9..741475d8177705 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gutenberg", - "version": "19.6.0-rc.3", + "version": "19.6.0", "private": true, "description": "A new WordPress editor experience.", "author": "The WordPress Contributors", diff --git a/packages/block-editor/src/components/global-styles/dimensions-panel.js b/packages/block-editor/src/components/global-styles/dimensions-panel.js index 4c52de6a3d7d11..c19788ebfcb580 100644 --- a/packages/block-editor/src/components/global-styles/dimensions-panel.js +++ b/packages/block-editor/src/components/global-styles/dimensions-panel.js @@ -147,24 +147,30 @@ function splitStyleValue( value ) { return value; } -function splitGapValue( value ) { - // Check for shorthand value (a string value). - if ( value && typeof value === 'string' ) { - // If the value is a string, treat it as a single side (top) for the spacing controls. - return { - top: value, - }; +function splitGapValue( value, isAxialGap ) { + if ( ! value ) { + return value; } - if ( value ) { - return { - ...value, - right: value?.left, - bottom: value?.top, - }; + // Check for shorthand value (a string value). + if ( typeof value === 'string' ) { + /* + * Map the string value to appropriate sides for the spacing control depending + * on whether the current block has axial gap support or not. + * + * Note: The axial value pairs must match for the spacing control to display + * the appropriate horizontal/vertical sliders. + */ + return isAxialGap + ? { top: value, right: value, bottom: value, left: value } + : { top: value }; } - return value; + return { + ...value, + right: value?.left, + bottom: value?.top, + }; } function DimensionsToolsPanel( { @@ -325,13 +331,13 @@ export default function DimensionsPanel( { // Block Gap const showGapControl = useHasGap( settings ); - const gapValue = decodeValue( inheritedValue?.spacing?.blockGap ); - const gapValues = splitGapValue( gapValue ); const gapSides = Array.isArray( settings?.spacing?.blockGap ) ? settings?.spacing?.blockGap : settings?.spacing?.blockGap?.sides; const isAxialGap = gapSides && gapSides.some( ( side ) => AXIAL_SIDES.includes( side ) ); + const gapValue = decodeValue( inheritedValue?.spacing?.blockGap ); + const gapValues = splitGapValue( gapValue, isAxialGap ); const setGapValue = ( newGapValue ) => { onChange( setImmutably( value, [ 'spacing', 'blockGap' ], newGapValue ) diff --git a/packages/block-editor/src/components/tabbed-sidebar/index.js b/packages/block-editor/src/components/tabbed-sidebar/index.js index a0cb510c720904..c9ff6bbf6555f0 100644 --- a/packages/block-editor/src/components/tabbed-sidebar/index.js +++ b/packages/block-editor/src/components/tabbed-sidebar/index.js @@ -33,7 +33,7 @@ function TabbedSidebar( icon={ closeSmall } label={ closeButtonLabel } onClick={ () => onClose() } - size="small" + size="compact" /> { - const { replaceBlocks, multiSelect } = useDispatch( blockEditorStore ); - const { - blocks, - clientIds, - canRemove, - possibleBlockTransformations, - invalidSelection, - } = useSelect( ( select ) => { +const getTransformCommands = () => + function useTransformCommands() { + const { replaceBlocks, multiSelect } = useDispatch( blockEditorStore ); const { - getBlockRootClientId, - getBlockTransformItems, - getSelectedBlockClientIds, - getBlocksByClientId, - canRemoveBlocks, - } = select( blockEditorStore ); + blocks, + clientIds, + canRemove, + possibleBlockTransformations, + invalidSelection, + } = useSelect( ( select ) => { + const { + getBlockRootClientId, + getBlockTransformItems, + getSelectedBlockClientIds, + getBlocksByClientId, + canRemoveBlocks, + } = select( blockEditorStore ); + + const selectedBlockClientIds = getSelectedBlockClientIds(); + const selectedBlocks = getBlocksByClientId( + selectedBlockClientIds + ); + + // selectedBlocks can have `null`s when something tries to call `selectBlock` with an inexistent clientId. + // These nulls will cause fatal errors down the line. + // In order to prevent discrepancies between selectedBlockClientIds and selectedBlocks, we effectively treat the entire selection as invalid. + // @see https://github.com/WordPress/gutenberg/pull/59410#issuecomment-2006304536 + if ( selectedBlocks.filter( ( block ) => ! block ).length > 0 ) { + return { + invalidSelection: true, + }; + } - const selectedBlockClientIds = getSelectedBlockClientIds(); - const selectedBlocks = getBlocksByClientId( selectedBlockClientIds ); + const rootClientId = getBlockRootClientId( + selectedBlockClientIds[ 0 ] + ); + return { + blocks: selectedBlocks, + clientIds: selectedBlockClientIds, + possibleBlockTransformations: getBlockTransformItems( + selectedBlocks, + rootClientId + ), + canRemove: canRemoveBlocks( selectedBlockClientIds ), + invalidSelection: false, + }; + }, [] ); - // selectedBlocks can have `null`s when something tries to call `selectBlock` with an inexistent clientId. - // These nulls will cause fatal errors down the line. - // In order to prevent discrepancies between selectedBlockClientIds and selectedBlocks, we effectively treat the entire selection as invalid. - // @see https://github.com/WordPress/gutenberg/pull/59410#issuecomment-2006304536 - if ( selectedBlocks.filter( ( block ) => ! block ).length > 0 ) { + if ( invalidSelection ) { return { - invalidSelection: true, + isLoading: false, + commands: [], }; } + const isTemplate = blocks.length === 1 && isTemplatePart( blocks[ 0 ] ); + + function selectForMultipleBlocks( insertedBlocks ) { + if ( insertedBlocks.length > 1 ) { + multiSelect( + insertedBlocks[ 0 ].clientId, + insertedBlocks[ insertedBlocks.length - 1 ].clientId + ); + } + } - const rootClientId = getBlockRootClientId( - selectedBlockClientIds[ 0 ] - ); - return { - blocks: selectedBlocks, - clientIds: selectedBlockClientIds, - possibleBlockTransformations: getBlockTransformItems( - selectedBlocks, - rootClientId - ), - canRemove: canRemoveBlocks( selectedBlockClientIds ), - invalidSelection: false, - }; - }, [] ); + // Simple block tranformation based on the `Block Transforms` API. + function onBlockTransform( name ) { + const newBlocks = switchToBlockType( blocks, name ); + replaceBlocks( clientIds, newBlocks ); + selectForMultipleBlocks( newBlocks ); + } - if ( invalidSelection ) { - return { - isLoading: false, - commands: [], - }; - } - const isTemplate = blocks.length === 1 && isTemplatePart( blocks[ 0 ] ); - - function selectForMultipleBlocks( insertedBlocks ) { - if ( insertedBlocks.length > 1 ) { - multiSelect( - insertedBlocks[ 0 ].clientId, - insertedBlocks[ insertedBlocks.length - 1 ].clientId - ); + /** + * The `isTemplate` check is a stopgap solution here. + * Ideally, the Transforms API should handle this + * by allowing to exclude blocks from wildcard transformations. + */ + const hasPossibleBlockTransformations = + !! possibleBlockTransformations.length && canRemove && ! isTemplate; + + if ( + ! clientIds || + clientIds.length < 1 || + ! hasPossibleBlockTransformations + ) { + return { isLoading: false, commands: [] }; } - } - - // Simple block tranformation based on the `Block Transforms` API. - function onBlockTransform( name ) { - const newBlocks = switchToBlockType( blocks, name ); - replaceBlocks( clientIds, newBlocks ); - selectForMultipleBlocks( newBlocks ); - } - - /** - * The `isTemplate` check is a stopgap solution here. - * Ideally, the Transforms API should handle this - * by allowing to exclude blocks from wildcard transformations. - */ - const hasPossibleBlockTransformations = - !! possibleBlockTransformations.length && canRemove && ! isTemplate; - - if ( - ! clientIds || - clientIds.length < 1 || - ! hasPossibleBlockTransformations - ) { - return { isLoading: false, commands: [] }; - } - - const commands = possibleBlockTransformations.map( ( transformation ) => { - const { name, title, icon } = transformation; - return { - name: 'core/block-editor/transform-to-' + name.replace( '/', '-' ), - /* translators: %s: Block or block variation name. */ - label: sprintf( __( 'Transform to %s' ), title ), - icon: , - callback: ( { close } ) => { - onBlockTransform( name ); - close(); + + const commands = possibleBlockTransformations.map( + ( transformation ) => { + const { name, title, icon } = transformation; + return { + name: + 'core/block-editor/transform-to-' + + name.replace( '/', '-' ), + /* translators: %s: Block or block variation name. */ + label: sprintf( __( 'Transform to %s' ), title ), + icon: , + callback: ( { close } ) => { + onBlockTransform( name ); + close(); + }, + }; + } + ); + + return { isLoading: false, commands }; + }; + +const getQuickActionsCommands = () => + function useQuickActionsCommands() { + const { clientIds, isUngroupable, isGroupable } = useSelect( + ( select ) => { + const { + getSelectedBlockClientIds, + isUngroupable: _isUngroupable, + isGroupable: _isGroupable, + } = select( blockEditorStore ); + const selectedBlockClientIds = getSelectedBlockClientIds(); + + return { + clientIds: selectedBlockClientIds, + isUngroupable: _isUngroupable(), + isGroupable: _isGroupable(), + }; }, - }; - } ); + [] + ); + const { + canInsertBlockType, + getBlockRootClientId, + getBlocksByClientId, + canRemoveBlocks, + } = useSelect( blockEditorStore ); + const { getDefaultBlockName, getGroupingBlockName } = + useSelect( blocksStore ); - return { isLoading: false, commands }; -}; + const blocks = getBlocksByClientId( clientIds ); -const useQuickActionsCommands = () => { - const { clientIds, isUngroupable, isGroupable } = useSelect( ( select ) => { const { - getSelectedBlockClientIds, - isUngroupable: _isUngroupable, - isGroupable: _isGroupable, - } = select( blockEditorStore ); - const selectedBlockClientIds = getSelectedBlockClientIds(); + removeBlocks, + replaceBlocks, + duplicateBlocks, + insertAfterBlock, + insertBeforeBlock, + } = useDispatch( blockEditorStore ); + + const onGroup = () => { + if ( ! blocks.length ) { + return; + } - return { - clientIds: selectedBlockClientIds, - isUngroupable: _isUngroupable(), - isGroupable: _isGroupable(), + const groupingBlockName = getGroupingBlockName(); + + // Activate the `transform` on `core/group` which does the conversion. + const newBlocks = switchToBlockType( blocks, groupingBlockName ); + + if ( ! newBlocks ) { + return; + } + replaceBlocks( clientIds, newBlocks ); }; - }, [] ); - const { - canInsertBlockType, - getBlockRootClientId, - getBlocksByClientId, - canRemoveBlocks, - } = useSelect( blockEditorStore ); - const { getDefaultBlockName, getGroupingBlockName } = - useSelect( blocksStore ); - - const blocks = getBlocksByClientId( clientIds ); - - const { - removeBlocks, - replaceBlocks, - duplicateBlocks, - insertAfterBlock, - insertBeforeBlock, - } = useDispatch( blockEditorStore ); - - const onGroup = () => { - if ( ! blocks.length ) { - return; - } + const onUngroup = () => { + if ( ! blocks.length ) { + return; + } - const groupingBlockName = getGroupingBlockName(); + const innerBlocks = blocks[ 0 ].innerBlocks; - // Activate the `transform` on `core/group` which does the conversion. - const newBlocks = switchToBlockType( blocks, groupingBlockName ); + if ( ! innerBlocks.length ) { + return; + } - if ( ! newBlocks ) { - return; - } - replaceBlocks( clientIds, newBlocks ); - }; - const onUngroup = () => { - if ( ! blocks.length ) { - return; + replaceBlocks( clientIds, innerBlocks ); + }; + + if ( ! clientIds || clientIds.length < 1 ) { + return { isLoading: false, commands: [] }; } - const innerBlocks = blocks[ 0 ].innerBlocks; + const rootClientId = getBlockRootClientId( clientIds[ 0 ] ); + const canInsertDefaultBlock = canInsertBlockType( + getDefaultBlockName(), + rootClientId + ); + const canDuplicate = blocks.every( ( block ) => { + return ( + !! block && + hasBlockSupport( block.name, 'multiple', true ) && + canInsertBlockType( block.name, rootClientId ) + ); + } ); + const canRemove = canRemoveBlocks( clientIds ); - if ( ! innerBlocks.length ) { - return; + const commands = []; + + if ( canDuplicate ) { + commands.push( { + name: 'duplicate', + label: __( 'Duplicate' ), + callback: () => duplicateBlocks( clientIds, true ), + icon: copy, + } ); } - replaceBlocks( clientIds, innerBlocks ); - }; + if ( canInsertDefaultBlock ) { + commands.push( + { + name: 'add-before', + label: __( 'Add before' ), + callback: () => { + const clientId = Array.isArray( clientIds ) + ? clientIds[ 0 ] + : clientId; + insertBeforeBlock( clientId ); + }, + icon: add, + }, + { + name: 'add-after', + label: __( 'Add after' ), + callback: () => { + const clientId = Array.isArray( clientIds ) + ? clientIds[ clientIds.length - 1 ] + : clientId; + insertAfterBlock( clientId ); + }, + icon: add, + } + ); + } - if ( ! clientIds || clientIds.length < 1 ) { - return { isLoading: false, commands: [] }; - } - - const rootClientId = getBlockRootClientId( clientIds[ 0 ] ); - const canInsertDefaultBlock = canInsertBlockType( - getDefaultBlockName(), - rootClientId - ); - const canDuplicate = blocks.every( ( block ) => { - return ( - !! block && - hasBlockSupport( block.name, 'multiple', true ) && - canInsertBlockType( block.name, rootClientId ) - ); - } ); - const canRemove = canRemoveBlocks( clientIds ); + if ( isGroupable ) { + commands.push( { + name: 'Group', + label: __( 'Group' ), + callback: onGroup, + icon: group, + } ); + } - const commands = []; + if ( isUngroupable ) { + commands.push( { + name: 'ungroup', + label: __( 'Ungroup' ), + callback: onUngroup, + icon: ungroup, + } ); + } - if ( canDuplicate ) { - commands.push( { - name: 'duplicate', - label: __( 'Duplicate' ), - callback: () => duplicateBlocks( clientIds, true ), - icon: copy, - } ); - } - - if ( canInsertDefaultBlock ) { - commands.push( - { - name: 'add-before', - label: __( 'Add before' ), - callback: () => { - const clientId = Array.isArray( clientIds ) - ? clientIds[ 0 ] - : clientId; - insertBeforeBlock( clientId ); - }, - icon: add, - }, - { - name: 'add-after', - label: __( 'Add after' ), - callback: () => { - const clientId = Array.isArray( clientIds ) - ? clientIds[ clientIds.length - 1 ] - : clientId; - insertAfterBlock( clientId ); + if ( canRemove ) { + commands.push( { + name: 'remove', + label: __( 'Delete' ), + callback: () => removeBlocks( clientIds, true ), + icon: remove, + } ); + } + + return { + isLoading: false, + commands: commands.map( ( command ) => ( { + ...command, + name: 'core/block-editor/action-' + command.name, + callback: ( { close } ) => { + command.callback(); + close(); }, - icon: add, - } - ); - } - - if ( isGroupable ) { - commands.push( { - name: 'Group', - label: __( 'Group' ), - callback: onGroup, - icon: group, - } ); - } - - if ( isUngroupable ) { - commands.push( { - name: 'ungroup', - label: __( 'Ungroup' ), - callback: onUngroup, - icon: ungroup, - } ); - } - - if ( canRemove ) { - commands.push( { - name: 'remove', - label: __( 'Delete' ), - callback: () => removeBlocks( clientIds, true ), - icon: remove, - } ); - } - - return { - isLoading: false, - commands: commands.map( ( command ) => ( { - ...command, - name: 'core/block-editor/action-' + command.name, - callback: ( { close } ) => { - command.callback(); - close(); - }, - } ) ), + } ) ), + }; }; -}; export const useBlockCommands = () => { useCommandLoader( { name: 'core/block-editor/blockTransforms', - hook: useTransformCommands, + hook: getTransformCommands(), } ); useCommandLoader( { name: 'core/block-editor/blockQuickActions', - hook: useQuickActionsCommands, + hook: getQuickActionsCommands(), context: 'block-selection-edit', } ); }; diff --git a/packages/block-editor/src/hooks/utils.js b/packages/block-editor/src/hooks/utils.js index fa710fa7f08eba..4334f70b9d13bf 100644 --- a/packages/block-editor/src/hooks/utils.js +++ b/packages/block-editor/src/hooks/utils.js @@ -562,8 +562,13 @@ export function createBlockEditFilter( features ) { addFilter( 'editor.BlockEdit', 'core/editor/hooks', withBlockEditHooks ); } -function BlockProps( { index, useBlockProps, setAllWrapperProps, ...props } ) { - const wrapperProps = useBlockProps( props ); +function BlockProps( { + index, + useBlockProps: hook, + setAllWrapperProps, + ...props +} ) { + const wrapperProps = hook( props ); const setWrapperProps = ( next ) => setAllWrapperProps( ( prev ) => { const nextAll = [ ...prev ]; diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss index 79689e82006cdc..1bb19bf29da691 100644 --- a/packages/block-library/src/image/style.scss +++ b/packages/block-library/src/image/style.scss @@ -10,10 +10,6 @@ vertical-align: bottom; box-sizing: border-box; - &:not([src$=".svg"]) { - width: fit-content; - } - @media (prefers-reduced-motion: no-preference) { &.hide { visibility: hidden; diff --git a/packages/block-library/src/post-content/block.json b/packages/block-library/src/post-content/block.json index 1b9de707cb3220..ed9c47154b2f8e 100644 --- a/packages/block-library/src/post-content/block.json +++ b/packages/block-library/src/post-content/block.json @@ -27,6 +27,7 @@ "spacing": { "blockGap": true, "padding": true, + "margin": true, "__experimentalDefaultControls": { "margin": false, "padding": false @@ -52,8 +53,20 @@ "__experimentalDefaultControls": { "fontSize": true } + }, + "__experimentalBorder": { + "radius": true, + "color": true, + "width": true, + "style": true, + "__experimentalDefaultControls": { + "radius": true, + "color": true, + "width": true, + "style": true + } } }, "style": "wp-block-post-content", "editorStyle": "wp-block-post-content-editor" -} +} \ No newline at end of file diff --git a/packages/components/src/external-link/stories/index.story.tsx b/packages/components/src/external-link/stories/index.story.tsx index 91131e0c88aab0..eb70999413187f 100644 --- a/packages/components/src/external-link/stories/index.story.tsx +++ b/packages/components/src/external-link/stories/index.story.tsx @@ -10,7 +10,8 @@ import ExternalLink from '..'; const meta: Meta< typeof ExternalLink > = { component: ExternalLink, - title: 'Components/ExternalLink', + title: 'Components/Navigation/ExternalLink', + id: 'components-externallink', argTypes: { children: { control: { type: 'text' } }, }, diff --git a/packages/components/src/navigator/stories/index.story.tsx b/packages/components/src/navigator/stories/index.story.tsx index e9e342bb0d2eee..bd2cdc17a1263c 100644 --- a/packages/components/src/navigator/stories/index.story.tsx +++ b/packages/components/src/navigator/stories/index.story.tsx @@ -21,7 +21,8 @@ const meta: Meta< typeof Navigator > = { // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 BackButton: Navigator.BackButton, }, - title: 'Components/Navigator', + title: 'Components/Navigation/Navigator', + id: 'components-navigator', argTypes: { as: { control: { type: null } }, children: { control: { type: null } }, diff --git a/packages/components/src/notice/stories/index.story.tsx b/packages/components/src/notice/stories/index.story.tsx index 95bf82016c2b04..042b4ac3ec79b3 100644 --- a/packages/components/src/notice/stories/index.story.tsx +++ b/packages/components/src/notice/stories/index.story.tsx @@ -17,7 +17,8 @@ import NoticeList from '../list'; import type { NoticeListProps } from '../types'; const meta: Meta< typeof Notice > = { - title: 'Components/Notice', + title: 'Components/Feedback/Notice', + id: 'components-notice', component: Notice, // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 subcomponents: { NoticeList }, diff --git a/packages/components/src/progress-bar/stories/index.story.tsx b/packages/components/src/progress-bar/stories/index.story.tsx index 4396c4cc48eebb..2f6bb4dbe000fd 100644 --- a/packages/components/src/progress-bar/stories/index.story.tsx +++ b/packages/components/src/progress-bar/stories/index.story.tsx @@ -10,7 +10,8 @@ import { ProgressBar } from '..'; const meta: Meta< typeof ProgressBar > = { component: ProgressBar, - title: 'Components/ProgressBar', + title: 'Components/Feedback/ProgressBar', + id: 'components-progressbar', argTypes: { value: { control: { type: 'number', min: 0, max: 100, step: 1 } }, }, diff --git a/packages/components/src/snackbar/stories/index.story.tsx b/packages/components/src/snackbar/stories/index.story.tsx index c1f525b60b3919..9bd1dae42b71be 100644 --- a/packages/components/src/snackbar/stories/index.story.tsx +++ b/packages/components/src/snackbar/stories/index.story.tsx @@ -15,7 +15,8 @@ import Icon from '../../icon'; import Snackbar from '..'; const meta: Meta< typeof Snackbar > = { - title: 'Components/Snackbar', + title: 'Components/Feedback/Snackbar', + id: 'components-snackbar', component: Snackbar, argTypes: { as: { control: { type: null } }, diff --git a/packages/components/src/snackbar/stories/list.story.tsx b/packages/components/src/snackbar/stories/list.story.tsx index 8548ffba1e1f09..1f93f374ec1745 100644 --- a/packages/components/src/snackbar/stories/list.story.tsx +++ b/packages/components/src/snackbar/stories/list.story.tsx @@ -14,7 +14,8 @@ import { useState } from '@wordpress/element'; import SnackbarList from '../list'; const meta: Meta< typeof SnackbarList > = { - title: 'Components/SnackbarList', + title: 'Components/Feedback/SnackbarList', + id: 'components-snackbarlist', component: SnackbarList, argTypes: { as: { control: { type: null } }, diff --git a/packages/components/src/spinner/stories/index.story.tsx b/packages/components/src/spinner/stories/index.story.tsx index 1062c6406bfb4e..1dc5879ac41444 100644 --- a/packages/components/src/spinner/stories/index.story.tsx +++ b/packages/components/src/spinner/stories/index.story.tsx @@ -10,7 +10,8 @@ import Spinner from '../'; import { space } from '../../utils/space'; const meta: Meta< typeof Spinner > = { - title: 'Components/Spinner', + title: 'Components/Feedback/Spinner', + id: 'components-spinner', component: Spinner, parameters: { controls: { diff --git a/packages/components/src/tip/stories/index.story.tsx b/packages/components/src/tip/stories/index.story.tsx index 3999c6b9be45f4..3026f2a58fae73 100644 --- a/packages/components/src/tip/stories/index.story.tsx +++ b/packages/components/src/tip/stories/index.story.tsx @@ -10,7 +10,8 @@ import Tip from '..'; const meta: Meta< typeof Tip > = { component: Tip, - title: 'Components/Tip', + title: 'Components/Feedback/Tip', + id: 'components-tip', argTypes: { children: { control: { type: 'text' } }, }, diff --git a/packages/components/src/tree-grid/stories/index.story.tsx b/packages/components/src/tree-grid/stories/index.story.tsx index 44af154c685b2f..5a1ed95e1fd627 100644 --- a/packages/components/src/tree-grid/stories/index.story.tsx +++ b/packages/components/src/tree-grid/stories/index.story.tsx @@ -16,7 +16,8 @@ import { Button } from '../../button'; import InputControl from '../../input-control'; const meta: Meta< typeof TreeGrid > = { - title: 'Components (Experimental)/TreeGrid', + title: 'Components (Experimental)/Navigation/TreeGrid', + id: 'components-experimental-treegrid', component: TreeGrid, // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 subcomponents: { TreeGridRow, TreeGridCell }, diff --git a/packages/core-commands/src/admin-navigation-commands.js b/packages/core-commands/src/admin-navigation-commands.js index c0d8bb084b46ad..9f0883faa3c17a 100644 --- a/packages/core-commands/src/admin-navigation-commands.js +++ b/packages/core-commands/src/admin-navigation-commands.js @@ -18,75 +18,78 @@ import { unlock } from './lock-unlock'; const { useHistory } = unlock( routerPrivateApis ); -function useAddNewPageCommand() { - const isSiteEditor = getPath( window.location.href )?.includes( - 'site-editor.php' - ); - const history = useHistory(); - const isBlockBasedTheme = useSelect( ( select ) => { - return select( coreStore ).getCurrentTheme()?.is_block_theme; - }, [] ); - const { saveEntityRecord } = useDispatch( coreStore ); - const { createErrorNotice } = useDispatch( noticesStore ); +const getAddNewPageCommand = () => + function useAddNewPageCommand() { + const isSiteEditor = getPath( window.location.href )?.includes( + 'site-editor.php' + ); + const history = useHistory(); + const isBlockBasedTheme = useSelect( ( select ) => { + return select( coreStore ).getCurrentTheme()?.is_block_theme; + }, [] ); + const { saveEntityRecord } = useDispatch( coreStore ); + const { createErrorNotice } = useDispatch( noticesStore ); - const createPageEntity = useCallback( - async ( { close } ) => { - try { - const page = await saveEntityRecord( - 'postType', - 'page', - { - status: 'draft', - }, - { - throwOnError: true, + const createPageEntity = useCallback( + async ( { close } ) => { + try { + const page = await saveEntityRecord( + 'postType', + 'page', + { + status: 'draft', + }, + { + throwOnError: true, + } + ); + if ( page?.id ) { + history.push( { + postId: page.id, + postType: 'page', + canvas: 'edit', + } ); } - ); - if ( page?.id ) { - history.push( { - postId: page.id, - postType: 'page', - canvas: 'edit', + } catch ( error ) { + const errorMessage = + error.message && error.code !== 'unknown_error' + ? error.message + : __( + 'An error occurred while creating the item.' + ); + + createErrorNotice( errorMessage, { + type: 'snackbar', } ); + } finally { + close(); } - } catch ( error ) { - const errorMessage = - error.message && error.code !== 'unknown_error' - ? error.message - : __( 'An error occurred while creating the item.' ); - - createErrorNotice( errorMessage, { - type: 'snackbar', - } ); - } finally { - close(); - } - }, - [ createErrorNotice, history, saveEntityRecord ] - ); - - const commands = useMemo( () => { - const addNewPage = - isSiteEditor && isBlockBasedTheme - ? createPageEntity - : () => - ( document.location.href = - 'post-new.php?post_type=page' ); - return [ - { - name: 'core/add-new-page', - label: __( 'Add new page' ), - icon: plus, - callback: addNewPage, }, - ]; - }, [ createPageEntity, isSiteEditor, isBlockBasedTheme ] ); + [ createErrorNotice, history, saveEntityRecord ] + ); + + const commands = useMemo( () => { + const addNewPage = + isSiteEditor && isBlockBasedTheme + ? createPageEntity + : () => + ( document.location.href = + 'post-new.php?post_type=page' ); + return [ + { + name: 'core/add-new-page', + label: __( 'Add new page' ), + icon: plus, + callback: addNewPage, + }, + ]; + }, [ createPageEntity, isSiteEditor, isBlockBasedTheme ] ); - return { - isLoading: false, - commands, + return { + isLoading: false, + commands, + }; }; -} export function useAdminNavigationCommands() { useCommand( { @@ -100,6 +103,6 @@ export function useAdminNavigationCommands() { useCommandLoader( { name: 'core/add-new-page', - hook: useAddNewPageCommand, + hook: getAddNewPageCommand(), } ); } diff --git a/packages/core-commands/src/site-editor-navigation-commands.js b/packages/core-commands/src/site-editor-navigation-commands.js index 4679d4d1523c89..2785d809d41e03 100644 --- a/packages/core-commands/src/site-editor-navigation-commands.js +++ b/packages/core-commands/src/site-editor-navigation-commands.js @@ -275,159 +275,169 @@ const getNavigationCommandLoaderPerTemplate = ( templateType ) => }; }; -const usePageNavigationCommandLoader = - getNavigationCommandLoaderPerPostType( 'page' ); -const usePostNavigationCommandLoader = - getNavigationCommandLoaderPerPostType( 'post' ); -const useTemplateNavigationCommandLoader = - getNavigationCommandLoaderPerTemplate( 'wp_template' ); -const useTemplatePartNavigationCommandLoader = - getNavigationCommandLoaderPerTemplate( 'wp_template_part' ); +const getSiteEditorBasicNavigationCommands = () => + function useSiteEditorBasicNavigationCommands() { + const history = useHistory(); + const isSiteEditor = getPath( window.location.href )?.includes( + 'site-editor.php' + ); + const { isBlockBasedTheme, canCreateTemplate } = useSelect( + ( select ) => { + return { + isBlockBasedTheme: + select( coreStore ).getCurrentTheme()?.is_block_theme, + canCreateTemplate: select( coreStore ).canUser( 'create', { + kind: 'postType', + name: 'wp_template', + } ), + }; + }, + [] + ); + const commands = useMemo( () => { + const result = []; -function useSiteEditorBasicNavigationCommands() { - const history = useHistory(); - const isSiteEditor = getPath( window.location.href )?.includes( - 'site-editor.php' - ); - const { isBlockBasedTheme, canCreateTemplate } = useSelect( ( select ) => { - return { - isBlockBasedTheme: - select( coreStore ).getCurrentTheme()?.is_block_theme, - canCreateTemplate: select( coreStore ).canUser( 'create', { - kind: 'postType', - name: 'wp_template', - } ), - }; - }, [] ); - const commands = useMemo( () => { - const result = []; + if ( canCreateTemplate && isBlockBasedTheme ) { + result.push( { + name: 'core/edit-site/open-navigation', + label: __( 'Navigation' ), + icon: navigation, + callback: ( { close } ) => { + const args = { + postType: 'wp_navigation', + }; + const targetUrl = addQueryArgs( + 'site-editor.php', + args + ); + if ( isSiteEditor ) { + history.push( args ); + } else { + document.location = targetUrl; + } + close(); + }, + } ); - if ( canCreateTemplate && isBlockBasedTheme ) { - result.push( { - name: 'core/edit-site/open-navigation', - label: __( 'Navigation' ), - icon: navigation, - callback: ( { close } ) => { - const args = { - postType: 'wp_navigation', - }; - const targetUrl = addQueryArgs( 'site-editor.php', args ); - if ( isSiteEditor ) { - history.push( args ); - } else { - document.location = targetUrl; - } - close(); - }, - } ); + result.push( { + name: 'core/edit-site/open-styles', + label: __( 'Styles' ), + icon: styles, + callback: ( { close } ) => { + const args = { + path: '/wp_global_styles', + }; + const targetUrl = addQueryArgs( + 'site-editor.php', + args + ); + if ( isSiteEditor ) { + history.push( args ); + } else { + document.location = targetUrl; + } + close(); + }, + } ); - result.push( { - name: 'core/edit-site/open-styles', - label: __( 'Styles' ), - icon: styles, - callback: ( { close } ) => { - const args = { - path: '/wp_global_styles', - }; - const targetUrl = addQueryArgs( 'site-editor.php', args ); - if ( isSiteEditor ) { - history.push( args ); - } else { - document.location = targetUrl; - } - close(); - }, - } ); + result.push( { + name: 'core/edit-site/open-pages', + label: __( 'Pages' ), + icon: page, + callback: ( { close } ) => { + const args = { + postType: 'page', + }; + const targetUrl = addQueryArgs( + 'site-editor.php', + args + ); + if ( isSiteEditor ) { + history.push( args ); + } else { + document.location = targetUrl; + } + close(); + }, + } ); - result.push( { - name: 'core/edit-site/open-pages', - label: __( 'Pages' ), - icon: page, - callback: ( { close } ) => { - const args = { - postType: 'page', - }; - const targetUrl = addQueryArgs( 'site-editor.php', args ); - if ( isSiteEditor ) { - history.push( args ); - } else { - document.location = targetUrl; - } - close(); - }, - } ); + result.push( { + name: 'core/edit-site/open-templates', + label: __( 'Templates' ), + icon: layout, + callback: ( { close } ) => { + const args = { + postType: 'wp_template', + }; + const targetUrl = addQueryArgs( + 'site-editor.php', + args + ); + if ( isSiteEditor ) { + history.push( args ); + } else { + document.location = targetUrl; + } + close(); + }, + } ); + } result.push( { - name: 'core/edit-site/open-templates', - label: __( 'Templates' ), - icon: layout, + name: 'core/edit-site/open-patterns', + label: __( 'Patterns' ), + icon: symbol, callback: ( { close } ) => { - const args = { - postType: 'wp_template', - }; - const targetUrl = addQueryArgs( 'site-editor.php', args ); - if ( isSiteEditor ) { - history.push( args ); + if ( canCreateTemplate ) { + const args = { + postType: 'wp_block', + }; + const targetUrl = addQueryArgs( + 'site-editor.php', + args + ); + if ( isSiteEditor ) { + history.push( args ); + } else { + document.location = targetUrl; + } + close(); } else { - document.location = targetUrl; + // If a user cannot access the site editor + document.location.href = 'edit.php?post_type=wp_block'; } - close(); }, } ); - } - - result.push( { - name: 'core/edit-site/open-patterns', - label: __( 'Patterns' ), - icon: symbol, - callback: ( { close } ) => { - if ( canCreateTemplate ) { - const args = { - postType: 'wp_block', - }; - const targetUrl = addQueryArgs( 'site-editor.php', args ); - if ( isSiteEditor ) { - history.push( args ); - } else { - document.location = targetUrl; - } - close(); - } else { - // If a user cannot access the site editor - document.location.href = 'edit.php?post_type=wp_block'; - } - }, - } ); - return result; - }, [ history, isSiteEditor, canCreateTemplate, isBlockBasedTheme ] ); + return result; + }, [ history, isSiteEditor, canCreateTemplate, isBlockBasedTheme ] ); - return { - commands, - isLoading: false, + return { + commands, + isLoading: false, + }; }; -} export function useSiteEditorNavigationCommands() { useCommandLoader( { name: 'core/edit-site/navigate-pages', - hook: usePageNavigationCommandLoader, + hook: getNavigationCommandLoaderPerPostType( 'page' ), } ); useCommandLoader( { name: 'core/edit-site/navigate-posts', - hook: usePostNavigationCommandLoader, + hook: getNavigationCommandLoaderPerPostType( 'post' ), } ); useCommandLoader( { name: 'core/edit-site/navigate-templates', - hook: useTemplateNavigationCommandLoader, + hook: getNavigationCommandLoaderPerTemplate( 'wp_template' ), } ); useCommandLoader( { name: 'core/edit-site/navigate-template-parts', - hook: useTemplatePartNavigationCommandLoader, + hook: getNavigationCommandLoaderPerTemplate( 'wp_template_part' ), } ); useCommandLoader( { name: 'core/edit-site/basic-navigation', - hook: useSiteEditorBasicNavigationCommands, + hook: getSiteEditorBasicNavigationCommands(), context: 'site-editor', } ); } diff --git a/packages/data/src/components/use-select/index.js b/packages/data/src/components/use-select/index.js index 3e28e9489e977e..15a3c88d2d5543 100644 --- a/packages/data/src/components/use-select/index.js +++ b/packages/data/src/components/use-select/index.js @@ -209,11 +209,11 @@ function Store( registry, suspense ) { }; } -function useStaticSelect( storeName ) { +function _useStaticSelect( storeName ) { return useRegistry().select( storeName ); } -function useMappingSelect( suspense, mapSelect, deps ) { +function _useMappingSelect( suspense, mapSelect, deps ) { const registry = useRegistry(); const isAsync = useAsyncMode(); const store = useMemo( @@ -308,13 +308,11 @@ export default function useSelect( mapSelect, deps ) { ); } - /* eslint-disable react-hooks/rules-of-hooks */ // `staticSelectMode` is not allowed to change during the hook instance's, // lifetime, so the rules of hooks are not really violated. return staticSelectMode - ? useStaticSelect( mapSelect ) - : useMappingSelect( false, mapSelect, deps ); - /* eslint-enable react-hooks/rules-of-hooks */ + ? _useStaticSelect( mapSelect ) + : _useMappingSelect( false, mapSelect, deps ); } /** @@ -337,5 +335,5 @@ export default function useSelect( mapSelect, deps ) { * @return {ReturnType} Data object returned by the `mapSelect` function. */ export function useSuspenseSelect( mapSelect, deps ) { - return useMappingSelect( true, mapSelect, deps ); + return _useMappingSelect( true, mapSelect, deps ); } diff --git a/packages/edit-post/src/components/layout/use-should-iframe.js b/packages/edit-post/src/components/layout/use-should-iframe.js index 6da344c138f64b..cd2a893d8d1cd0 100644 --- a/packages/edit-post/src/components/layout/use-should-iframe.js +++ b/packages/edit-post/src/components/layout/use-should-iframe.js @@ -11,39 +11,27 @@ import { store as blockEditorStore } from '@wordpress/block-editor'; */ import { unlock } from '../../lock-unlock'; -const isGutenbergPlugin = globalThis.IS_GUTENBERG_PLUGIN ? true : false; - export function useShouldIframe() { - const { - isBlockBasedTheme, - hasV3BlocksOnly, - isEditingTemplateOrPattern, - isZoomOutMode, - deviceType, - } = useSelect( ( select ) => { + return useSelect( ( select ) => { const { getEditorSettings, getCurrentPostType, getDeviceType } = select( editorStore ); - const { isZoomOut } = unlock( select( blockEditorStore ) ); - const { getBlockTypes } = select( blocksStore ); - const editorSettings = getEditorSettings(); - return { - isBlockBasedTheme: editorSettings.__unstableIsBlockBasedTheme, - hasV3BlocksOnly: getBlockTypes().every( ( type ) => { - return type.apiVersion >= 3; - } ), - isEditingTemplateOrPattern: [ 'wp_template', 'wp_block' ].includes( - getCurrentPostType() - ), - isZoomOutMode: isZoomOut(), - deviceType: getDeviceType(), - }; + return ( + // If the theme is block based, we ALWAYS use the iframe for + // consistency across the post and site editor. The iframe was + // introduced long before the sited editor and block themes, so + // these themes are expecting it. + getEditorSettings().__unstableIsBlockBasedTheme || + // For classic themes, we also still want to iframe all the special + // editor features and modes such as device previews, zoom out, and + // template/pattern editing. + getDeviceType() !== 'Desktop' || + [ 'wp_template', 'wp_block' ].includes( getCurrentPostType() ) || + unlock( select( blockEditorStore ) ).isZoomOut() || + // Finally, still iframe the editor for classic themes if all blocks + // are v3 (which means they are marked as iframe-compatible). + select( blocksStore ) + .getBlockTypes() + .every( ( type ) => type.apiVersion >= 3 ) + ); }, [] ); - - return ( - hasV3BlocksOnly || - ( isGutenbergPlugin && isBlockBasedTheme ) || - isEditingTemplateOrPattern || - isZoomOutMode || - [ 'Tablet', 'Mobile' ].includes( deviceType ) - ); } diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js b/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js index b7ce38857c9461..d6acd711108b5c 100644 --- a/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js +++ b/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js @@ -1,18 +1,13 @@ -/** - * External dependencies - */ -import clsx from 'clsx'; - /** * WordPress dependencies */ import { __, sprintf } from '@wordpress/i18n'; -import { Button } from '@wordpress/components'; +import { Button, Composite } from '@wordpress/components'; import { dateI18n, getDate, humanTimeDiff, getSettings } from '@wordpress/date'; import { store as coreStore } from '@wordpress/core-data'; import { useSelect } from '@wordpress/data'; import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; - +import { ENTER, SPACE } from '@wordpress/keycodes'; /** * Internal dependencies */ @@ -117,10 +112,11 @@ function RevisionsButtons( { const { datetimeAbbreviated } = getSettings().formats; return ( -
    { userRevisions.map( ( revision, index ) => { const { id, author, modified } = revision; @@ -149,28 +145,26 @@ function RevisionsButtons( { ); return ( -
  1. - + { isSelected && ( areStylesEqual ? (

    @@ -225,16 +219,19 @@ function RevisionsButtons( { variant="primary" className="edit-site-global-styles-screen-revisions__apply-button" onClick={ onApplyRevision } + aria-label={ __( + 'Apply the selected revision to your site.' + ) } > { isReset ? __( 'Reset to defaults' ) : __( 'Apply' ) } ) ) } -

    2. + ); } ) } -
+ ); } diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/style.scss b/packages/edit-site/src/components/global-styles/screen-revisions/style.scss index 5d0e7cb185137a..1773d1a179b3dd 100644 --- a/packages/edit-site/src/components/global-styles/screen-revisions/style.scss +++ b/packages/edit-site/src/components/global-styles/screen-revisions/style.scss @@ -14,6 +14,11 @@ display: flex; flex-direction: column; + &[role="option"]:active, + &[role="option"]:focus { + @include button-style__focus(); + } + &:hover { background: rgba(var(--wp-admin-theme-color--rgb), 0.04); .edit-site-global-styles-screen-revisions__date { @@ -42,7 +47,7 @@ border: 4px solid transparent; } - &.is-selected { + &[aria-selected="true"] { border-radius: $radius-small; // Only visible in Windows High Contrast mode. @@ -52,10 +57,6 @@ color: var(--wp-admin-theme-color); background: rgba(var(--wp-admin-theme-color--rgb), 0.04); - .edit-site-global-styles-screen-revisions__revision-button { - opacity: 1; - } - .edit-site-global-styles-screen-revisions__date { color: var(--wp-admin-theme-color); } @@ -86,23 +87,16 @@ &:last-child::after { height: $grid-unit-20 + 2; } - - // Nested to override specificity of .components-button. - .edit-site-global-styles-screen-revisions__revision-button { - width: 100%; - height: auto; - display: block; - padding: $grid-unit-15 $grid-unit-15 $grid-unit-05 $grid-unit-50; - z-index: 1; - position: relative; - outline-offset: -2px; - } +} +.edit-site-global-styles-screen-revisions__revision-item-wrapper { + display: block; + padding: $grid-unit-15 $grid-unit-15 $grid-unit-05 $grid-unit-50; } .edit-site-global-styles-screen-revisions__apply-button.is-primary, .edit-site-global-styles-screen-revisions__applied-text { align-self: flex-start; - // Left margin = left padding of .edit-site-global-styles-screen-revisions__revision-button. + // Left margin = left padding of .edit-site-global-styles-screen-revisions__revision-item-wrapper. margin: $grid-unit-05 $grid-unit-15 $grid-unit-15 $grid-unit-50; } diff --git a/packages/edit-site/src/hooks/commands/use-common-commands.js b/packages/edit-site/src/hooks/commands/use-common-commands.js index 536817e88d3a47..3e87f8721e116a 100644 --- a/packages/edit-site/src/hooks/commands/use-common-commands.js +++ b/packages/edit-site/src/hooks/commands/use-common-commands.js @@ -28,282 +28,289 @@ import { store as editSiteStore } from '../../store'; const { useGlobalStylesReset } = unlock( blockEditorPrivateApis ); const { useHistory, useLocation } = unlock( routerPrivateApis ); -function useGlobalStylesOpenStylesCommands() { - const { openGeneralSidebar } = unlock( useDispatch( editSiteStore ) ); - const { params } = useLocation(); - const { canvas = 'view' } = params; - const history = useHistory(); - const isBlockBasedTheme = useSelect( ( select ) => { - return select( coreStore ).getCurrentTheme().is_block_theme; - }, [] ); +const getGlobalStylesOpenStylesCommands = () => + function useGlobalStylesOpenStylesCommands() { + const { openGeneralSidebar } = unlock( useDispatch( editSiteStore ) ); + const { params } = useLocation(); + const { canvas = 'view' } = params; + const history = useHistory(); + const isBlockBasedTheme = useSelect( ( select ) => { + return select( coreStore ).getCurrentTheme().is_block_theme; + }, [] ); - const commands = useMemo( () => { - if ( ! isBlockBasedTheme ) { - return []; - } + const commands = useMemo( () => { + if ( ! isBlockBasedTheme ) { + return []; + } - return [ - { - name: 'core/edit-site/open-styles', - label: __( 'Open styles' ), - callback: ( { close } ) => { - close(); - if ( ! params.postId ) { - history.push( { - path: '/wp_global_styles', - canvas: 'edit', - } ); - } - if ( params.postId && canvas !== 'edit' ) { - history.push( - { ...params, canvas: 'edit' }, - undefined, - { - transition: 'canvas-mode-edit-transition', - } - ); - } - openGeneralSidebar( 'edit-site/global-styles' ); + return [ + { + name: 'core/edit-site/open-styles', + label: __( 'Open styles' ), + callback: ( { close } ) => { + close(); + if ( ! params.postId ) { + history.push( { + path: '/wp_global_styles', + canvas: 'edit', + } ); + } + if ( params.postId && canvas !== 'edit' ) { + history.push( + { ...params, canvas: 'edit' }, + undefined, + { + transition: 'canvas-mode-edit-transition', + } + ); + } + openGeneralSidebar( 'edit-site/global-styles' ); + }, + icon: styles, }, - icon: styles, - }, - ]; - }, [ history, openGeneralSidebar, params, canvas, isBlockBasedTheme ] ); + ]; + }, [ history, openGeneralSidebar, params, canvas, isBlockBasedTheme ] ); - return { - isLoading: false, - commands, + return { + isLoading: false, + commands, + }; }; -} -function useGlobalStylesToggleWelcomeGuideCommands() { - const { openGeneralSidebar } = unlock( useDispatch( editSiteStore ) ); - const { params } = useLocation(); - const { canvas = 'view' } = params; - const { set } = useDispatch( preferencesStore ); +const getGlobalStylesToggleWelcomeGuideCommands = () => + function useGlobalStylesToggleWelcomeGuideCommands() { + const { openGeneralSidebar } = unlock( useDispatch( editSiteStore ) ); + const { params } = useLocation(); + const { canvas = 'view' } = params; + const { set } = useDispatch( preferencesStore ); - const history = useHistory(); - const isBlockBasedTheme = useSelect( ( select ) => { - return select( coreStore ).getCurrentTheme().is_block_theme; - }, [] ); + const history = useHistory(); + const isBlockBasedTheme = useSelect( ( select ) => { + return select( coreStore ).getCurrentTheme().is_block_theme; + }, [] ); - const commands = useMemo( () => { - if ( ! isBlockBasedTheme ) { - return []; - } + const commands = useMemo( () => { + if ( ! isBlockBasedTheme ) { + return []; + } - return [ - { - name: 'core/edit-site/toggle-styles-welcome-guide', - label: __( 'Learn about styles' ), - callback: ( { close } ) => { - close(); - if ( ! params.postId ) { - history.push( { - path: '/wp_global_styles', - canvas: 'edit', - } ); - } - if ( params.postId && canvas !== 'edit' ) { - history.push( - { - ...params, + return [ + { + name: 'core/edit-site/toggle-styles-welcome-guide', + label: __( 'Learn about styles' ), + callback: ( { close } ) => { + close(); + if ( ! params.postId ) { + history.push( { + path: '/wp_global_styles', canvas: 'edit', - }, - undefined, - { - transition: 'canvas-mode-edit-transition', - } - ); - } - openGeneralSidebar( 'edit-site/global-styles' ); - set( 'core/edit-site', 'welcomeGuideStyles', true ); - // sometimes there's a focus loss that happens after some time - // that closes the modal, we need to force reopening it. - setTimeout( () => { + } ); + } + if ( params.postId && canvas !== 'edit' ) { + history.push( + { + ...params, + canvas: 'edit', + }, + undefined, + { + transition: 'canvas-mode-edit-transition', + } + ); + } + openGeneralSidebar( 'edit-site/global-styles' ); set( 'core/edit-site', 'welcomeGuideStyles', true ); - }, 500 ); + // sometimes there's a focus loss that happens after some time + // that closes the modal, we need to force reopening it. + setTimeout( () => { + set( 'core/edit-site', 'welcomeGuideStyles', true ); + }, 500 ); + }, + icon: help, }, - icon: help, - }, - ]; - }, [ - history, - openGeneralSidebar, - canvas, - isBlockBasedTheme, - set, - params, - ] ); + ]; + }, [ + history, + openGeneralSidebar, + canvas, + isBlockBasedTheme, + set, + params, + ] ); - return { - isLoading: false, - commands, + return { + isLoading: false, + commands, + }; }; -} -function useGlobalStylesResetCommands() { - const [ canReset, onReset ] = useGlobalStylesReset(); - const commands = useMemo( () => { - if ( ! canReset ) { - return []; - } +const getGlobalStylesResetCommands = () => + function useGlobalStylesResetCommands() { + const [ canReset, onReset ] = useGlobalStylesReset(); + const commands = useMemo( () => { + if ( ! canReset ) { + return []; + } - return [ - { - name: 'core/edit-site/reset-global-styles', - label: __( 'Reset styles' ), - icon: isRTL() ? rotateRight : rotateLeft, - callback: ( { close } ) => { - close(); - onReset(); + return [ + { + name: 'core/edit-site/reset-global-styles', + label: __( 'Reset styles' ), + icon: isRTL() ? rotateRight : rotateLeft, + callback: ( { close } ) => { + close(); + onReset(); + }, }, - }, - ]; - }, [ canReset, onReset ] ); + ]; + }, [ canReset, onReset ] ); - return { - isLoading: false, - commands, + return { + isLoading: false, + commands, + }; }; -} -function useGlobalStylesOpenCssCommands() { - const { openGeneralSidebar, setEditorCanvasContainerView } = unlock( - useDispatch( editSiteStore ) - ); - const { params } = useLocation(); - const { canvas = 'view' } = params; - const history = useHistory(); - const { canEditCSS } = useSelect( ( select ) => { - const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } = - select( coreStore ); +const getGlobalStylesOpenCssCommands = () => + function useGlobalStylesOpenCssCommands() { + const { openGeneralSidebar, setEditorCanvasContainerView } = unlock( + useDispatch( editSiteStore ) + ); + const { params } = useLocation(); + const { canvas = 'view' } = params; + const history = useHistory(); + const { canEditCSS } = useSelect( ( select ) => { + const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } = + select( coreStore ); - const globalStylesId = __experimentalGetCurrentGlobalStylesId(); - const globalStyles = globalStylesId - ? getEntityRecord( 'root', 'globalStyles', globalStylesId ) - : undefined; + const globalStylesId = __experimentalGetCurrentGlobalStylesId(); + const globalStyles = globalStylesId + ? getEntityRecord( 'root', 'globalStyles', globalStylesId ) + : undefined; - return { - canEditCSS: !! globalStyles?._links?.[ 'wp:action-edit-css' ], - }; - }, [] ); + return { + canEditCSS: !! globalStyles?._links?.[ 'wp:action-edit-css' ], + }; + }, [] ); - const commands = useMemo( () => { - if ( ! canEditCSS ) { - return []; - } + const commands = useMemo( () => { + if ( ! canEditCSS ) { + return []; + } - return [ - { - name: 'core/edit-site/open-styles-css', - label: __( 'Customize CSS' ), - icon: brush, - callback: ( { close } ) => { - close(); - if ( ! params.postId ) { - history.push( { - path: '/wp_global_styles', - canvas: 'edit', - } ); - } - if ( params.postId && canvas !== 'edit' ) { - history.push( - { - ...params, + return [ + { + name: 'core/edit-site/open-styles-css', + label: __( 'Customize CSS' ), + icon: brush, + callback: ( { close } ) => { + close(); + if ( ! params.postId ) { + history.push( { + path: '/wp_global_styles', canvas: 'edit', - }, - undefined, - { - transition: 'canvas-mode-edit-transition', - } - ); - } - openGeneralSidebar( 'edit-site/global-styles' ); - setEditorCanvasContainerView( 'global-styles-css' ); + } ); + } + if ( params.postId && canvas !== 'edit' ) { + history.push( + { + ...params, + canvas: 'edit', + }, + undefined, + { + transition: 'canvas-mode-edit-transition', + } + ); + } + openGeneralSidebar( 'edit-site/global-styles' ); + setEditorCanvasContainerView( 'global-styles-css' ); + }, }, - }, - ]; - }, [ - history, - openGeneralSidebar, - setEditorCanvasContainerView, - canEditCSS, - canvas, - params, - ] ); - return { - isLoading: false, - commands, + ]; + }, [ + history, + openGeneralSidebar, + setEditorCanvasContainerView, + canEditCSS, + canvas, + params, + ] ); + return { + isLoading: false, + commands, + }; }; -} -function useGlobalStylesOpenRevisionsCommands() { - const { openGeneralSidebar, setEditorCanvasContainerView } = unlock( - useDispatch( editSiteStore ) - ); - const { params } = useLocation(); - const { canvas = 'view' } = params; - const history = useHistory(); - const hasRevisions = useSelect( ( select ) => { - const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } = - select( coreStore ); - const globalStylesId = __experimentalGetCurrentGlobalStylesId(); - const globalStyles = globalStylesId - ? getEntityRecord( 'root', 'globalStyles', globalStylesId ) - : undefined; - return !! globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count; - }, [] ); +const getGlobalStylesOpenRevisionsCommands = () => + function useGlobalStylesOpenRevisionsCommands() { + const { openGeneralSidebar, setEditorCanvasContainerView } = unlock( + useDispatch( editSiteStore ) + ); + const { params } = useLocation(); + const { canvas = 'view' } = params; + const history = useHistory(); + const hasRevisions = useSelect( ( select ) => { + const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } = + select( coreStore ); + const globalStylesId = __experimentalGetCurrentGlobalStylesId(); + const globalStyles = globalStylesId + ? getEntityRecord( 'root', 'globalStyles', globalStylesId ) + : undefined; + return !! globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count; + }, [] ); - const commands = useMemo( () => { - if ( ! hasRevisions ) { - return []; - } + const commands = useMemo( () => { + if ( ! hasRevisions ) { + return []; + } - return [ - { - name: 'core/edit-site/open-global-styles-revisions', - label: __( 'Style revisions' ), - icon: backup, - callback: ( { close } ) => { - close(); - if ( ! params.postId ) { - history.push( { - path: '/wp_global_styles', - canvas: 'edit', - } ); - } - if ( params.postId && canvas !== 'edit' ) { - history.push( - { - ...params, + return [ + { + name: 'core/edit-site/open-global-styles-revisions', + label: __( 'Style revisions' ), + icon: backup, + callback: ( { close } ) => { + close(); + if ( ! params.postId ) { + history.push( { + path: '/wp_global_styles', canvas: 'edit', - }, - undefined, - { - transition: 'canvas-mode-edit-transition', - } + } ); + } + if ( params.postId && canvas !== 'edit' ) { + history.push( + { + ...params, + canvas: 'edit', + }, + undefined, + { + transition: 'canvas-mode-edit-transition', + } + ); + } + openGeneralSidebar( 'edit-site/global-styles' ); + setEditorCanvasContainerView( + 'global-styles-revisions' ); - } - openGeneralSidebar( 'edit-site/global-styles' ); - setEditorCanvasContainerView( 'global-styles-revisions' ); + }, }, - }, - ]; - }, [ - hasRevisions, - history, - openGeneralSidebar, - setEditorCanvasContainerView, - canvas, - params, - ] ); + ]; + }, [ + hasRevisions, + history, + openGeneralSidebar, + setEditorCanvasContainerView, + canvas, + params, + ] ); - return { - isLoading: false, - commands, + return { + isLoading: false, + commands, + }; }; -} export function useCommonCommands() { const homeUrl = useSelect( ( select ) => { @@ -324,26 +331,26 @@ export function useCommonCommands() { useCommandLoader( { name: 'core/edit-site/open-styles', - hook: useGlobalStylesOpenStylesCommands, + hook: getGlobalStylesOpenStylesCommands(), } ); useCommandLoader( { name: 'core/edit-site/toggle-styles-welcome-guide', - hook: useGlobalStylesToggleWelcomeGuideCommands, + hook: getGlobalStylesToggleWelcomeGuideCommands(), } ); useCommandLoader( { name: 'core/edit-site/reset-global-styles', - hook: useGlobalStylesResetCommands, + hook: getGlobalStylesResetCommands(), } ); useCommandLoader( { name: 'core/edit-site/open-styles-css', - hook: useGlobalStylesOpenCssCommands, + hook: getGlobalStylesOpenCssCommands(), } ); useCommandLoader( { name: 'core/edit-site/open-styles-revisions', - hook: useGlobalStylesOpenRevisionsCommands, + hook: getGlobalStylesOpenRevisionsCommands(), } ); } diff --git a/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js b/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js index 97283044193892..da36f32e6c0d51 100644 --- a/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js +++ b/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js @@ -22,147 +22,152 @@ import { useLink } from '../../components/routes/link'; const { useHistory, useLocation } = unlock( routerPrivateApis ); -function usePageContentFocusCommands() { - const { record: template } = useEditedEntityRecord(); - const { params } = useLocation(); - const { canvas = 'view' } = params; - const { isPage, templateId, currentPostType } = useSelect( ( select ) => { - const { isPage: _isPage } = unlock( select( editSiteStore ) ); - const { getCurrentPostType, getCurrentTemplateId } = - select( editorStore ); - return { - isPage: _isPage(), - templateId: getCurrentTemplateId(), - currentPostType: getCurrentPostType(), - }; - }, [] ); - - const { onClick: editTemplate } = useLink( { - postType: 'wp_template', - postId: templateId, - } ); - - const { setRenderingMode } = useDispatch( editorStore ); - - if ( ! isPage || canvas !== 'edit' ) { - return { isLoading: false, commands: [] }; - } - - const commands = []; - - if ( currentPostType !== 'wp_template' ) { - commands.push( { - name: 'core/switch-to-template-focus', - label: sprintf( - /* translators: %s: template title */ - __( 'Edit template: %s' ), - decodeEntities( template.title ) - ), - icon: layout, - callback: ( { close } ) => { - editTemplate(); - close(); - }, - } ); - } else { - commands.push( { - name: 'core/switch-to-page-focus', - label: __( 'Back to page' ), - icon: page, - callback: ( { close } ) => { - setRenderingMode( 'template-locked' ); - close(); +const getPageContentFocusCommands = () => + function usePageContentFocusCommands() { + const { record: template } = useEditedEntityRecord(); + const { params } = useLocation(); + const { canvas = 'view' } = params; + const { isPage, templateId, currentPostType } = useSelect( + ( select ) => { + const { isPage: _isPage } = unlock( select( editSiteStore ) ); + const { getCurrentPostType, getCurrentTemplateId } = + select( editorStore ); + return { + isPage: _isPage(), + templateId: getCurrentTemplateId(), + currentPostType: getCurrentPostType(), + }; }, + [] + ); + + const { onClick: editTemplate } = useLink( { + postType: 'wp_template', + postId: templateId, } ); - } - return { isLoading: false, commands }; -} + const { setRenderingMode } = useDispatch( editorStore ); + + if ( ! isPage || canvas !== 'edit' ) { + return { isLoading: false, commands: [] }; + } + + const commands = []; + + if ( currentPostType !== 'wp_template' ) { + commands.push( { + name: 'core/switch-to-template-focus', + label: sprintf( + /* translators: %s: template title */ + __( 'Edit template: %s' ), + decodeEntities( template.title ) + ), + icon: layout, + callback: ( { close } ) => { + editTemplate(); + close(); + }, + } ); + } else { + commands.push( { + name: 'core/switch-to-page-focus', + label: __( 'Back to page' ), + icon: page, + callback: ( { close } ) => { + setRenderingMode( 'template-locked' ); + close(); + }, + } ); + } + + return { isLoading: false, commands }; + }; -function useManipulateDocumentCommands() { - const { isLoaded, record: template } = useEditedEntityRecord(); - const { removeTemplate, revertTemplate } = useDispatch( editSiteStore ); - const history = useHistory(); - const isEditingPage = useSelect( - ( select ) => - select( editSiteStore ).isPage() && - select( editorStore ).getCurrentPostType() !== 'wp_template', - [] - ); - - if ( ! isLoaded ) { - return { isLoading: true, commands: [] }; - } - - const commands = []; - - if ( isTemplateRevertable( template ) && ! isEditingPage ) { - const label = - template.type === TEMPLATE_POST_TYPE - ? sprintf( - /* translators: %s: template title */ - __( 'Reset template: %s' ), - decodeEntities( template.title ) - ) - : sprintf( - /* translators: %s: template part title */ - __( 'Reset template part: %s' ), - decodeEntities( template.title ) - ); - commands.push( { - name: 'core/reset-template', - label, - icon: isRTL() ? rotateRight : rotateLeft, - callback: ( { close } ) => { - revertTemplate( template ); - close(); - }, - } ); - } - - if ( isTemplateRemovable( template ) && ! isEditingPage ) { - const label = - template.type === TEMPLATE_POST_TYPE - ? sprintf( - /* translators: %s: template title */ - __( 'Delete template: %s' ), - decodeEntities( template.title ) - ) - : sprintf( - /* translators: %s: template part title */ - __( 'Delete template part: %s' ), - decodeEntities( template.title ) - ); - commands.push( { - name: 'core/remove-template', - label, - icon: trash, - callback: ( { close } ) => { - removeTemplate( template ); - // Navigate to the template list - history.push( { - postType: template.type, - } ); - close(); - }, - } ); - } +const getManipulateDocumentCommands = () => + function useManipulateDocumentCommands() { + const { isLoaded, record: template } = useEditedEntityRecord(); + const { removeTemplate, revertTemplate } = useDispatch( editSiteStore ); + const history = useHistory(); + const isEditingPage = useSelect( + ( select ) => + select( editSiteStore ).isPage() && + select( editorStore ).getCurrentPostType() !== 'wp_template', + [] + ); + + if ( ! isLoaded ) { + return { isLoading: true, commands: [] }; + } + + const commands = []; + + if ( isTemplateRevertable( template ) && ! isEditingPage ) { + const label = + template.type === TEMPLATE_POST_TYPE + ? sprintf( + /* translators: %s: template title */ + __( 'Reset template: %s' ), + decodeEntities( template.title ) + ) + : sprintf( + /* translators: %s: template part title */ + __( 'Reset template part: %s' ), + decodeEntities( template.title ) + ); + commands.push( { + name: 'core/reset-template', + label, + icon: isRTL() ? rotateRight : rotateLeft, + callback: ( { close } ) => { + revertTemplate( template ); + close(); + }, + } ); + } + + if ( isTemplateRemovable( template ) && ! isEditingPage ) { + const label = + template.type === TEMPLATE_POST_TYPE + ? sprintf( + /* translators: %s: template title */ + __( 'Delete template: %s' ), + decodeEntities( template.title ) + ) + : sprintf( + /* translators: %s: template part title */ + __( 'Delete template part: %s' ), + decodeEntities( template.title ) + ); + commands.push( { + name: 'core/remove-template', + label, + icon: trash, + callback: ( { close } ) => { + removeTemplate( template ); + // Navigate to the template list + history.push( { + postType: template.type, + } ); + close(); + }, + } ); + } - return { - isLoading: ! isLoaded, - commands, + return { + isLoading: ! isLoaded, + commands, + }; }; -} export function useEditModeCommands() { useCommandLoader( { name: 'core/edit-site/page-content-focus', - hook: usePageContentFocusCommands, + hook: getPageContentFocusCommands(), context: 'entity-edit', } ); useCommandLoader( { name: 'core/edit-site/manipulate-document', - hook: useManipulateDocumentCommands, + hook: getManipulateDocumentCommands(), } ); } diff --git a/packages/edit-widgets/src/components/header/style.scss b/packages/edit-widgets/src/components/header/style.scss index 7bd3c41a6a22ad..642a641e6e5952 100644 --- a/packages/edit-widgets/src/components/header/style.scss +++ b/packages/edit-widgets/src/components/header/style.scss @@ -94,12 +94,13 @@ .edit-widgets-header__actions { display: flex; align-items: center; - padding-right: $grid-unit-20; - gap: $grid-unit-05; + padding-right: $grid-unit-05; @include break-small() { - gap: $grid-unit-10; + padding-right: $grid-unit-10; } + + gap: $grid-unit-10; } .edit-widgets-header-toolbar { diff --git a/packages/edit-widgets/src/components/secondary-sidebar/list-view-sidebar.js b/packages/edit-widgets/src/components/secondary-sidebar/list-view-sidebar.js index 1bb850393ad023..fc645fd3bbd0d4 100644 --- a/packages/edit-widgets/src/components/secondary-sidebar/list-view-sidebar.js +++ b/packages/edit-widgets/src/components/secondary-sidebar/list-view-sidebar.js @@ -51,10 +51,10 @@ export default function ListViewSidebar() {
{ __( 'List View' ) }
{ - const { get } = select( preferencesStore ); - const { isListViewOpened, getCurrentPostType, getEditorSettings } = - select( editorStore ); - const { getSettings } = select( blockEditorStore ); - const { getPostType } = select( coreStore ); +const getEditorCommandLoader = () => + function useEditorCommandLoader() { + const { + editorMode, + isListViewOpen, + showBlockBreadcrumbs, + isDistractionFree, + isFocusMode, + isPreviewMode, + isViewable, + isCodeEditingEnabled, + isRichEditingEnabled, + isPublishSidebarEnabled, + } = useSelect( ( select ) => { + const { get } = select( preferencesStore ); + const { isListViewOpened, getCurrentPostType, getEditorSettings } = + select( editorStore ); + const { getSettings } = select( blockEditorStore ); + const { getPostType } = select( coreStore ); - return { - editorMode: get( 'core', 'editorMode' ) ?? 'visual', - isListViewOpen: isListViewOpened(), - showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ), - isDistractionFree: get( 'core', 'distractionFree' ), - isFocusMode: get( 'core', 'focusMode' ), - isPreviewMode: getSettings().isPreviewMode, - isViewable: getPostType( getCurrentPostType() )?.viewable ?? false, - isCodeEditingEnabled: getEditorSettings().codeEditingEnabled, - isRichEditingEnabled: getEditorSettings().richEditingEnabled, - isPublishSidebarEnabled: - select( editorStore ).isPublishSidebarEnabled(), - }; - }, [] ); - const { getActiveComplementaryArea } = useSelect( interfaceStore ); - const { toggle } = useDispatch( preferencesStore ); - const { createInfoNotice } = useDispatch( noticesStore ); - const { - __unstableSaveForPreview, - setIsListViewOpened, - switchEditorMode, - toggleDistractionFree, - toggleSpotlightMode, - toggleTopToolbar, - } = useDispatch( editorStore ); - const { openModal, enableComplementaryArea, disableComplementaryArea } = - useDispatch( interfaceStore ); - const { getCurrentPostId } = useSelect( editorStore ); - const allowSwitchEditorMode = isCodeEditingEnabled && isRichEditingEnabled; + return { + editorMode: get( 'core', 'editorMode' ) ?? 'visual', + isListViewOpen: isListViewOpened(), + showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ), + isDistractionFree: get( 'core', 'distractionFree' ), + isFocusMode: get( 'core', 'focusMode' ), + isPreviewMode: getSettings().isPreviewMode, + isViewable: + getPostType( getCurrentPostType() )?.viewable ?? false, + isCodeEditingEnabled: getEditorSettings().codeEditingEnabled, + isRichEditingEnabled: getEditorSettings().richEditingEnabled, + isPublishSidebarEnabled: + select( editorStore ).isPublishSidebarEnabled(), + }; + }, [] ); + const { getActiveComplementaryArea } = useSelect( interfaceStore ); + const { toggle } = useDispatch( preferencesStore ); + const { createInfoNotice } = useDispatch( noticesStore ); + const { + __unstableSaveForPreview, + setIsListViewOpened, + switchEditorMode, + toggleDistractionFree, + toggleSpotlightMode, + toggleTopToolbar, + } = useDispatch( editorStore ); + const { openModal, enableComplementaryArea, disableComplementaryArea } = + useDispatch( interfaceStore ); + const { getCurrentPostId } = useSelect( editorStore ); + const allowSwitchEditorMode = + isCodeEditingEnabled && isRichEditingEnabled; - if ( isPreviewMode ) { - return { commands: [], isLoading: false }; - } + if ( isPreviewMode ) { + return { commands: [], isLoading: false }; + } - const commands = []; + const commands = []; - commands.push( { - name: 'core/open-shortcut-help', - label: __( 'Keyboard shortcuts' ), - icon: keyboard, - callback: ( { close } ) => { - close(); - openModal( 'editor/keyboard-shortcut-help' ); - }, - } ); - - commands.push( { - name: 'core/toggle-distraction-free', - label: isDistractionFree - ? __( 'Exit Distraction free' ) - : __( 'Enter Distraction free' ), - callback: ( { close } ) => { - toggleDistractionFree(); - close(); - }, - } ); - - commands.push( { - name: 'core/open-preferences', - label: __( 'Editor preferences' ), - callback: ( { close } ) => { - close(); - openModal( 'editor/preferences' ); - }, - } ); - - commands.push( { - name: 'core/toggle-spotlight-mode', - label: isFocusMode - ? __( 'Exit Spotlight mode' ) - : __( 'Enter Spotlight mode' ), - callback: ( { close } ) => { - toggleSpotlightMode(); - close(); - }, - } ); - - commands.push( { - name: 'core/toggle-list-view', - label: isListViewOpen - ? __( 'Close List View' ) - : __( 'Open List View' ), - icon: listView, - callback: ( { close } ) => { - setIsListViewOpened( ! isListViewOpen ); - close(); - createInfoNotice( - isListViewOpen ? __( 'List View off.' ) : __( 'List View on.' ), - { - id: 'core/editor/toggle-list-view/notice', - type: 'snackbar', - } - ); - }, - } ); + commands.push( { + name: 'core/open-shortcut-help', + label: __( 'Keyboard shortcuts' ), + icon: keyboard, + callback: ( { close } ) => { + close(); + openModal( 'editor/keyboard-shortcut-help' ); + }, + } ); - commands.push( { - name: 'core/toggle-top-toolbar', - label: __( 'Top toolbar' ), - callback: ( { close } ) => { - toggleTopToolbar(); - close(); - }, - } ); + commands.push( { + name: 'core/toggle-distraction-free', + label: isDistractionFree + ? __( 'Exit Distraction free' ) + : __( 'Enter Distraction free' ), + callback: ( { close } ) => { + toggleDistractionFree(); + close(); + }, + } ); - if ( allowSwitchEditorMode ) { commands.push( { - name: 'core/toggle-code-editor', - label: - editorMode === 'visual' - ? __( 'Open code editor' ) - : __( 'Exit code editor' ), - icon: code, + name: 'core/open-preferences', + label: __( 'Editor preferences' ), callback: ( { close } ) => { - switchEditorMode( editorMode === 'visual' ? 'text' : 'visual' ); close(); + openModal( 'editor/preferences' ); }, } ); - } - commands.push( { - name: 'core/toggle-breadcrumbs', - label: showBlockBreadcrumbs - ? __( 'Hide block breadcrumbs' ) - : __( 'Show block breadcrumbs' ), - callback: ( { close } ) => { - toggle( 'core', 'showBlockBreadcrumbs' ); - close(); - createInfoNotice( - showBlockBreadcrumbs - ? __( 'Breadcrumbs hidden.' ) - : __( 'Breadcrumbs visible.' ), - { - id: 'core/editor/toggle-breadcrumbs/notice', - type: 'snackbar', - } - ); - }, - } ); + commands.push( { + name: 'core/toggle-spotlight-mode', + label: isFocusMode + ? __( 'Exit Spotlight mode' ) + : __( 'Enter Spotlight mode' ), + callback: ( { close } ) => { + toggleSpotlightMode(); + close(); + }, + } ); - commands.push( { - name: 'core/open-settings-sidebar', - label: __( 'Show or hide the Settings panel.' ), - icon: isRTL() ? drawerLeft : drawerRight, - callback: ( { close } ) => { - const activeSidebar = getActiveComplementaryArea( 'core' ); - close(); - if ( activeSidebar === 'edit-post/document' ) { - disableComplementaryArea( 'core' ); - } else { - enableComplementaryArea( 'core', 'edit-post/document' ); - } - }, - } ); + commands.push( { + name: 'core/toggle-list-view', + label: isListViewOpen + ? __( 'Close List View' ) + : __( 'Open List View' ), + icon: listView, + callback: ( { close } ) => { + setIsListViewOpened( ! isListViewOpen ); + close(); + createInfoNotice( + isListViewOpen + ? __( 'List View off.' ) + : __( 'List View on.' ), + { + id: 'core/editor/toggle-list-view/notice', + type: 'snackbar', + } + ); + }, + } ); - commands.push( { - name: 'core/open-block-inspector', - label: __( 'Show or hide the Block settings panel' ), - icon: blockDefault, - callback: ( { close } ) => { - const activeSidebar = getActiveComplementaryArea( 'core' ); - close(); - if ( activeSidebar === 'edit-post/block' ) { - disableComplementaryArea( 'core' ); - } else { - enableComplementaryArea( 'core', 'edit-post/block' ); - } - }, - } ); + commands.push( { + name: 'core/toggle-top-toolbar', + label: __( 'Top toolbar' ), + callback: ( { close } ) => { + toggleTopToolbar(); + close(); + }, + } ); - commands.push( { - name: 'core/toggle-publish-sidebar', - label: isPublishSidebarEnabled - ? __( 'Disable pre-publish checks' ) - : __( 'Enable pre-publish checks' ), - icon: formatListBullets, - callback: ( { close } ) => { - close(); - toggle( 'core', 'isPublishSidebarEnabled' ); - createInfoNotice( - isPublishSidebarEnabled - ? __( 'Pre-publish checks disabled.' ) - : __( 'Pre-publish checks enabled.' ), - { - id: 'core/editor/publish-sidebar/notice', - type: 'snackbar', - } - ); - }, - } ); + if ( allowSwitchEditorMode ) { + commands.push( { + name: 'core/toggle-code-editor', + label: + editorMode === 'visual' + ? __( 'Open code editor' ) + : __( 'Exit code editor' ), + icon: code, + callback: ( { close } ) => { + switchEditorMode( + editorMode === 'visual' ? 'text' : 'visual' + ); + close(); + }, + } ); + } - if ( isViewable ) { commands.push( { - name: 'core/preview-link', - label: __( 'Preview in a new tab' ), - icon: external, - callback: async ( { close } ) => { + name: 'core/toggle-breadcrumbs', + label: showBlockBreadcrumbs + ? __( 'Hide block breadcrumbs' ) + : __( 'Show block breadcrumbs' ), + callback: ( { close } ) => { + toggle( 'core', 'showBlockBreadcrumbs' ); close(); - const postId = getCurrentPostId(); - const link = await __unstableSaveForPreview(); - window.open( link, `wp-preview-${ postId }` ); + createInfoNotice( + showBlockBreadcrumbs + ? __( 'Breadcrumbs hidden.' ) + : __( 'Breadcrumbs visible.' ), + { + id: 'core/editor/toggle-breadcrumbs/notice', + type: 'snackbar', + } + ); }, } ); - } - - return { - commands, - isLoading: false, - }; -} -function useEditedEntityContextualCommands() { - const { postType } = useSelect( ( select ) => { - const { getCurrentPostType } = select( editorStore ); - return { - postType: getCurrentPostType(), - }; - }, [] ); - const { openModal } = useDispatch( interfaceStore ); - const commands = []; + commands.push( { + name: 'core/open-settings-sidebar', + label: __( 'Show or hide the Settings panel.' ), + icon: isRTL() ? drawerLeft : drawerRight, + callback: ( { close } ) => { + const activeSidebar = getActiveComplementaryArea( 'core' ); + close(); + if ( activeSidebar === 'edit-post/document' ) { + disableComplementaryArea( 'core' ); + } else { + enableComplementaryArea( 'core', 'edit-post/document' ); + } + }, + } ); - if ( postType === PATTERN_POST_TYPE ) { commands.push( { - name: 'core/rename-pattern', - label: __( 'Rename pattern' ), - icon: edit, + name: 'core/open-block-inspector', + label: __( 'Show or hide the Block settings panel' ), + icon: blockDefault, callback: ( { close } ) => { - openModal( patternRenameModalName ); + const activeSidebar = getActiveComplementaryArea( 'core' ); close(); + if ( activeSidebar === 'edit-post/block' ) { + disableComplementaryArea( 'core' ); + } else { + enableComplementaryArea( 'core', 'edit-post/block' ); + } }, } ); + commands.push( { - name: 'core/duplicate-pattern', - label: __( 'Duplicate pattern' ), - icon: symbol, + name: 'core/toggle-publish-sidebar', + label: isPublishSidebarEnabled + ? __( 'Disable pre-publish checks' ) + : __( 'Enable pre-publish checks' ), + icon: formatListBullets, callback: ( { close } ) => { - openModal( patternDuplicateModalName ); close(); + toggle( 'core', 'isPublishSidebarEnabled' ); + createInfoNotice( + isPublishSidebarEnabled + ? __( 'Pre-publish checks disabled.' ) + : __( 'Pre-publish checks enabled.' ), + { + id: 'core/editor/publish-sidebar/notice', + type: 'snackbar', + } + ); }, } ); - } - return { isLoading: false, commands }; -} + if ( isViewable ) { + commands.push( { + name: 'core/preview-link', + label: __( 'Preview in a new tab' ), + icon: external, + callback: async ( { close } ) => { + close(); + const postId = getCurrentPostId(); + const link = await __unstableSaveForPreview(); + window.open( link, `wp-preview-${ postId }` ); + }, + } ); + } + + return { + commands, + isLoading: false, + }; + }; + +const getEditedEntityContextualCommands = () => + function useEditedEntityContextualCommands() { + const { postType } = useSelect( ( select ) => { + const { getCurrentPostType } = select( editorStore ); + return { + postType: getCurrentPostType(), + }; + }, [] ); + const { openModal } = useDispatch( interfaceStore ); + const commands = []; + + if ( postType === PATTERN_POST_TYPE ) { + commands.push( { + name: 'core/rename-pattern', + label: __( 'Rename pattern' ), + icon: edit, + callback: ( { close } ) => { + openModal( patternRenameModalName ); + close(); + }, + } ); + commands.push( { + name: 'core/duplicate-pattern', + label: __( 'Duplicate pattern' ), + icon: symbol, + callback: ( { close } ) => { + openModal( patternDuplicateModalName ); + close(); + }, + } ); + } + + return { isLoading: false, commands }; + }; export default function useCommands() { useCommandLoader( { name: 'core/editor/edit-ui', - hook: useEditorCommandLoader, + hook: getEditorCommandLoader(), } ); useCommandLoader( { name: 'core/editor/contextual-commands', - hook: useEditedEntityContextualCommands, + hook: getEditedEntityContextualCommands(), context: 'entity-edit', } ); } diff --git a/packages/editor/src/components/header/index.js b/packages/editor/src/components/header/index.js index 07a5e9ddee5911..5a9cc2f94a5951 100644 --- a/packages/editor/src/components/header/index.js +++ b/packages/editor/src/components/header/index.js @@ -156,19 +156,21 @@ function Header( { ) } - { canBeZoomedOut && isEditorIframed && isWideViewport && ( - - ) } + + - + + { canBeZoomedOut && isEditorIframed && isWideViewport && ( + + ) } { ( isWideViewport || ! showIconLabels ) && ( diff --git a/packages/editor/src/components/sidebar/style.scss b/packages/editor/src/components/sidebar/style.scss index 9853088dde1be7..33a2350b8a92e6 100644 --- a/packages/editor/src/components/sidebar/style.scss +++ b/packages/editor/src/components/sidebar/style.scss @@ -1,11 +1,9 @@ .components-panel__header.editor-sidebar__panel-tabs { padding-left: 0; - padding-right: $grid-unit-15; + padding-right: $grid-unit-10; .components-button.has-icon { padding: 0; - min-width: $icon-size; - height: $icon-size; @include break-medium() { display: flex; diff --git a/packages/interactivity/src/init.ts b/packages/interactivity/src/init.ts index ddf6785d4dfdf4..fa1eec51c3e27e 100644 --- a/packages/interactivity/src/init.ts +++ b/packages/interactivity/src/init.ts @@ -33,6 +33,17 @@ export const init = async () => { `[data-${ directivePrefix }-interactive]` ); + /* + * This `await` with setTimeout is required to apparently ensure that the interactive blocks have their stores + * fully initialized prior to hydrating the blocks. If this is not present, then an error occurs, for example: + * > view.js:46 Uncaught (in promise) ReferenceError: Cannot access 'state' before initialization + * This occurs when splitTask() is implemented with scheduler.yield() as opposed to setTimeout(), as with the former + * split tasks are added to the front of the task queue whereas with the latter they are added to the end of the queue. + */ + await new Promise( ( resolve ) => { + setTimeout( resolve, 0 ); + } ); + for ( const node of nodes ) { if ( ! hydratedIslands.has( node ) ) { await splitTask(); diff --git a/packages/interactivity/src/utils.ts b/packages/interactivity/src/utils.ts index 9cd6f8bebb0d1c..ab6b0074727ee7 100644 --- a/packages/interactivity/src/utils.ts +++ b/packages/interactivity/src/utils.ts @@ -54,7 +54,7 @@ const afterNextFrame = ( callback: () => void ) => { /** * Returns a promise that resolves after yielding to main. * - * @return Promise + * @return Promise */ export const splitTask = typeof window.scheduler?.yield === 'function' diff --git a/packages/interface/src/components/complementary-area-header/style.scss b/packages/interface/src/components/complementary-area-header/style.scss index c62fe7dc941760..d2ae1fe6ecda79 100644 --- a/packages/interface/src/components/complementary-area-header/style.scss +++ b/packages/interface/src/components/complementary-area-header/style.scss @@ -1,7 +1,7 @@ .interface-complementary-area-header { background: $white; - padding-right: $grid-unit-15; // Reduced padding to account for close buttons. - gap: $grid-unit-10; // Always ensure space between contents and close buttons. + padding-right: $grid-unit-10; // Reduced padding to account for close buttons. + gap: $grid-unit-05; // Always ensure space between contents and close buttons. .interface-complementary-area-header__title { margin: 0 auto 0 0; diff --git a/packages/interface/src/components/complementary-area/index.js b/packages/interface/src/components/complementary-area/index.js index ff4c3eb1469789..af56cf0c1755e1 100644 --- a/packages/interface/src/components/complementary-area/index.js +++ b/packages/interface/src/components/complementary-area/index.js @@ -308,7 +308,7 @@ function ComplementaryArea( { onClose={ () => disableComplementaryArea( scope ) } toggleButtonProps={ { label: closeLabel, - size: 'small', + size: 'compact', shortcut: toggleShortcut, scope, identifier, diff --git a/storybook/preview.js b/storybook/preview.js index 21f2eab912059a..9e9dd587b39c4c 100644 --- a/storybook/preview.js +++ b/storybook/preview.js @@ -132,9 +132,12 @@ export const parameters = { 'Contributing Guidelines', 'Actions', 'Containers', + 'Feedback', + 'Navigation', 'Utilities', ], 'Components (Experimental)', + [ 'Navigation' ], 'Icons', ], }, diff --git a/test/e2e/specs/site-editor/block-style-variations.spec.js b/test/e2e/specs/site-editor/block-style-variations.spec.js index 3c642ea9d1299e..03fc5398f4a0a5 100644 --- a/test/e2e/specs/site-editor/block-style-variations.spec.js +++ b/test/e2e/specs/site-editor/block-style-variations.spec.js @@ -245,7 +245,7 @@ test.describe( 'Block Style Variations', () => { // Click on previous revision. await page - .getByRole( 'button', { + .getByRole( 'option', { name: /^Changes saved by /, } ) .nth( 1 ) diff --git a/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js b/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js index e0b00fe1e59460..91142d5395640c 100644 --- a/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js +++ b/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js @@ -50,7 +50,7 @@ test.describe( 'Style Revisions', () => { // Now there should be enough revisions to show the revisions UI. await page.getByRole( 'button', { name: 'Revisions' } ).click(); - const revisionButtons = page.getByRole( 'button', { + const revisionButtons = page.getByRole( 'option', { name: /^Changes saved by /, } ); @@ -83,14 +83,14 @@ test.describe( 'Style Revisions', () => { await page.getByRole( 'button', { name: 'Revisions' } ).click(); - const unSavedButton = page.getByRole( 'button', { + const unSavedButton = page.getByRole( 'option', { name: /^Unsaved changes/, } ); await expect( unSavedButton ).toBeVisible(); await page - .getByRole( 'button', { name: /^Changes saved by / } ) + .getByRole( 'option', { name: /^Changes saved by / } ) .last() .click(); @@ -118,14 +118,16 @@ test.describe( 'Style Revisions', () => { await editor.canvas.locator( 'body' ).click(); await userGlobalStylesRevisions.openStylesPanel(); await page.getByRole( 'button', { name: 'Revisions' } ).click(); - const lastRevisionButton = page + const lastRevisionItem = page .getByLabel( 'Global styles revisions list' ) - .getByRole( 'button' ) + .getByRole( 'option' ) .last(); - await expect( lastRevisionButton ).toContainText( 'Default styles' ); - await lastRevisionButton.click(); + await expect( lastRevisionItem ).toContainText( 'Default styles' ); + await lastRevisionItem.click(); await expect( - page.getByRole( 'button', { name: 'Reset to defaults' } ) + page.getByRole( 'button', { + name: 'Apply the selected revision to your site.', + } ) ).toBeVisible(); } );