From 88a3cef341fac21d74a08b0d94e0b0bc45c0fbd6 Mon Sep 17 00:00:00 2001 From: Gutenberg Repository Automation Date: Wed, 4 Dec 2024 12:19:25 +0000 Subject: [PATCH 001/118] Update Changelog for 19.8.0 --- changelog.txt | 235 ++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 229 insertions(+), 6 deletions(-) diff --git a/changelog.txt b/changelog.txt index 89afef4535de7..38b3326755498 100644 --- a/changelog.txt +++ b/changelog.txt @@ -1,29 +1,252 @@ == Changelog == -= 19.8.0-rc.2 = - += 19.8.0 = ## Changelog +### Enhancements + +#### Block Library +- Details block: Use summary content as default label. ([67217](https://github.com/WordPress/gutenberg/pull/67217)) +- Make social icon navigation one arrow keypress. ([64883](https://github.com/WordPress/gutenberg/pull/64883)) +- Page List : Add border and spacing support. ([66385](https://github.com/WordPress/gutenberg/pull/66385)) +- Query Loop block: Remove 'add new post' prompt in the sidebar. ([67189](https://github.com/WordPress/gutenberg/pull/67189)) +- Query block: Update Enhanced Pagination help text. ([67173](https://github.com/WordPress/gutenberg/pull/67173)) +- Social Link: Add contentOnly editing support. ([66622](https://github.com/WordPress/gutenberg/pull/66622)) + +#### Components +- Autocomplete: Increase option height. ([67214](https://github.com/WordPress/gutenberg/pull/67214)) +- CircularOptionPicker: Update Button sizes. ([67285](https://github.com/WordPress/gutenberg/pull/67285)) +- ColorPalette: Disable `Clear` button if there's no color value. ([67108](https://github.com/WordPress/gutenberg/pull/67108)) +- ColorPicker: Update sizes of format select and copy button. ([67093](https://github.com/WordPress/gutenberg/pull/67093)) +- ComboboxControl: Update reset button size. ([67215](https://github.com/WordPress/gutenberg/pull/67215)) + +#### DataViews +- Add density option to `table` layout. ([67170](https://github.com/WordPress/gutenberg/pull/67170)) +- DataForm: Enable fields to declare a different layout. ([66531](https://github.com/WordPress/gutenberg/pull/66531)) +- DataViews list layout: Hide actions menu when there is only one action and is primary. ([67015](https://github.com/WordPress/gutenberg/pull/67015)) +- DataViews table layout: Hide actions menu when there is only one action and is primary. ([67020](https://github.com/WordPress/gutenberg/pull/67020)) +- Reduce the size of action button in Grid layout. ([67032](https://github.com/WordPress/gutenberg/pull/67032)) +- DataViews: Allow register/unregister fields. ([67175](https://github.com/WordPress/gutenberg/pull/67175)) + +#### Global Styles +- Block Supports: Extend stabilization to common experimental block support flags. ([67018](https://github.com/WordPress/gutenberg/pull/67018)) +- Borders: Stabilize border block supports within block processing. ([66918](https://github.com/WordPress/gutenberg/pull/66918)) +- Site Editor > Styles: Open styles inspector when clicking preview canvas. ([66996](https://github.com/WordPress/gutenberg/pull/66996)) + +#### Media +- Block Editor: Add notice action to revert image to original after cropping. ([67314](https://github.com/WordPress/gutenberg/pull/67314)) +- Block Editor: Add success notices for image editing. ([67312](https://github.com/WordPress/gutenberg/pull/67312)) + +#### REST API +- Feature: Set editor rendering mode by post type. ([62304](https://github.com/WordPress/gutenberg/pull/62304)) +- Terms: Respect order specified by register_taxonomy(). ([67154](https://github.com/WordPress/gutenberg/pull/67154)) + +#### Zoom Out +- Leave help text regardless of zoom state. ([67132](https://github.com/WordPress/gutenberg/pull/67132)) +- Preserve footer template bar in zoom out. ([67135](https://github.com/WordPress/gutenberg/pull/67135)) +- Add section styles switch button in block toolbar in zoom out mode. ([67140](https://github.com/WordPress/gutenberg/pull/67140)) + +#### Post Editor +- Move default template types and template part areas to REST API. ([66459](https://github.com/WordPress/gutenberg/pull/66459)) +- Move `usePostFields` to `wordpress/editor` package. ([67024](https://github.com/WordPress/gutenberg/pull/67024)) + +#### Site Editor +- Blocks: Adds check for parent before showing convert to pattern button. ([66158](https://github.com/WordPress/gutenberg/pull/66158)) +- Try dark toolbar for the write mode. ([66116](https://github.com/WordPress/gutenberg/pull/66116)) + +#### Design Tools +- Heading: Hide border controls by default. ([67105](https://github.com/WordPress/gutenberg/pull/67105)) +- Font family preview in the font family picker. ([67118](https://github.com/WordPress/gutenberg/pull/67118)) + ### Bug Fixes +#### Block Library +- Fix block mover clickable area. ([67261](https://github.com/WordPress/gutenberg/pull/67261)) +- Fix dropping media from inserter into Cover block. ([67056](https://github.com/WordPress/gutenberg/pull/67056)) +- Fix: Preserve Display Preview State in File Block. ([67263](https://github.com/WordPress/gutenberg/pull/67263)) +- Paragraph: Update condition for rendering Drop Cap for a selected block. ([67111](https://github.com/WordPress/gutenberg/pull/67111)) +- RSS block: Check for description field before rendering excerpt. ([66985](https://github.com/WordPress/gutenberg/pull/66985)) +- Resolve search block button text overlapping issue. ([66868](https://github.com/WordPress/gutenberg/pull/66868)) +- Social Links: Fix font family and weight inconsistency in editor. ([67204](https://github.com/WordPress/gutenberg/pull/67204)) + +#### Components +- Composite: Restore `Hover` and `Typeahead` functionality. ([67212](https://github.com/WordPress/gutenberg/pull/67212)) +- Menu.ItemHelpText: Better line breaking. ([67011](https://github.com/WordPress/gutenberg/pull/67011)) +- SlotFill: Fix a bug with storing stale fillProps. ([67000](https://github.com/WordPress/gutenberg/pull/67000)) +- Storybook: Fix DataViews layout. ([66999](https://github.com/WordPress/gutenberg/pull/66999)) +- `FormFileUpload`: Prevent HEIC and HEIF files from always being uploaded on Safari. ([67139](https://github.com/WordPress/gutenberg/pull/67139)) + +#### Block Editor +- Add all color palettes to select from editor panel. ([65148](https://github.com/WordPress/gutenberg/pull/65148)) +- Correctly mark Block Comment SlotFills private. ([67271](https://github.com/WordPress/gutenberg/pull/67271)) +- Fix media placeholder to only activate for media objects. ([66986](https://github.com/WordPress/gutenberg/pull/66986)) +- Rich text: Preserve comments. ([62128](https://github.com/WordPress/gutenberg/pull/62128)) +- Fix TS types for the editor package. ([67196](https://github.com/WordPress/gutenberg/pull/67196)) +- PostTitle: Exit early when post type doesn't support titles. ([67086](https://github.com/WordPress/gutenberg/pull/67086)) +- Split view with meta boxes even with legacy canvas. ([66706](https://github.com/WordPress/gutenberg/pull/66706)) +- Edit Site: Styles nav item does not open on mobile for themes without style variations. ([67550](https://github.com/WordPress/gutenberg/pull/67550)) + +#### Global Styles +- Avoid zooming out when browsing styles if the preview mode is active. ([67190](https://github.com/WordPress/gutenberg/pull/67190)) +- Remove styles from blocks' previews. ([67144](https://github.com/WordPress/gutenberg/pull/67144)) +- Style panel: Use correct revisions count. ([67180](https://github.com/WordPress/gutenberg/pull/67180)) +- Theme JSON: Include block style variations in path only output of get_block_nodes. ([66948](https://github.com/WordPress/gutenberg/pull/66948)) +- Fix: Logic for Highlight/text-color format availability. ([65530](https://github.com/WordPress/gutenberg/pull/65530)) +- Fix complex variation selectors when using selectors API. ([67061](https://github.com/WordPress/gutenberg/pull/67061)) #### Site Editor -- 19.8 Edit Site: Styles nav item does not open on mobile for themes without style variations. ([67550](https://github.com/WordPress/gutenberg/pull/67550)) +- Prevent Pre-Publish Panel from Displaying Incorrect Information After Navigating away. ([67010](https://github.com/WordPress/gutenberg/pull/67010)) +- Site Editor Sidebar: Fixed focus/hover style for navigation item buttons. ([67251](https://github.com/WordPress/gutenberg/pull/67251)) +- Site Hub: Fix height in mobile layout. ([67110](https://github.com/WordPress/gutenberg/pull/67110)) +- Site Editor: Styles: Fix inspector opening. ([67004](https://github.com/WordPress/gutenberg/pull/67004)) +- Improve accessibility and consistency of the 'Last modified' Revisions button. ([66606](https://github.com/WordPress/gutenberg/pull/66606)) +- Remove styles from examples. ([67098](https://github.com/WordPress/gutenberg/pull/67098)) +- Editor: Correctly select post title support in 'DocumentOutline'. ([67109](https://github.com/WordPress/gutenberg/pull/67109)) + + +#### DataViews +- Fix action visibility logic. ([67197](https://github.com/WordPress/gutenberg/pull/67197)) +- Fix primary field misalignment in grid layout. ([66995](https://github.com/WordPress/gutenberg/pull/66995)) +- Fix spacing when combining combined fields. ([67226](https://github.com/WordPress/gutenberg/pull/67226)) #### Zoom Out +- Zoom In/Out to correct canvas location. ([66917](https://github.com/WordPress/gutenberg/pull/66917)) +- Zoom in/out to correct location. ([67126](https://github.com/WordPress/gutenberg/pull/67126)) +- Zoom Out: Disable zooming out when Distraction Free mode is activated. ([67028](https://github.com/WordPress/gutenberg/pull/67028)) - Disable Zoom Out if no section root to allow for Theme opt in. ([67232](https://github.com/WordPress/gutenberg/pull/67232)) -#### Meta Boxes -- Split view with meta boxes even with legacy canvas. ([66706](https://github.com/WordPress/gutenberg/pull/66706)) +#### Layout +- Allow flex justification controls to be disabled at the block level. ([67059](https://github.com/WordPress/gutenberg/pull/67059)) +- Show vertical alignment toolbar with allowSwitching enabled. ([67022](https://github.com/WordPress/gutenberg/pull/67022)) +#### Patterns +- Fix: JavaScript error when pattern category is unregistered. ([67063](https://github.com/WordPress/gutenberg/pull/67063)) +- Block Locking: Remove edit locking for Synced Patterns. ([67021](https://github.com/WordPress/gutenberg/pull/67021)) +### Accessibility + +#### Components +- ColorPicker: Add accessible label for copy button. ([67094](https://github.com/WordPress/gutenberg/pull/67094)) +- Modal: Increase size of the Close button. ([66792](https://github.com/WordPress/gutenberg/pull/66792)) +- DataViews: Fix focus loss when removing all filters or resetting. ([67003](https://github.com/WordPress/gutenberg/pull/67003)) + +#### Block Library +- Improve accessibility of the video track editor. ([66832](https://github.com/WordPress/gutenberg/pull/66832)) +- Navigation: Fix 'ariaLabel' block support. ([66943](https://github.com/WordPress/gutenberg/pull/66943)) + +#### Post Editor +- Improve the featured image UI when it cannot retrieve the image file and data. ([66936](https://github.com/WordPress/gutenberg/pull/66936)) + +### Experiments + +- Inline Commenting: Update placement of reply input and add author info header. ([66580](https://github.com/WordPress/gutenberg/pull/66580)) +- Place "Write mode" functionality behind a Gutenberg experiment. ([67008](https://github.com/WordPress/gutenberg/pull/67008)) + +### Documentation + +- Add documentation about required Core changes when updating minimum WordPress version. ([67167](https://github.com/WordPress/gutenberg/pull/67167)) +- BoxControl: Auto-generate readme. ([67284](https://github.com/WordPress/gutenberg/pull/67284)) +- Components contributing guide: Fix relative links. ([67323](https://github.com/WordPress/gutenberg/pull/67323)) +- DataViews: Reorganize documentation for actions. ([67159](https://github.com/WordPress/gutenberg/pull/67159)) +- Docs: Correct `@return` type in `block_core_query_disable_enhanced_pagination()`. ([67128](https://github.com/WordPress/gutenberg/pull/67128)) +- Feat: Storybook: Improve component organisation - Layout Category - Issue #66275. ([66659](https://github.com/WordPress/gutenberg/pull/66659)) +- Feat: Storybook: Improve component organisation - Selection & Input Category - Issue #66275. ([66635](https://github.com/WordPress/gutenberg/pull/66635)) +- GradientPicker: Auto-generate readme. ([67250](https://github.com/WordPress/gutenberg/pull/67250)) +- Icon: Auto-generate readme. ([67282](https://github.com/WordPress/gutenberg/pull/67282)) +- Icon: Improve `icon` prop usage documentation in Storybook. ([67280](https://github.com/WordPress/gutenberg/pull/67280)) +- Storybook: Restore stable components back into categories. ([67216](https://github.com/WordPress/gutenberg/pull/67216)) +- Update BlockMover Stories and README. ([66519](https://github.com/WordPress/gutenberg/pull/66519)) +- Update custom store readme to use thunks instead of controls. ([67006](https://github.com/WordPress/gutenberg/pull/67006)) +- Update versions-in-wordpress.md. ([67298](https://github.com/WordPress/gutenberg/pull/67298)) + +### Code Quality + +- ESLint: Enable `eslint-plugin-react-compiler`. ([61788](https://github.com/WordPress/gutenberg/pull/61788)) +- Extract selectors from useResolveEditedEntity hook. ([67031](https://github.com/WordPress/gutenberg/pull/67031)) +- Pattern: Remove backward compatibility code for WordPress < 6.4. ([67131](https://github.com/WordPress/gutenberg/pull/67131)) +- Post fields: Move `author` from `edit-site` to `fields` package. ([66939](https://github.com/WordPress/gutenberg/pull/66939)) +- Posts DataViews: Refactor the router to use route registration. ([67160](https://github.com/WordPress/gutenberg/pull/67160)) +- Comments controller: Fix issue where comments are allowed when closed. ([66976](https://github.com/WordPress/gutenberg/pull/66976)) +- Fix fatal error in in_array call in post_type_default_rendering_mode. ([67225](https://github.com/WordPress/gutenberg/pull/67225)) +- Data: Add changelog for Redux update. ([66968](https://github.com/WordPress/gutenberg/pull/66968)) + +#### Components +- BorderBoxControl: Suppress redundant warnings for deprecated 36px size. ([67213](https://github.com/WordPress/gutenberg/pull/67213)) +- ComboboxControl : Deprecate 36px default size. ([66900](https://github.com/WordPress/gutenberg/pull/66900)) +- CustomGradientPicker: Prepare `Button`s for 40px default size. ([67286](https://github.com/WordPress/gutenberg/pull/67286)) +- Dashicons: Remove non-existent icons from type. ([67235](https://github.com/WordPress/gutenberg/pull/67235)) +- DimensionControl: Deprecate 36px default size. ([66705](https://github.com/WordPress/gutenberg/pull/66705)) +- Feat: Adds the deprecation warning for 36px default size in range control. ([66721](https://github.com/WordPress/gutenberg/pull/66721)) +- FontSizePicker : Deprecate 36px default size. ([66920](https://github.com/WordPress/gutenberg/pull/66920)) +- Remove createPrivateSlotFill function. ([67238](https://github.com/WordPress/gutenberg/pull/67238)) +- SlotFill: Fix dependencies of registration effects, deduplicate code. ([67071](https://github.com/WordPress/gutenberg/pull/67071)) +- SlotFill: Remove registration API from useSlot result. ([67070](https://github.com/WordPress/gutenberg/pull/67070)) +- SlotFill: Rewrite base Slot to functional, unify rerenderable refs. ([67153](https://github.com/WordPress/gutenberg/pull/67153)) +- TextControl: Deprecate 36px default size. ([66745](https://github.com/WordPress/gutenberg/pull/66745)) +- ToggleGroupControl : Deprecate 36px default size. ([66747](https://github.com/WordPress/gutenberg/pull/66747)) + +#### Post Editor +- ESLint: Bump `eslint-plugin-react-compiler` to latest beta. ([67106](https://github.com/WordPress/gutenberg/pull/67106)) +- Edit Post: Refactor 'MetaBoxVisibility' component. ([67265](https://github.com/WordPress/gutenberg/pull/67265)) +- Edit Post: Remove unused 'hasHistory' flag. ([67293](https://github.com/WordPress/gutenberg/pull/67293)) +- Editor: Update focus return handler for the Featured Image. ([67236](https://github.com/WordPress/gutenberg/pull/67236)) +- Make `BlockManager` component reusable. ([67052](https://github.com/WordPress/gutenberg/pull/67052)) +- Preferences: Use hooks instead of HoC in 'EnableCustomFieldsOption'. ([67023](https://github.com/WordPress/gutenberg/pull/67023)) +- Preferences: Use hooks instead of HoC in 'EnablePanelOption'. ([66994](https://github.com/WordPress/gutenberg/pull/66994)) +- Preferences: Use hooks instead of HoC in 'EnablePublishSidebarOption'. ([67002](https://github.com/WordPress/gutenberg/pull/67002)) + +#### Block Library +- Fix React Compiler error for shortcuts. ([67019](https://github.com/WordPress/gutenberg/pull/67019)) +- Home Link: Remove label attribute synchronization. ([67151](https://github.com/WordPress/gutenberg/pull/67151)) +- Use rems for Nav overlay left padding. ([67168](https://github.com/WordPress/gutenberg/pull/67168)) +- useBlockNameForPatterns: Refactor as a single useSelect call. ([67171](https://github.com/WordPress/gutenberg/pull/67171)) +- Navigation Block: Remove obsolete Block Hooks filters. ([64676](https://github.com/WordPress/gutenberg/pull/64676)) +- [mini] 🧹 remove obsolete rich text css. ([67264](https://github.com/WordPress/gutenberg/pull/67264)) + +#### Global Styles +- Don't call store actions during the render. ([67146](https://github.com/WordPress/gutenberg/pull/67146)) +- Edit Site: Fix settings mutation in `ScreenBlock`. ([67085](https://github.com/WordPress/gutenberg/pull/67085)) +- Remove unused 'Fragment' import. ([67104](https://github.com/WordPress/gutenberg/pull/67104)) + +#### Block Editor +- Block Manager: Make it a private component in the block editor package. ([67255](https://github.com/WordPress/gutenberg/pull/67255)) +- Inserter: Set initial active tab ID during render. ([67103](https://github.com/WordPress/gutenberg/pull/67103)) + +#### Site Editor +- Deprecate edited entity state. ([66965](https://github.com/WordPress/gutenberg/pull/66965)) +- Remove redundant style-edit route. ([67057](https://github.com/WordPress/gutenberg/pull/67057)) + +### Tools + +#### Testing +- Fix ESLint Jest reporting entire body of the test function rather than the identifier. ([67222](https://github.com/WordPress/gutenberg/pull/67222)) +- Fix typo in use-block-sync tests. ([67145](https://github.com/WordPress/gutenberg/pull/67145)) +- Migrate Gradle wrapper validation action. ([66602](https://github.com/WordPress/gutenberg/pull/66602)) + +#### Plugin +- Bump minimum required WordPress version to 6.6. ([67117](https://github.com/WordPress/gutenberg/pull/67117)) +- Add #7895 Core Backport PR to the changelog. ([67319](https://github.com/WordPress/gutenberg/pull/67319)) +- WP Scripts: Revert changes that inline CSS imports early in the build process. ([66975](https://github.com/WordPress/gutenberg/pull/66975)) + +## First-time contributors + +The following PRs were merged by first-time contributors: + +- @AKSHAT2802: Add all color palettes to select from editor panel. ([65148](https://github.com/WordPress/gutenberg/pull/65148)) +- @benazeer-ben: Page List : Add border and spacing support. ([66385](https://github.com/WordPress/gutenberg/pull/66385)) +- @himanshupathak95: Menu.ItemHelpText: Better line breaking. ([67011](https://github.com/WordPress/gutenberg/pull/67011)) +- @SainathPoojary: Social Links: Fix font family and weight inconsistency in editor. ([67204](https://github.com/WordPress/gutenberg/pull/67204)) +- @sarthaknagoshe2002: Prevent Pre-Publish Panel from Displaying Incorrect Information After Navigating away. ([67010](https://github.com/WordPress/gutenberg/pull/67010)) +- @Sukhendu2002: Fix: Preserve Display Preview State in File Block. ([67263](https://github.com/WordPress/gutenberg/pull/67263)) ## Contributors The following contributors merged PRs in this release: -@getdave @ramonjd @stokesman +@aaronrobertshaw @afercia @ajlende @akasunil @AKSHAT2802 @benazeer-ben @benniledl @carolinan @cbravobernal @desrosj @dhruvang21 @dougwollison @ellatrix @getdave @gigitux @gziolo @hbhalodia @himanshupathak95 @Infinite-Null @jeryj @jsnajdr @juanfra @louwie17 @Mamaduka @manzoorwanijk @matiasbenedetto @mcsf @michalczaplinski @miminari @mirka @ndiego @ntsekouras @oandregal @ockham @PARTHVATALIYA @ramonjd @SainathPoojary @SantosGuillamot @sarthaknagoshe2002 @snehapatil2001 @Soean @stokesman @Sukhendu2002 @t-hamano @talldan @tellthemachines @TylerB24890 @tyxla @up1512001 @vipul0425 @yogeshbhutkar @youknowriad + + = 19.7.0 = From 532b8e2a55564746ba10c7ffd5db94491c950fe2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Wed, 4 Dec 2024 15:02:46 +0100 Subject: [PATCH 002/118] QuickEdit: prevent site-editor from crashing when data is not an object (#67577) Co-authored-by: oandregal Co-authored-by: gigitux --- packages/fields/src/fields/slug/slug-view.tsx | 2 +- packages/fields/src/fields/slug/utils.ts | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/fields/src/fields/slug/slug-view.tsx b/packages/fields/src/fields/slug/slug-view.tsx index c418fafd1a9af..58f6881060c2d 100644 --- a/packages/fields/src/fields/slug/slug-view.tsx +++ b/packages/fields/src/fields/slug/slug-view.tsx @@ -10,7 +10,7 @@ import type { BasePost } from '../../types'; import { getSlug } from './utils'; const SlugView = ( { item }: { item: BasePost } ) => { - const slug = typeof item === 'object' ? getSlug( item ) : ''; + const slug = getSlug( item ); const originalSlugRef = useRef( slug ); useEffect( () => { diff --git a/packages/fields/src/fields/slug/utils.ts b/packages/fields/src/fields/slug/utils.ts index a422afaf898f9..b414146ba1781 100644 --- a/packages/fields/src/fields/slug/utils.ts +++ b/packages/fields/src/fields/slug/utils.ts @@ -9,6 +9,10 @@ import type { BasePost } from '../../types'; import { getItemTitle } from '../../actions/utils'; export const getSlug = ( item: BasePost ): string => { + if ( typeof item !== 'object' ) { + return ''; + } + return ( item.slug || cleanForSlug( getItemTitle( item ) ) || item.id.toString() ); From ce00a5ff22c775b04aa5521687719f689996f45c Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Wed, 4 Dec 2024 18:37:55 +0100 Subject: [PATCH 003/118] DataViews build-wp: don't bundle singleton WordPress packages (#67590) Co-authored-by: jsnajdr Co-authored-by: youknowriad --- packages/dataviews/build.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/dataviews/build.js b/packages/dataviews/build.js index 582826d18c184..e156b1cb875af 100644 --- a/packages/dataviews/build.js +++ b/packages/dataviews/build.js @@ -7,8 +7,15 @@ const esbuild = require( 'esbuild' ); const wpExternals = { name: 'wordpress-externals', setup( build ) { + build.onResolve( + { filter: /^@wordpress\/(data|hooks|i18n)(\/|$)/ }, + ( args ) => { + // Don't bundle WordPress signleton packages + return { path: args.path, external: true }; + } + ); build.onResolve( { filter: /^@wordpress\// }, () => { - // Bundle wordpress packages + // Bundle WordPress packages return { external: false }; } ); build.onResolve( { filter: /^\.[\.\/]/ }, () => { From 944c5b0f37e5c6b5bc47f78575bd1c1b55f6c6eb Mon Sep 17 00:00:00 2001 From: Ramon Date: Thu, 5 Dec 2024 06:11:20 +1100 Subject: [PATCH 004/118] Update misc types and revert WPCompleter export from components (#67599) Co-authored-by: ramonjd Co-authored-by: Mamaduka Co-authored-by: ciampo --- packages/block-editor/src/autocompleters/block.js | 6 ++---- packages/block-editor/src/autocompleters/link.js | 6 ++---- packages/components/CHANGELOG.md | 1 - packages/components/src/index.ts | 1 - packages/editor/README.md | 10 +++++----- packages/editor/src/components/autocompleters/user.js | 4 +--- packages/editor/src/components/post-trash/check.js | 8 ++++---- 7 files changed, 14 insertions(+), 22 deletions(-) diff --git a/packages/block-editor/src/autocompleters/block.js b/packages/block-editor/src/autocompleters/block.js index 5fc107c4d3d69..eedd5e102db2c 100644 --- a/packages/block-editor/src/autocompleters/block.js +++ b/packages/block-editor/src/autocompleters/block.js @@ -23,12 +23,10 @@ import { orderInserterBlockItems } from '../utils/order-inserter-block-items'; const noop = () => {}; const SHOWN_BLOCK_TYPES = 9; -/** @typedef {import('@wordpress/components').WPCompleter} WPCompleter */ - /** * Creates a blocks repeater for replacing the current block with a selected block type. * - * @return {WPCompleter} A blocks completer. + * @return {Object} A blocks completer. */ function createBlockCompleter() { return { @@ -157,6 +155,6 @@ function createBlockCompleter() { /** * Creates a blocks repeater for replacing the current block with a selected block type. * - * @return {WPCompleter} A blocks completer. + * @return {Object} A blocks completer. */ export default createBlockCompleter(); diff --git a/packages/block-editor/src/autocompleters/link.js b/packages/block-editor/src/autocompleters/link.js index fb64cb151294d..9088b65b4abc8 100644 --- a/packages/block-editor/src/autocompleters/link.js +++ b/packages/block-editor/src/autocompleters/link.js @@ -10,12 +10,10 @@ import { decodeEntities } from '@wordpress/html-entities'; const SHOWN_SUGGESTIONS = 10; -/** @typedef {import('@wordpress/components').WPCompleter} WPCompleter */ - /** * Creates a suggestion list for links to posts or pages. * - * @return {WPCompleter} A links completer. + * @return {Object} A links completer. */ function createLinkCompleter() { return { @@ -60,6 +58,6 @@ function createLinkCompleter() { /** * Creates a suggestion list for links to posts or pages.. * - * @return {WPCompleter} A link completer. + * @return {Object} A link completer. */ export default createLinkCompleter(); diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 2be7450f43d0f..1045b23bfe14f 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -34,7 +34,6 @@ - Upgraded `@ariakit/react` (v0.4.13) and `@ariakit/test` (v0.4.5) ([#65907](https://github.com/WordPress/gutenberg/pull/65907)). - Upgraded `@ariakit/react` (v0.4.15) and `@ariakit/test` (v0.4.7) ([#67404](https://github.com/WordPress/gutenberg/pull/67404)). - `ToolbarButton`: Set size to "compact" ([#67440](https://github.com/WordPress/gutenberg/pull/67440)). -- Exported the `WPCompleter` type as it was being used in block-editor/autocompleters ([#67410](https://github.com/WordPress/gutenberg/pull/67410)). - `SlotFill`: remove manual rerenders from the portal `Fill` component ([#67471](https://github.com/WordPress/gutenberg/pull/67471)). ### Bug Fixes diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index 0558584fe5418..e82d6da70279e 100644 --- a/packages/components/src/index.ts +++ b/packages/components/src/index.ts @@ -108,7 +108,6 @@ export { Heading as __experimentalHeading } from './heading'; export { HStack as __experimentalHStack } from './h-stack'; export { default as Icon } from './icon'; export type { IconType } from './icon'; -export type { WPCompleter } from './autocomplete/types.ts'; export { default as IconButton } from './button/deprecated'; export { ItemGroup as __experimentalItemGroup, diff --git a/packages/editor/README.md b/packages/editor/README.md index dd7b53f421a1d..3211e6664256d 100644 --- a/packages/editor/README.md +++ b/packages/editor/README.md @@ -1457,16 +1457,16 @@ _Returns_ ### PostTrashCheck -Wrapper component that renders its children only if the post can trashed. +Wrapper component that renders its children only if the post can be trashed. _Parameters_ -- _props_ `Object`: - The component props. -- _props.children_ `React.ReactNode`: - The child components to render. +- _props_ `Object`: The component props. +- _props.children_ `React.ReactElement`: The child components. _Returns_ -- `React.ReactNode`: The rendered child components or null if the post can not trashed. +- `React.ReactElement | null`: The rendered child components or null if the post can't be trashed. ### PostTypeSupportCheck @@ -1762,7 +1762,7 @@ A user mentions completer. _Type_ -- `WPCompleter` +- `Object` ### VisualEditorGlobalKeyboardShortcuts diff --git a/packages/editor/src/components/autocompleters/user.js b/packages/editor/src/components/autocompleters/user.js index e176d3fb6b05a..aed226ff4a50d 100644 --- a/packages/editor/src/components/autocompleters/user.js +++ b/packages/editor/src/components/autocompleters/user.js @@ -5,8 +5,6 @@ import { useMemo } from '@wordpress/element'; import { useSelect } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; -/** @typedef {import('@wordpress/components').WPCompleter} WPCompleter */ - export function getUserLabel( user ) { const avatar = user.avatar_urls && user.avatar_urls[ 24 ] ? ( @@ -35,7 +33,7 @@ export function getUserLabel( user ) { /** * A user mentions completer. * - * @type {WPCompleter} + * @type {Object} */ export default { name: 'users', diff --git a/packages/editor/src/components/post-trash/check.js b/packages/editor/src/components/post-trash/check.js index d4a9139bfee05..590aa7cd4c390 100644 --- a/packages/editor/src/components/post-trash/check.js +++ b/packages/editor/src/components/post-trash/check.js @@ -11,12 +11,12 @@ import { store as editorStore } from '../../store'; import { GLOBAL_POST_TYPES } from '../../store/constants'; /** - * Wrapper component that renders its children only if the post can trashed. + * Wrapper component that renders its children only if the post can be trashed. * - * @param {Object} props - The component props. - * @param {React.ReactNode} props.children - The child components to render. + * @param {Object} props The component props. + * @param {React.ReactElement} props.children The child components. * - * @return {React.ReactNode} The rendered child components or null if the post can not trashed. + * @return {React.ReactElement | null} The rendered child components or null if the post can't be trashed. */ export default function PostTrashCheck( { children } ) { const { canTrashPost } = useSelect( ( select ) => { From bb56ce8350cb0ddef9df3bcb75b24fa5e81a9ab3 Mon Sep 17 00:00:00 2001 From: Ramon Date: Thu, 5 Dec 2024 06:14:07 +1100 Subject: [PATCH 005/118] Edit site: remove empty preview border and redirect to editor in global styles navigation (#67548) Co-authored-by: ramonjd Co-authored-by: t-hamano Co-authored-by: talldan --- .../src/components/global-styles/style.scss | 4 ++++ .../components/site-editor-routes/styles.js | 21 ++++++++++++++++++- 2 files changed, 24 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss index 5574fe52d81f5..57f51f4b8f007 100644 --- a/packages/edit-site/src/components/global-styles/style.scss +++ b/packages/edit-site/src/components/global-styles/style.scss @@ -226,6 +226,10 @@ // The &#{&} is a workaround for the specificity of the Card component. &#{&}, &#{&} .edit-site-global-styles-screen-root__active-style-tile-preview { + box-shadow: none; border-radius: $radius-small; + .block-editor-iframe__container { + border: 1px solid $gray-200; + } } } diff --git a/packages/edit-site/src/components/site-editor-routes/styles.js b/packages/edit-site/src/components/site-editor-routes/styles.js index 17e4a3c064d02..cf29dbebea373 100644 --- a/packages/edit-site/src/components/site-editor-routes/styles.js +++ b/packages/edit-site/src/components/site-editor-routes/styles.js @@ -1,10 +1,29 @@ +/** + * WordPress dependencies + */ +import { privateApis as routerPrivateApis } from '@wordpress/router'; + /** * Internal dependencies */ import Editor from '../editor'; +import { unlock } from '../../lock-unlock'; import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles'; import GlobalStylesUIWrapper from '../sidebar-global-styles-wrapper'; +const { useLocation } = unlock( routerPrivateApis ); + +function MobileGlobalStylesUI() { + const { query = {} } = useLocation(); + const { canvas } = query; + + if ( canvas === 'edit' ) { + return ; + } + + return ; +} + export const stylesRoute = { name: 'styles', path: '/styles', @@ -12,7 +31,7 @@ export const stylesRoute = { content: , sidebar: , preview: , - mobile: , + mobile: , }, widths: { content: 380, From e18605f1909873edd20e977a91194f92ef56d707 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 5 Dec 2024 15:23:30 +1100 Subject: [PATCH 006/118] Update style book headings to new design (#67546) Co-authored-by: tellthemachines Co-authored-by: jasmussen Co-authored-by: matiasbenedetto --- .../src/components/style-book/constants.ts | 27 ++++++------------- 1 file changed, 8 insertions(+), 19 deletions(-) diff --git a/packages/edit-site/src/components/style-book/constants.ts b/packages/edit-site/src/components/style-book/constants.ts index 7b13e3d4ef7f6..0cbbaec07086d 100644 --- a/packages/edit-site/src/components/style-book/constants.ts +++ b/packages/edit-site/src/components/style-book/constants.ts @@ -216,27 +216,25 @@ export const STYLE_BOOK_IFRAME_STYLES = ` } .edit-site-style-book__duotone-example > div:not(:first-child) { height: 20px; - border: 1px solid #ddd; + border: 1px solid color-mix( in srgb, currentColor 10%, transparent ); } .edit-site-style-book__color-example { - height: 52px; - border: 1px solid #ddd; - } - - .edit-site-style-book__examples.is-wide .edit-site-style-book__example { - flex-direction: row; + height: 32px; + border: 1px solid color-mix( in srgb, currentColor 10%, transparent ); } .edit-site-style-book__subcategory-title, .edit-site-style-book__example-title { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 11px; - font-weight: 500; + font-size: 13px; + font-weight: normal; line-height: normal; margin: 0; text-align: left; - text-transform: uppercase; + padding-top: 8px; + border-top: 1px solid color-mix( in srgb, currentColor 10%, transparent ); + color: color-mix( in srgb, currentColor 60%, transparent ); } .edit-site-style-book__subcategory-title { @@ -246,18 +244,9 @@ export const STYLE_BOOK_IFRAME_STYLES = ` padding-bottom: 8px; } - .edit-site-style-book__examples.is-wide .edit-site-style-book__example-title { - text-align: right; - width: 120px; - } - .edit-site-style-book__example-preview { width: 100%; } - - .is-wide .edit-site-style-book__example-preview { - width: calc(100% - 120px); - } .edit-site-style-book__example-preview .block-editor-block-list__insertion-point, .edit-site-style-book__example-preview .block-list-appender { From e8a7463ac0664c860487d30bfb04a435d63c8e4a Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Thu, 5 Dec 2024 08:47:22 +0400 Subject: [PATCH 007/118] Block Editor: Reduce the 'isZoomOut' selector calls in the block toolbar (#67594) Co-authored-by: Mamaduka Co-authored-by: talldan --- .../src/components/block-toolbar/index.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js index 63b2f6ad7f9a0..0e39f4d531c87 100644 --- a/packages/block-editor/src/components/block-toolbar/index.js +++ b/packages/block-editor/src/components/block-toolbar/index.js @@ -124,6 +124,8 @@ export function PrivateBlockToolbar( { ( id ) => getTemplateLock( id ) === 'contentOnly' ); + const _isZoomOut = isZoomOut(); + return { blockClientId: selectedBlockClientId, blockClientIds: selectedBlockClientIds, @@ -132,7 +134,7 @@ export function PrivateBlockToolbar( { shouldShowVisualToolbar: isValid && isVisual, toolbarKey: `${ selectedBlockClientId }${ parentClientId }`, showParentSelector: - ! isZoomOut() && + ! _isZoomOut && parentBlockType && getBlockEditingMode( parentClientId ) !== 'disabled' && hasBlockSupport( @@ -144,11 +146,11 @@ export function PrivateBlockToolbar( { isUsingBindings: _isUsingBindings, hasParentPattern: _hasParentPattern, hasContentOnlyLocking: _hasTemplateLock, - showShuffleButton: isZoomOut(), - showSlots: ! isZoomOut(), - showGroupButtons: ! isZoomOut(), - showLockButtons: ! isZoomOut(), - showSwitchSectionStyleButton: isZoomOut(), + showShuffleButton: _isZoomOut, + showSlots: ! _isZoomOut, + showGroupButtons: ! _isZoomOut, + showLockButtons: ! _isZoomOut, + showSwitchSectionStyleButton: _isZoomOut, hasFixedToolbar: getSettings().hasFixedToolbar, isNavigationMode: _isNavigationMode(), }; From 600218e1397aa813492bc2447045eb62baee7462 Mon Sep 17 00:00:00 2001 From: Jorge Costa Date: Thu, 5 Dec 2024 05:41:51 +0000 Subject: [PATCH 008/118] Fix: Write Mode mode persists as enabled in widget editor. (#67587) Co-authored-by: jorgefilipecosta Co-authored-by: talldan --- .../src/components/sidebar-block-editor/index.js | 1 + .../src/components/widget-areas-block-editor-provider/index.js | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/customize-widgets/src/components/sidebar-block-editor/index.js b/packages/customize-widgets/src/components/sidebar-block-editor/index.js index d3c78a3d6d012..be132e9cedd82 100644 --- a/packages/customize-widgets/src/components/sidebar-block-editor/index.js +++ b/packages/customize-widgets/src/components/sidebar-block-editor/index.js @@ -87,6 +87,7 @@ export default function SidebarBlockEditor( { mediaUpload: mediaUploadBlockEditor, hasFixedToolbar: isFixedToolbarActive || ! isMediumViewport, keepCaretInsideBlock, + editorTool: 'edit', __unstableHasCustomAppender: true, }; }, [ diff --git a/packages/edit-widgets/src/components/widget-areas-block-editor-provider/index.js b/packages/edit-widgets/src/components/widget-areas-block-editor-provider/index.js index af844fe9da4fe..751931d858da8 100644 --- a/packages/edit-widgets/src/components/widget-areas-block-editor-provider/index.js +++ b/packages/edit-widgets/src/components/widget-areas-block-editor-provider/index.js @@ -94,6 +94,7 @@ export default function WidgetAreasBlockEditorProvider( { __experimentalSetIsInserterOpened: setIsInserterOpened, pageOnFront, pageForPosts, + editorTool: 'edit', }; }, [ hasUploadPermissions, From e44e1109b8968ae1e58144d1671f9788a58e75cd Mon Sep 17 00:00:00 2001 From: Marin Atanasov <8436925+tyxla@users.noreply.github.com> Date: Thu, 5 Dec 2024 11:06:53 +0200 Subject: [PATCH 009/118] Storybook: Remove unnecessary feature flags (#67576) Co-authored-by: tyxla Co-authored-by: ciampo --- storybook/main.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/storybook/main.js b/storybook/main.js index e482ee23c2e5f..66aed2f00a2fb 100644 --- a/storybook/main.js +++ b/storybook/main.js @@ -60,11 +60,6 @@ module.exports = { name: '@storybook/react-webpack5', options: {}, }, - features: { - babelModeV7: true, - emotionAlias: false, - storyStoreV7: true, - }, docs: { autodocs: true, }, From e6f7b4f9903d4a2159cf6e70209d460fc3dd8b0e Mon Sep 17 00:00:00 2001 From: Marin Atanasov <8436925+tyxla@users.noreply.github.com> Date: Thu, 5 Dec 2024 11:07:12 +0200 Subject: [PATCH 010/118] Storybook: Use manager-api instead of addons package (#67578) Co-authored-by: tyxla Co-authored-by: ciampo --- storybook/manager.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/storybook/manager.js b/storybook/manager.js index c63f15efe11d0..d519de312737a 100644 --- a/storybook/manager.js +++ b/storybook/manager.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { addons } from '@storybook/addons'; +import { addons } from '@storybook/manager-api'; /** * Internal dependencies From 09b289731b20e665e6102f2a788501ff24010845 Mon Sep 17 00:00:00 2001 From: Luigi Teschio Date: Thu, 5 Dec 2024 10:43:23 +0100 Subject: [PATCH 011/118] improve documentation for fields package (#67580) --- packages/fields/README.md | 56 +++++++------------ packages/fields/src/actions/delete-post.tsx | 3 + .../fields/src/actions/duplicate-pattern.tsx | 3 + .../src/actions/duplicate-post.native.tsx | 3 - .../fields/src/actions/duplicate-post.tsx | 9 ++- .../src/actions/duplicate-template-part.tsx | 4 +- .../src/actions/export-pattern.native.tsx | 3 - .../fields/src/actions/export-pattern.tsx | 3 + packages/fields/src/actions/index.ts | 3 - .../src/actions/permanently-delete-post.tsx | 3 + packages/fields/src/actions/rename-post.tsx | 3 + .../src/actions/reorder-page.native.tsx | 3 - packages/fields/src/actions/reorder-page.tsx | 3 + packages/fields/src/actions/reset-post.tsx | 3 + packages/fields/src/actions/restore-post.tsx | 3 + packages/fields/src/actions/trash-post.tsx | 3 + .../src/actions/view-post-revisions.tsx | 3 + packages/fields/src/actions/view-post.tsx | 3 + .../fields/src/fields/featured-image/index.ts | 3 + packages/fields/src/fields/order/index.ts | 3 + packages/fields/src/fields/parent/index.ts | 2 +- packages/fields/src/fields/password/index.tsx | 2 +- packages/fields/src/fields/slug/index.ts | 3 + packages/fields/src/fields/template/index.ts | 4 +- packages/fields/src/fields/title/index.ts | 3 + packages/fields/src/index.native.ts | 2 - 26 files changed, 79 insertions(+), 57 deletions(-) delete mode 100644 packages/fields/src/actions/duplicate-post.native.tsx delete mode 100644 packages/fields/src/actions/export-pattern.native.tsx delete mode 100644 packages/fields/src/actions/reorder-page.native.tsx diff --git a/packages/fields/README.md b/packages/fields/README.md index 2fc512b943264..144982361be25 100644 --- a/packages/fields/README.md +++ b/packages/fields/README.md @@ -41,55 +41,43 @@ Date field for BasePost. ### deletePost -Undocumented declaration. +Delete action for Templates, Patterns and Template Parts. ### duplicatePattern -Undocumented declaration. +Duplicate action for Pattern. ### duplicatePost -Undocumented declaration. - -### duplicatePostNative - -Undocumented declaration. +Duplicate action for BasePost. ### duplicateTemplatePart -This action is used to duplicate a template part. - -_Type_ - -- `Action< TemplatePart >` +Duplicate action for TemplatePart. ### exportPattern -Undocumented declaration. - -### exportPatternNative - -Undocumented declaration. +Export action as JSON for Pattern. ### featuredImageField -Undocumented declaration. +Featured Image field for BasePost. ### orderField -Undocumented declaration. +Order field for BasePost. ### parentField -This field is used to display the post parent. +Parent field for BasePost. ### passwordField -This field is used to display the post password. +Password field for BasePost. ### permanentlyDeletePost -Undocumented declaration. +Delete action for PostWithPermissions. ### PostType @@ -97,27 +85,23 @@ Undocumented declaration. ### renamePost -Undocumented declaration. +Rename action for PostWithPermissions. ### reorderPage -Undocumented declaration. - -### reorderPageNative - -Undocumented declaration. +Reorder action for BasePost. ### resetPost -Undocumented declaration. +Reset action for Template and TemplatePart. ### restorePost -Undocumented declaration. +Restore action for PostWithPermissions. ### slugField -Undocumented declaration. +Slug field for BasePost. ### statusField @@ -125,23 +109,23 @@ Status field for BasePost. ### templateField -Undocumented declaration. +Template field for BasePost. ### titleField -Undocumented declaration. +Title field for BasePost. ### trashPost -Undocumented declaration. +Trash action for PostWithPermissions. ### viewPost -Undocumented declaration. +View post action for BasePost. ### viewPostRevisions -Undocumented declaration. +View post revisions action for Post. diff --git a/packages/fields/src/actions/delete-post.tsx b/packages/fields/src/actions/delete-post.tsx index d3a469d7f83ab..4a94796b6f0bd 100644 --- a/packages/fields/src/actions/delete-post.tsx +++ b/packages/fields/src/actions/delete-post.tsx @@ -203,4 +203,7 @@ const deletePostAction: Action< Template | TemplatePart | Pattern > = { }, }; +/** + * Delete action for Templates, Patterns and Template Parts. + */ export default deletePostAction; diff --git a/packages/fields/src/actions/duplicate-pattern.tsx b/packages/fields/src/actions/duplicate-pattern.tsx index bf2820f951dba..274f57b0fe19d 100644 --- a/packages/fields/src/actions/duplicate-pattern.tsx +++ b/packages/fields/src/actions/duplicate-pattern.tsx @@ -37,4 +37,7 @@ const duplicatePattern: Action< Pattern > = { }, }; +/** + * Duplicate action for Pattern. + */ export default duplicatePattern; diff --git a/packages/fields/src/actions/duplicate-post.native.tsx b/packages/fields/src/actions/duplicate-post.native.tsx deleted file mode 100644 index 5468aa649abbd..0000000000000 --- a/packages/fields/src/actions/duplicate-post.native.tsx +++ /dev/null @@ -1,3 +0,0 @@ -const duplicatePost = undefined; - -export default duplicatePost; diff --git a/packages/fields/src/actions/duplicate-post.tsx b/packages/fields/src/actions/duplicate-post.tsx index fd7e0ae9de4ad..5f079b5132c60 100644 --- a/packages/fields/src/actions/duplicate-post.tsx +++ b/packages/fields/src/actions/duplicate-post.tsx @@ -37,8 +37,8 @@ const duplicatePost: Action< BasePost > = { const [ item, setItem ] = useState< BasePost >( { ...items[ 0 ], title: sprintf( - /* translators: %s: Existing template title */ - _x( '%s (Copy)', 'template' ), + /* translators: %s: Existing post title */ + _x( '%s (Copy)', 'post' ), getItemTitle( items[ 0 ] ) ), } ); @@ -104,7 +104,7 @@ const duplicatePost: Action< BasePost > = { createSuccessNotice( sprintf( - // translators: %s: Title of the created post or template, e.g: "Hello world". + // translators: %s: Title of the created post, e.g: "Hello world". __( '"%s" successfully created.' ), decodeEntities( newItem.title?.rendered || item.title ) ), @@ -171,4 +171,7 @@ const duplicatePost: Action< BasePost > = { }, }; +/** + * Duplicate action for BasePost. + */ export default duplicatePost; diff --git a/packages/fields/src/actions/duplicate-template-part.tsx b/packages/fields/src/actions/duplicate-template-part.tsx index 44fcbad21f073..795e40638a47a 100644 --- a/packages/fields/src/actions/duplicate-template-part.tsx +++ b/packages/fields/src/actions/duplicate-template-part.tsx @@ -68,5 +68,7 @@ const duplicateTemplatePart: Action< TemplatePart > = { ); }, }; - +/** + * Duplicate action for TemplatePart. + */ export default duplicateTemplatePart; diff --git a/packages/fields/src/actions/export-pattern.native.tsx b/packages/fields/src/actions/export-pattern.native.tsx deleted file mode 100644 index c58cffcbd79e8..0000000000000 --- a/packages/fields/src/actions/export-pattern.native.tsx +++ /dev/null @@ -1,3 +0,0 @@ -const exportPattern = undefined; - -export default exportPattern; diff --git a/packages/fields/src/actions/export-pattern.tsx b/packages/fields/src/actions/export-pattern.tsx index b6be83eeda84b..4a041e6ac73c3 100644 --- a/packages/fields/src/actions/export-pattern.tsx +++ b/packages/fields/src/actions/export-pattern.tsx @@ -73,4 +73,7 @@ const exportPattern: Action< Pattern > = { }, }; +/** + * Export action as JSON for Pattern. + */ export default exportPattern; diff --git a/packages/fields/src/actions/index.ts b/packages/fields/src/actions/index.ts index fc66220677531..cede3f1b59d1b 100644 --- a/packages/fields/src/actions/index.ts +++ b/packages/fields/src/actions/index.ts @@ -1,13 +1,10 @@ export { default as viewPost } from './view-post'; export { default as reorderPage } from './reorder-page'; -export { default as reorderPageNative } from './reorder-page.native'; export { default as duplicatePost } from './duplicate-post'; -export { default as duplicatePostNative } from './duplicate-post.native'; export { default as renamePost } from './rename-post'; export { default as resetPost } from './reset-post'; export { default as duplicatePattern } from './duplicate-pattern'; export { default as exportPattern } from './export-pattern'; -export { default as exportPatternNative } from './export-pattern.native'; export { default as viewPostRevisions } from './view-post-revisions'; export { default as permanentlyDeletePost } from './permanently-delete-post'; export { default as restorePost } from './restore-post'; diff --git a/packages/fields/src/actions/permanently-delete-post.tsx b/packages/fields/src/actions/permanently-delete-post.tsx index afbb84ae12c74..688ba5b9918df 100644 --- a/packages/fields/src/actions/permanently-delete-post.tsx +++ b/packages/fields/src/actions/permanently-delete-post.tsx @@ -115,4 +115,7 @@ const permanentlyDeletePost: Action< PostWithPermissions > = { }, }; +/** + * Delete action for PostWithPermissions. + */ export default permanentlyDeletePost; diff --git a/packages/fields/src/actions/rename-post.tsx b/packages/fields/src/actions/rename-post.tsx index 5203328b46de5..be0e69db26cd8 100644 --- a/packages/fields/src/actions/rename-post.tsx +++ b/packages/fields/src/actions/rename-post.tsx @@ -139,4 +139,7 @@ const renamePost: Action< PostWithPermissions > = { }, }; +/** + * Rename action for PostWithPermissions. + */ export default renamePost; diff --git a/packages/fields/src/actions/reorder-page.native.tsx b/packages/fields/src/actions/reorder-page.native.tsx deleted file mode 100644 index 61e4733b6c6bd..0000000000000 --- a/packages/fields/src/actions/reorder-page.native.tsx +++ /dev/null @@ -1,3 +0,0 @@ -const reorderPage = undefined; - -export default reorderPage; diff --git a/packages/fields/src/actions/reorder-page.tsx b/packages/fields/src/actions/reorder-page.tsx index 1820884d8d8c7..cffc4b924c0a5 100644 --- a/packages/fields/src/actions/reorder-page.tsx +++ b/packages/fields/src/actions/reorder-page.tsx @@ -122,4 +122,7 @@ const reorderPage: Action< BasePost > = { RenderModal: ReorderModal, }; +/** + * Reorder action for BasePost. + */ export default reorderPage; diff --git a/packages/fields/src/actions/reset-post.tsx b/packages/fields/src/actions/reset-post.tsx index 3e6b2e29b68b6..d8ac5730d6a16 100644 --- a/packages/fields/src/actions/reset-post.tsx +++ b/packages/fields/src/actions/reset-post.tsx @@ -292,4 +292,7 @@ const resetPostAction: Action< Template | TemplatePart > = { }, }; +/** + * Reset action for Template and TemplatePart. + */ export default resetPostAction; diff --git a/packages/fields/src/actions/restore-post.tsx b/packages/fields/src/actions/restore-post.tsx index 874eca91fee11..6ea493a619ae8 100644 --- a/packages/fields/src/actions/restore-post.tsx +++ b/packages/fields/src/actions/restore-post.tsx @@ -131,4 +131,7 @@ const restorePost: Action< PostWithPermissions > = { }, }; +/** + * Restore action for PostWithPermissions. + */ export default restorePost; diff --git a/packages/fields/src/actions/trash-post.tsx b/packages/fields/src/actions/trash-post.tsx index befbfb0ee7ffb..c0227996b5e86 100644 --- a/packages/fields/src/actions/trash-post.tsx +++ b/packages/fields/src/actions/trash-post.tsx @@ -195,4 +195,7 @@ const trashPost: Action< PostWithPermissions > = { }, }; +/** + * Trash action for PostWithPermissions. + */ export default trashPost; diff --git a/packages/fields/src/actions/view-post-revisions.tsx b/packages/fields/src/actions/view-post-revisions.tsx index 75d4edfd73e18..40eecde577131 100644 --- a/packages/fields/src/actions/view-post-revisions.tsx +++ b/packages/fields/src/actions/view-post-revisions.tsx @@ -44,4 +44,7 @@ const viewPostRevisions: Action< Post > = { }, }; +/** + * View post revisions action for Post. + */ export default viewPostRevisions; diff --git a/packages/fields/src/actions/view-post.tsx b/packages/fields/src/actions/view-post.tsx index 187faffafb5d3..7517ab1f37cb3 100644 --- a/packages/fields/src/actions/view-post.tsx +++ b/packages/fields/src/actions/view-post.tsx @@ -27,4 +27,7 @@ const viewPost: Action< BasePost > = { }, }; +/** + * View post action for BasePost. + */ export default viewPost; diff --git a/packages/fields/src/fields/featured-image/index.ts b/packages/fields/src/fields/featured-image/index.ts index 62d7e8240aded..d6f22176fc670 100644 --- a/packages/fields/src/fields/featured-image/index.ts +++ b/packages/fields/src/fields/featured-image/index.ts @@ -20,4 +20,7 @@ const featuredImageField: Field< BasePost > = { enableSorting: false, }; +/** + * Featured Image field for BasePost. + */ export default featuredImageField; diff --git a/packages/fields/src/fields/order/index.ts b/packages/fields/src/fields/order/index.ts index 984a94c6427fc..121fcb9d0f3bd 100644 --- a/packages/fields/src/fields/order/index.ts +++ b/packages/fields/src/fields/order/index.ts @@ -16,4 +16,7 @@ const orderField: Field< BasePost > = { description: __( 'Determines the order of pages.' ), }; +/** + * Order field for BasePost. + */ export default orderField; diff --git a/packages/fields/src/fields/parent/index.ts b/packages/fields/src/fields/parent/index.ts index 8b833e1d9369d..f974608710bf7 100644 --- a/packages/fields/src/fields/parent/index.ts +++ b/packages/fields/src/fields/parent/index.ts @@ -21,6 +21,6 @@ const parentField: Field< BasePost > = { }; /** - * This field is used to display the post parent. + * Parent field for BasePost. */ export default parentField; diff --git a/packages/fields/src/fields/password/index.tsx b/packages/fields/src/fields/password/index.tsx index dacd0d7435998..3d45641b0efd0 100644 --- a/packages/fields/src/fields/password/index.tsx +++ b/packages/fields/src/fields/password/index.tsx @@ -19,6 +19,6 @@ const passwordField: Field< BasePost > = { }; /** - * This field is used to display the post password. + * Password field for BasePost. */ export default passwordField; diff --git a/packages/fields/src/fields/slug/index.ts b/packages/fields/src/fields/slug/index.ts index c43fcc679622a..7311b1d10a66f 100644 --- a/packages/fields/src/fields/slug/index.ts +++ b/packages/fields/src/fields/slug/index.ts @@ -19,4 +19,7 @@ const slugField: Field< BasePost > = { render: SlugView, }; +/** + * Slug field for BasePost. + */ export default slugField; diff --git a/packages/fields/src/fields/template/index.ts b/packages/fields/src/fields/template/index.ts index 7315b4ba349b1..c419adedb537d 100644 --- a/packages/fields/src/fields/template/index.ts +++ b/packages/fields/src/fields/template/index.ts @@ -14,9 +14,11 @@ const templateField: Field< BasePost > = { id: 'template', type: 'text', label: __( 'Template' ), - getValue: ( { item } ) => item.template, Edit: TemplateEdit, enableSorting: false, }; +/** + * Template field for BasePost. + */ export default templateField; diff --git a/packages/fields/src/fields/title/index.ts b/packages/fields/src/fields/title/index.ts index d8e6f25276d6b..111980a1ca2b0 100644 --- a/packages/fields/src/fields/title/index.ts +++ b/packages/fields/src/fields/title/index.ts @@ -21,4 +21,7 @@ const titleField: Field< BasePost > = { enableHiding: false, }; +/** + * Title field for BasePost. + */ export default titleField; diff --git a/packages/fields/src/index.native.ts b/packages/fields/src/index.native.ts index 33a26e3c2e6e2..e69de29bb2d1d 100644 --- a/packages/fields/src/index.native.ts +++ b/packages/fields/src/index.native.ts @@ -1,2 +0,0 @@ -export * from './actions/duplicate-post.native'; -export * from './actions/reorder-page.native'; From 0b3a191518f46ff52d46b2a921fbf5ebd0f80b77 Mon Sep 17 00:00:00 2001 From: Jorge Costa Date: Thu, 5 Dec 2024 09:48:04 +0000 Subject: [PATCH 012/118] Fix: Remove unused test code on tools panel. (#67589) Co-authored-by: jorgefilipecosta Co-authored-by: Mamaduka --- .../components/src/tools-panel/test/index.tsx | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/packages/components/src/tools-panel/test/index.tsx b/packages/components/src/tools-panel/test/index.tsx index 8d2c4f17a8b17..68cf72233121e 100644 --- a/packages/components/src/tools-panel/test/index.tsx +++ b/packages/components/src/tools-panel/test/index.tsx @@ -154,7 +154,6 @@ const renderWrappedItemInPanel = () => { const renderPanel = () => { return render( - { false &&
Hidden
}
Example control
 @@ -236,22 +235,6 @@ describe( 'ToolsPanel', () => { it( 'should not render panel menu when there are no panel items', () => { render( - { false && ( - false } - > - Should not show - - ) } - { false && ( - false } - > - Not shown either - - ) } Visible but insignificant ); From 094bd3a434f84a483885518965770484813f5e77 Mon Sep 17 00:00:00 2001 From: Ella <4710635+ellatrix@users.noreply.github.com> Date: Thu, 5 Dec 2024 11:02:49 +0100 Subject: [PATCH 013/118] Drag and drop: fix firefox compat logic (#67439) Co-authored-by: ellatrix Co-authored-by: youknowriad --- .../block-list/use-block-props/index.js | 6 +- .../use-firefox-draggable-compatibility.js | 70 +++++++++++++++++-- 2 files changed, 66 insertions(+), 10 deletions(-) diff --git a/packages/block-editor/src/components/block-list/use-block-props/index.js b/packages/block-editor/src/components/block-list/use-block-props/index.js index 4696149dc3875..554adccdc22c9 100644 --- a/packages/block-editor/src/components/block-list/use-block-props/index.js +++ b/packages/block-editor/src/components/block-list/use-block-props/index.js @@ -104,8 +104,6 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) { canMove, } = useContext( PrivateBlockContext ); - const canDrag = canMove && ! hasChildSelected; - // translators: %s: Type of block (i.e. Text, Image etc) const blockLabel = sprintf( __( 'Block: %s' ), blockTitle ); const htmlSuffix = mode === 'html' && ! __unstableIsHtml ? '-visual' : ''; @@ -125,7 +123,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) { isEnabled: isSectionBlock, } ), useScrollIntoView( { isSelected } ), - canDrag ? ffDragRef : undefined, + canMove ? ffDragRef : undefined, ] ); const blockEditContext = useBlockEditContext(); @@ -158,7 +156,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) { return { tabIndex: blockEditingMode === 'disabled' ? -1 : 0, - draggable: canDrag ? true : undefined, + draggable: canMove && ! hasChildSelected ? true : undefined, ...wrapperProps, ...props, ref: mergedRefs, diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-firefox-draggable-compatibility.js b/packages/block-editor/src/components/block-list/use-block-props/use-firefox-draggable-compatibility.js index 5fa07fb9be604..a53983b95954a 100644 --- a/packages/block-editor/src/components/block-list/use-block-props/use-firefox-draggable-compatibility.js +++ b/packages/block-editor/src/components/block-list/use-block-props/use-firefox-draggable-compatibility.js @@ -3,6 +3,68 @@ */ import { useRefEffect } from '@wordpress/compose'; +const nodesByDocument = new Map(); + +function add( doc, node ) { + let set = nodesByDocument.get( doc ); + if ( ! set ) { + set = new Set(); + nodesByDocument.set( doc, set ); + doc.addEventListener( 'pointerdown', down ); + } + set.add( node ); +} + +function remove( doc, node ) { + const set = nodesByDocument.get( doc ); + if ( set ) { + set.delete( node ); + restore( node ); + if ( set.size === 0 ) { + nodesByDocument.delete( doc ); + doc.removeEventListener( 'pointerdown', down ); + } + } +} + +function restore( node ) { + const prevDraggable = node.getAttribute( 'data-draggable' ); + if ( prevDraggable ) { + node.removeAttribute( 'data-draggable' ); + // Only restore if `draggable` is still removed. It could have been + // changed by React in the meantime. + if ( prevDraggable === 'true' && ! node.getAttribute( 'draggable' ) ) { + node.setAttribute( 'draggable', 'true' ); + } + } +} + +function down( event ) { + const { target } = event; + const { ownerDocument, isContentEditable } = target; + const nodes = nodesByDocument.get( ownerDocument ); + + if ( isContentEditable ) { + // Whenever an editable element is clicked, check which draggable + // blocks contain this element, and temporarily disable draggability. + for ( const node of nodes ) { + if ( + node.getAttribute( 'draggable' ) === 'true' && + node.contains( target ) + ) { + node.removeAttribute( 'draggable' ); + node.setAttribute( 'data-draggable', 'true' ); + } + } + } else { + // Whenever a non-editable element is clicked, re-enable draggability + // for any blocks that were previously disabled. + for ( const node of nodes ) { + restore( node ); + } + } +} + /** * In Firefox, the `draggable` and `contenteditable` attributes don't play well * together. When `contenteditable` is within a `draggable` element, selection @@ -13,13 +75,9 @@ import { useRefEffect } from '@wordpress/compose'; */ export function useFirefoxDraggableCompatibility() { return useRefEffect( ( node ) => { - function onDown( event ) { - node.draggable = ! event.target.isContentEditable; - } - const { ownerDocument } = node; - ownerDocument.addEventListener( 'pointerdown', onDown ); + add( node.ownerDocument, node ); return () => { - ownerDocument.removeEventListener( 'pointerdown', onDown ); + remove( node.ownerDocument, node ); }; }, [] ); } From 3ea3ba269fdeeb4e7c67a79595789e1205bed042 Mon Sep 17 00:00:00 2001 From: Nik Tsekouras Date: Thu, 5 Dec 2024 12:04:57 +0200 Subject: [PATCH 014/118] DataViews: Create a single component for rendering the actions list (#67558) Co-authored-by: ntsekouras Co-authored-by: Mamaduka Co-authored-by: oandregal --- .../dataviews-item-actions/index.tsx | 53 ++++++++++--------- 1 file changed, 29 insertions(+), 24 deletions(-) diff --git a/packages/dataviews/src/components/dataviews-item-actions/index.tsx b/packages/dataviews/src/components/dataviews-item-actions/index.tsx index b5eaac11bcd8d..c5e1cb09adf15 100644 --- a/packages/dataviews/src/components/dataviews-item-actions/index.tsx +++ b/packages/dataviews/src/components/dataviews-item-actions/index.tsx @@ -65,6 +65,12 @@ interface PrimaryActionsProps< Item > { actions: Action< Item >[]; registry: ReturnType< typeof useRegistry >; } +interface ActionsListProps< Item > { + item: Item; + actions: Action< Item >[]; + registry: ReturnType< typeof useRegistry >; + ActionTrigger: ( props: ActionTriggerProps< Item > ) => ReactElement; +} function ButtonTrigger< Item >( { action, @@ -160,28 +166,12 @@ export function ActionsMenuGroup< Item >( { const registry = useRegistry(); return ( - { actions.map( ( action ) => { - if ( 'RenderModal' in action ) { - return ( - - ); - } - return ( - { - action.callback( [ item ], { registry } ); - } } - items={ [ item ] } - /> - ); - } ) } + ); } @@ -286,7 +276,22 @@ function PrimaryActions< Item >( { if ( ! Array.isArray( actions ) || actions.length === 0 ) { return null; } + return ( + + ); +} +function ActionsList< Item >( { + item, + actions, + registry, + ActionTrigger, +}: ActionsListProps< Item > ) { return actions.map( ( action ) => { if ( 'RenderModal' in action ) { return ( @@ -294,12 +299,12 @@ function PrimaryActions< Item >( { key={ action.id } action={ action } items={ [ item ] } - ActionTrigger={ ButtonTrigger } + ActionTrigger={ ActionTrigger } /> ); } return ( - { From eace185db0801658b6267c764e038fa4ac85c4c1 Mon Sep 17 00:00:00 2001 From: Ramon Date: Thu, 5 Dec 2024 21:52:21 +1100 Subject: [PATCH 015/118] Global styles: controls in grid should match between sidebar panel and editor (#67602) Co-authored-by: ramonjd Co-authored-by: tyxla Co-authored-by: jasmussen --- packages/edit-site/src/components/global-styles/style.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss index 57f51f4b8f007..4674b5e5fc3ca 100644 --- a/packages/edit-site/src/components/global-styles/style.scss +++ b/packages/edit-site/src/components/global-styles/style.scss @@ -211,6 +211,10 @@ flex-direction: column; } +.edit-site-global-styles-sidebar__navigator-screen .single-column { + grid-column: span 1; +} + .edit-site-global-styles-screen-root.edit-site-global-styles-screen-root, .edit-site-global-styles-screen-style-variations.edit-site-global-styles-screen-style-variations { background: unset; From 4a5b519f1057c922a2349c7b7e89e07c0ae84bbd Mon Sep 17 00:00:00 2001 From: Nik Tsekouras Date: Thu, 5 Dec 2024 13:18:59 +0200 Subject: [PATCH 016/118] DataViews: Move template and pattern title fields (#67449) Co-authored-by: ntsekouras Co-authored-by: youknowriad Co-authored-by: oandregal Co-authored-by: jameskoster --- .../src/components/dataviews/style.scss | 10 +++ .../src/components/page-patterns/fields.js | 61 +------------------ .../src/components/page-patterns/index.js | 22 ++++++- .../src/components/page-patterns/style.scss | 28 --------- .../src/components/page-templates/fields.js | 19 +----- .../src/components/page-templates/index.js | 14 ++--- .../src/components/post-list/style.scss | 36 ----------- .../src/dataviews/store/private-actions.ts | 31 +++++++--- packages/fields/README.md | 14 ++++- packages/fields/src/fields/index.ts | 3 + .../fields/src/fields/page-title/index.ts | 28 +++++++++ .../fields/src/fields/page-title/style.scss | 10 +++ .../fields/src/fields/page-title/view.tsx | 38 ++++++++++++ .../fields/src/fields/pattern-title/index.ts | 28 +++++++++ .../src/fields/pattern-title/style.scss | 3 + .../fields/src/fields/pattern-title/view.tsx | 32 ++++++++++ .../fields/src/fields/template-title/index.ts | 28 +++++++++ packages/fields/src/fields/title/index.ts | 11 ++-- packages/fields/src/fields/title/style.scss | 8 +++ .../fields/src/fields/title/title-view.tsx | 61 ------------------- packages/fields/src/fields/title/view.tsx | 43 +++++++++++++ packages/fields/src/style.scss | 3 + .../specs/site-editor/browser-history.spec.js | 4 +- .../site-editor/new-templates-list.spec.js | 12 +--- .../site-editor/template-registration.spec.js | 4 +- test/performance/specs/site-editor.spec.js | 4 +- 26 files changed, 317 insertions(+), 238 deletions(-) create mode 100644 packages/fields/src/fields/page-title/index.ts create mode 100644 packages/fields/src/fields/page-title/style.scss create mode 100644 packages/fields/src/fields/page-title/view.tsx create mode 100644 packages/fields/src/fields/pattern-title/index.ts create mode 100644 packages/fields/src/fields/pattern-title/style.scss create mode 100644 packages/fields/src/fields/pattern-title/view.tsx create mode 100644 packages/fields/src/fields/template-title/index.ts create mode 100644 packages/fields/src/fields/title/style.scss delete mode 100644 packages/fields/src/fields/title/title-view.tsx create mode 100644 packages/fields/src/fields/title/view.tsx diff --git a/packages/dataviews/src/components/dataviews/style.scss b/packages/dataviews/src/components/dataviews/style.scss index bd75a1ff9e2a1..a357679bef1eb 100644 --- a/packages/dataviews/src/components/dataviews/style.scss +++ b/packages/dataviews/src/components/dataviews/style.scss @@ -60,6 +60,16 @@ color: var(--wp-admin-theme-color); } } + + &.dataviews-view-grid__primary-field--clickable span, + > .dataviews-view-table__cell-content--clickable span { + color: $gray-900; + + &:hover { + color: var(--wp-admin-theme-color); + } + @include link-reset(); + } } .dataviews-view-list__primary-field--clickable, diff --git a/packages/edit-site/src/components/page-patterns/fields.js b/packages/edit-site/src/components/page-patterns/fields.js index 60e37844b2edb..f202664389f0f 100644 --- a/packages/edit-site/src/components/page-patterns/fields.js +++ b/packages/edit-site/src/components/page-patterns/fields.js @@ -6,21 +6,15 @@ import clsx from 'clsx'; /** * WordPress dependencies */ -import { - __experimentalHStack as HStack, - Button, - Tooltip, - FlexBlock, -} from '@wordpress/components'; +import { __experimentalHStack as HStack } from '@wordpress/components'; import { __, _x } from '@wordpress/i18n'; import { useState, useMemo, useId } from '@wordpress/element'; import { BlockPreview, privateApis as blockEditorPrivateApis, } from '@wordpress/block-editor'; -import { Icon, lockSmall } from '@wordpress/icons'; +import { Icon } from '@wordpress/icons'; import { parse } from '@wordpress/blocks'; -import { decodeEntities } from '@wordpress/html-entities'; import { privateApis as routerPrivateApis } from '@wordpress/router'; /** @@ -112,57 +106,6 @@ export const previewField = { enableSorting: false, }; -function TitleField( { item } ) { - const isUserPattern = item.type === PATTERN_TYPES.user; - const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE; - const { onClick } = useLink( - `/${ item.type }/${ - isUserPattern || isTemplatePart ? item.id : item.name - }?canvas=edit` - ); - const title = decodeEntities( defaultGetTitle( item ) ); - return ( - - - { item.type === PATTERN_TYPES.theme ? ( - title - ) : ( - - ) } - - { item.type === PATTERN_TYPES.theme && ( - - - - ) } - - ); -} - -export const titleField = { - label: __( 'Title' ), - id: 'title', - getValue: ( { item } ) => item.title?.raw || item.title, - render: TitleField, - enableHiding: false, -}; - const SYNC_FILTERS = [ { value: PATTERN_SYNC_TYPES.full, diff --git a/packages/edit-site/src/components/page-patterns/index.js b/packages/edit-site/src/components/page-patterns/index.js index b675333488757..9a4dedca09803 100644 --- a/packages/edit-site/src/components/page-patterns/index.js +++ b/packages/edit-site/src/components/page-patterns/index.js @@ -9,6 +9,7 @@ import { usePrevious } from '@wordpress/compose'; import { useEntityRecords } from '@wordpress/core-data'; import { privateApis as editorPrivateApis } from '@wordpress/editor'; import { privateApis as routerPrivateApis } from '@wordpress/router'; +import { patternTitleField } from '@wordpress/fields'; /** * Internal dependencies @@ -29,13 +30,12 @@ import { useEditPostAction } from '../dataviews-actions'; import { patternStatusField, previewField, - titleField, templatePartAuthorField, } from './fields'; const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis ); const { usePostActions } = unlock( editorPrivateApis ); -const { useLocation } = unlock( routerPrivateApis ); +const { useLocation, useHistory } = unlock( routerPrivateApis ); const EMPTY_ARRAY = []; const defaultLayouts = { @@ -74,6 +74,7 @@ export default function DataviewsPatterns() { const { query: { postType = 'wp_block', categoryId: categoryIdFromURL }, } = useLocation(); + const history = useHistory(); const categoryId = categoryIdFromURL || PATTERN_DEFAULT_CATEGORY; const [ view, setView ] = useState( DEFAULT_VIEW ); const previousCategoryId = usePrevious( categoryId ); @@ -105,7 +106,7 @@ export default function DataviewsPatterns() { }, [ records ] ); const fields = useMemo( () => { - const _fields = [ previewField, titleField ]; + const _fields = [ previewField, patternTitleField ]; if ( postType === PATTERN_TYPES.user ) { _fields.push( patternStatusField ); @@ -183,6 +184,21 @@ export default function DataviewsPatterns() { data={ dataWithPermissions || EMPTY_ARRAY } getItemId={ ( item ) => item.name ?? item.id } isLoading={ isResolving } + isItemClickable={ ( item ) => + item.type !== PATTERN_TYPES.theme + } + onClickItem={ ( item ) => { + history.navigate( + `/${ item.type }/${ + [ + PATTERN_TYPES.user, + TEMPLATE_PART_POST_TYPE, + ].includes( item.type ) + ? item.id + : item.name + }?canvas=edit` + ); + } } view={ view } onChangeView={ setView } defaultLayouts={ defaultLayouts } diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss index d59cce420202e..72d53c2a721af 100644 --- a/packages/edit-site/src/components/page-patterns/style.scss +++ b/packages/edit-site/src/components/page-patterns/style.scss @@ -71,34 +71,6 @@ } } -.edit-site-patterns__pattern-title { - display: block; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - color: inherit; - - .is-link { - text-decoration: none; - color: $gray-200; - - &:hover, - &:focus { - color: $white; - } - } - - .edit-site-patterns__pattern-icon { - border-radius: $grid-unit-05; - background: var(--wp-block-synced-color); - fill: $white; - } - - .edit-site-patterns__pattern-lock-icon { - fill: currentcolor; - } -} - .edit-site-page-patterns-dataviews { .dataviews-view-grid__badge-fields { .dataviews-view-grid__field-value:has(.edit-site-patterns__field-sync-status-fully) { diff --git a/packages/edit-site/src/components/page-templates/fields.js b/packages/edit-site/src/components/page-templates/fields.js index 35d7b9714d5be..88c20ff27ebbc 100644 --- a/packages/edit-site/src/components/page-templates/fields.js +++ b/packages/edit-site/src/components/page-templates/fields.js @@ -25,7 +25,7 @@ import { useAddedBy } from './hooks'; import usePatternSettings from '../page-patterns/use-pattern-settings'; import { unlock } from '../../lock-unlock'; -const { useLink, Link } = unlock( routerPrivateApis ); +const { useLink } = unlock( routerPrivateApis ); const { useGlobalStyle } = unlock( blockEditorPrivateApis ); function PreviewField( { item } ) { @@ -75,23 +75,6 @@ export const previewField = { enableSorting: false, }; -function TitleField( { item } ) { - return ( - - { decodeEntities( item.title?.rendered ) || __( '(no title)' ) } - - ); -} - -export const titleField = { - label: __( 'Template' ), - id: 'title', - getValue: ( { item } ) => item.title?.rendered, - render: TitleField, - enableHiding: false, - enableGlobalSearch: true, -}; - export const descriptionField = { label: __( 'Description' ), id: 'description', diff --git a/packages/edit-site/src/components/page-templates/index.js b/packages/edit-site/src/components/page-templates/index.js index 828867e6f283d..934fb0be6784d 100644 --- a/packages/edit-site/src/components/page-templates/index.js +++ b/packages/edit-site/src/components/page-templates/index.js @@ -7,6 +7,7 @@ import { privateApis as corePrivateApis } from '@wordpress/core-data'; import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews'; import { privateApis as routerPrivateApis } from '@wordpress/router'; import { privateApis as editorPrivateApis } from '@wordpress/editor'; +import { templateTitleField } from '@wordpress/fields'; import { addQueryArgs } from '@wordpress/url'; /** @@ -23,12 +24,7 @@ import { } from '../../utils/constants'; import { unlock } from '../../lock-unlock'; import { useEditPostAction } from '../dataviews-actions'; -import { - authorField, - descriptionField, - previewField, - titleField, -} from './fields'; +import { authorField, descriptionField, previewField } from './fields'; const { usePostActions } = unlock( editorPrivateApis ); const { useHistory, useLocation } = unlock( routerPrivateApis ); @@ -172,7 +168,7 @@ export default function PageTemplates() { const fields = useMemo( () => [ previewField, - titleField, + templateTitleField, descriptionField, { ...authorField, @@ -227,6 +223,10 @@ export default function PageTemplates() { view={ view } onChangeView={ onChangeView } onChangeSelection={ onChangeSelection } + isItemClickable={ () => true } + onClickItem={ ( { id } ) => { + history.navigate( `/wp_template/${ id }?canvas=edit` ); + } } selection={ selection } defaultLayouts={ defaultLayouts } /> diff --git a/packages/edit-site/src/components/post-list/style.scss b/packages/edit-site/src/components/post-list/style.scss index 14bb11b41d445..8ff7e31c79dd6 100644 --- a/packages/edit-site/src/components/post-list/style.scss +++ b/packages/edit-site/src/components/post-list/style.scss @@ -65,42 +65,6 @@ } } -.edit-site-post-list__title span { - text-overflow: ellipsis; - overflow: hidden; -} - -.dataviews-view-grid__primary-field.dataviews-view-grid__primary-field--clickable -.edit-site-post-list__title -span, -.dataviews-view-table__primary-field > .dataviews-view-table__cell-content--clickable -.edit-site-post-list__title -span { - text-decoration: none; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - display: block; - flex-grow: 0; - color: $gray-900; - - &:hover { - color: var(--wp-admin-theme-color); - } - @include link-reset(); -} - -.edit-site-post-list__title-badge { - background: $gray-100; - color: $gray-800; - padding: 0 $grid-unit-05; - border-radius: $radius-small; - font-size: 12px; - font-weight: 400; - flex-shrink: 0; - line-height: $grid-unit-05 * 5; -} - .edit-site-post-list__status-icon { height: $grid-unit-30; width: $grid-unit-30; diff --git a/packages/editor/src/dataviews/store/private-actions.ts b/packages/editor/src/dataviews/store/private-actions.ts index 754a02d317a38..2119b52756e96 100644 --- a/packages/editor/src/dataviews/store/private-actions.ts +++ b/packages/editor/src/dataviews/store/private-actions.ts @@ -4,12 +4,6 @@ import { store as coreStore } from '@wordpress/core-data'; import type { Action, Field } from '@wordpress/dataviews'; import { doAction } from '@wordpress/hooks'; - -/** - * Internal dependencies - */ -import { store as editorStore } from '../../store'; -import { unlock } from '../../lock-unlock'; import type { PostType } from '@wordpress/fields'; import { viewPost, @@ -35,8 +29,17 @@ import { authorField, titleField, templateField, + templateTitleField, + pageTitleField, + patternTitleField, } from '@wordpress/fields'; +/** + * Internal dependencies + */ +import { store as editorStore } from '../../store'; +import { unlock } from '../../lock-unlock'; + export function registerEntityAction< Item >( kind: string, name: string, @@ -164,16 +167,28 @@ export const registerPostTypeSchema = postTypeConfig.supports?.thumbnail && currentTheme?.theme_supports?.[ 'post-thumbnails' ] && featuredImageField, - titleField, postTypeConfig.supports?.author && authorField, statusField, dateField, slugField, postTypeConfig.supports?.[ 'page-attributes' ] && parentField, postTypeConfig.supports?.comments && commentStatusField, - passwordField, templateField, + passwordField, ].filter( Boolean ); + if ( postTypeConfig.supports?.title ) { + let _titleField; + if ( postType === 'page' ) { + _titleField = pageTitleField; + } else if ( postType === 'wp_template' ) { + _titleField = templateTitleField; + } else if ( postType === 'wp_block' ) { + _titleField = patternTitleField; + } else { + _titleField = titleField; + } + fields.push( _titleField ); + } registry.batch( () => { actions.forEach( ( action ) => { diff --git a/packages/fields/README.md b/packages/fields/README.md index 144982361be25..9ca08991aca51 100644 --- a/packages/fields/README.md +++ b/packages/fields/README.md @@ -67,6 +67,10 @@ Featured Image field for BasePost. Order field for BasePost. +### pageTitleField + +Title for the page entity. + ### parentField Parent field for BasePost. @@ -75,6 +79,10 @@ Parent field for BasePost. Password field for BasePost. +### patternTitleField + +Title for the pattern entity. + ### permanentlyDeletePost Delete action for PostWithPermissions. @@ -111,9 +119,13 @@ Status field for BasePost. Template field for BasePost. +### templateTitleField + +Title for the template entity. + ### titleField -Title field for BasePost. +Title for the any entity with a `title` property. For patterns, pages or templates you should use the respective field because there are some differences in the rendering, labels, etc. ### trashPost diff --git a/packages/fields/src/fields/index.ts b/packages/fields/src/fields/index.ts index 2cdf89ee13fb0..410b0bf51a223 100644 --- a/packages/fields/src/fields/index.ts +++ b/packages/fields/src/fields/index.ts @@ -1,5 +1,8 @@ export { default as slugField } from './slug'; export { default as titleField } from './title'; +export { default as pageTitleField } from './page-title'; +export { default as templateTitleField } from './template-title'; +export { default as patternTitleField } from './pattern-title'; export { default as orderField } from './order'; export { default as featuredImageField } from './featured-image'; export { default as templateField } from './template'; diff --git a/packages/fields/src/fields/page-title/index.ts b/packages/fields/src/fields/page-title/index.ts new file mode 100644 index 0000000000000..8bbf051f2b583 --- /dev/null +++ b/packages/fields/src/fields/page-title/index.ts @@ -0,0 +1,28 @@ +/** + * WordPress dependencies + */ +import type { Field } from '@wordpress/dataviews'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import type { BasePost } from '../../types'; +import { getItemTitle } from '../../actions/utils'; +import PageTitleView from './view'; + +const pageTitleField: Field< BasePost > = { + type: 'text', + id: 'title', + label: __( 'Title' ), + placeholder: __( 'No title' ), + getValue: ( { item } ) => getItemTitle( item ), + render: PageTitleView, + enableHiding: false, + enableGlobalSearch: true, +}; + +/** + * Title for the page entity. + */ +export default pageTitleField; diff --git a/packages/fields/src/fields/page-title/style.scss b/packages/fields/src/fields/page-title/style.scss new file mode 100644 index 0000000000000..def56aa466a8a --- /dev/null +++ b/packages/fields/src/fields/page-title/style.scss @@ -0,0 +1,10 @@ +.fields-field__page-title__badge { + background: $gray-100; + color: $gray-800; + padding: 0 $grid-unit-05; + border-radius: $radius-small; + font-size: 12px; + font-weight: 400; + flex-shrink: 0; + line-height: $grid-unit-05 * 5; +} diff --git a/packages/fields/src/fields/page-title/view.tsx b/packages/fields/src/fields/page-title/view.tsx new file mode 100644 index 0000000000000..0be4c16d5d29a --- /dev/null +++ b/packages/fields/src/fields/page-title/view.tsx @@ -0,0 +1,38 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { useSelect } from '@wordpress/data'; +import { store as coreStore } from '@wordpress/core-data'; +import type { Settings } from '@wordpress/core-data'; + +/** + * Internal dependencies + */ +import type { CommonPost } from '../../types'; +import { BaseTitleView } from '../title/view'; + +export default function PageTitleView( { item }: { item: CommonPost } ) { + const { frontPageId, postsPageId } = useSelect( ( select ) => { + const { getEntityRecord } = select( coreStore ); + const siteSettings = getEntityRecord( + 'root', + 'site' + ) as Partial< Settings >; + return { + frontPageId: siteSettings?.page_on_front, + postsPageId: siteSettings?.page_for_posts, + }; + }, [] ); + return ( + + { [ frontPageId, postsPageId ].includes( item.id as number ) && ( + + { item.id === frontPageId + ? __( 'Homepage' ) + : __( 'Posts Page' ) } + + ) } + + ); +} diff --git a/packages/fields/src/fields/pattern-title/index.ts b/packages/fields/src/fields/pattern-title/index.ts new file mode 100644 index 0000000000000..a3e54eea6f28d --- /dev/null +++ b/packages/fields/src/fields/pattern-title/index.ts @@ -0,0 +1,28 @@ +/** + * WordPress dependencies + */ +import type { Field } from '@wordpress/dataviews'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import type { Pattern } from '../../types'; +import { getItemTitle } from '../../actions/utils'; +import PatternTitleView from './view'; + +const patternTitleField: Field< Pattern > = { + type: 'text', + id: 'title', + label: __( 'Title' ), + placeholder: __( 'No title' ), + getValue: ( { item } ) => getItemTitle( item ), + render: PatternTitleView, + enableHiding: false, + enableGlobalSearch: true, +}; + +/** + * Title for the pattern entity. + */ +export default patternTitleField; diff --git a/packages/fields/src/fields/pattern-title/style.scss b/packages/fields/src/fields/pattern-title/style.scss new file mode 100644 index 0000000000000..fa4d03c850bea --- /dev/null +++ b/packages/fields/src/fields/pattern-title/style.scss @@ -0,0 +1,3 @@ +.fields-field__pattern-title span:first-child { + flex: 1; +} diff --git a/packages/fields/src/fields/pattern-title/view.tsx b/packages/fields/src/fields/pattern-title/view.tsx new file mode 100644 index 0000000000000..b59360d30e0be --- /dev/null +++ b/packages/fields/src/fields/pattern-title/view.tsx @@ -0,0 +1,32 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { Icon, lockSmall } from '@wordpress/icons'; +import { Tooltip } from '@wordpress/components'; +// @ts-ignore +import { privateApis as patternPrivateApis } from '@wordpress/patterns'; + +/** + * Internal dependencies + */ +import type { CommonPost } from '../../types'; +import { BaseTitleView } from '../title/view'; +import { unlock } from '../../lock-unlock'; + +export const { PATTERN_TYPES } = unlock( patternPrivateApis ); + +export default function PatternTitleView( { item }: { item: CommonPost } ) { + return ( + + { item.type === PATTERN_TYPES.theme && ( + + + + ) } + + ); +} diff --git a/packages/fields/src/fields/template-title/index.ts b/packages/fields/src/fields/template-title/index.ts new file mode 100644 index 0000000000000..e0d83d6ffda8f --- /dev/null +++ b/packages/fields/src/fields/template-title/index.ts @@ -0,0 +1,28 @@ +/** + * WordPress dependencies + */ +import type { Field } from '@wordpress/dataviews'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import type { Template } from '../../types'; +import { getItemTitle } from '../../actions/utils'; +import TitleView from '../title/view'; + +const templateTitleField: Field< Template > = { + type: 'text', + label: __( 'Template' ), + placeholder: __( 'No title' ), + id: 'title', + getValue: ( { item } ) => getItemTitle( item ), + render: TitleView, + enableHiding: false, + enableGlobalSearch: true, +}; + +/** + * Title for the template entity. + */ +export default templateTitleField; diff --git a/packages/fields/src/fields/title/index.ts b/packages/fields/src/fields/title/index.ts index 111980a1ca2b0..b4a2399526fdd 100644 --- a/packages/fields/src/fields/title/index.ts +++ b/packages/fields/src/fields/title/index.ts @@ -7,11 +7,11 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import type { BasePost } from '../../types'; +import type { CommonPost } from '../../types'; import { getItemTitle } from '../../actions/utils'; -import TitleView from './title-view'; +import TitleView from './view'; -const titleField: Field< BasePost > = { +const titleField: Field< CommonPost > = { type: 'text', id: 'title', label: __( 'Title' ), @@ -19,9 +19,12 @@ const titleField: Field< BasePost > = { getValue: ( { item } ) => getItemTitle( item ), render: TitleView, enableHiding: false, + enableGlobalSearch: true, }; /** - * Title field for BasePost. + * Title for the any entity with a `title` property. + * For patterns, pages or templates you should use the respective field + * because there are some differences in the rendering, labels, etc. */ export default titleField; diff --git a/packages/fields/src/fields/title/style.scss b/packages/fields/src/fields/title/style.scss new file mode 100644 index 0000000000000..5b9977dcaa398 --- /dev/null +++ b/packages/fields/src/fields/title/style.scss @@ -0,0 +1,8 @@ +.fields-field__title span:first-child { + text-overflow: ellipsis; + overflow: hidden; + text-decoration: none; + white-space: nowrap; + display: block; + flex-grow: 0; +} diff --git a/packages/fields/src/fields/title/title-view.tsx b/packages/fields/src/fields/title/title-view.tsx deleted file mode 100644 index f6bf5fb1817d9..0000000000000 --- a/packages/fields/src/fields/title/title-view.tsx +++ /dev/null @@ -1,61 +0,0 @@ -/** - * WordPress dependencies - */ -import { __experimentalHStack as HStack } from '@wordpress/components'; -import { decodeEntities } from '@wordpress/html-entities'; -import { __ } from '@wordpress/i18n'; -import { useSelect } from '@wordpress/data'; -import { store as coreStore } from '@wordpress/core-data'; -import type { Settings } from '@wordpress/core-data'; - -/** - * Internal dependencies - */ -import type { BasePost } from '../../types'; -import { getItemTitle } from '../../actions/utils'; - -const TitleView = ( { item }: { item: BasePost } ) => { - const { frontPageId, postsPageId } = useSelect( ( select ) => { - const { getEntityRecord } = select( coreStore ); - const siteSettings = getEntityRecord( - 'root', - 'site' - ) as Partial< Settings >; - return { - frontPageId: siteSettings?.page_on_front, - postsPageId: siteSettings?.page_for_posts, - }; - }, [] ); - - const renderedTitle = getItemTitle( item ); - - let suffix; - if ( item.id === frontPageId ) { - suffix = ( - - { __( 'Homepage' ) } - - ); - } else if ( item.id === postsPageId ) { - suffix = ( - - { __( 'Posts Page' ) } - - ); - } - - return ( - - - { decodeEntities( renderedTitle ) || __( '(no title)' ) } - - { suffix } - - ); -}; - -export default TitleView; diff --git a/packages/fields/src/fields/title/view.tsx b/packages/fields/src/fields/title/view.tsx new file mode 100644 index 0000000000000..b6f39796a57f0 --- /dev/null +++ b/packages/fields/src/fields/title/view.tsx @@ -0,0 +1,43 @@ +/** + * External dependencies + */ +import clsx from 'clsx'; +import type { ReactNode } from 'react'; + +/** + * WordPress dependencies + */ +import { __experimentalHStack as HStack } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import type { CommonPost } from '../../types'; +import { getItemTitle } from '../../actions/utils'; + +export function BaseTitleView( { + item, + className, + children, +}: { + item: CommonPost; + className?: string; + children?: ReactNode; +} ) { + const renderedTitle = getItemTitle( item ); + return ( + + { renderedTitle || __( '(no title)' ) } + { children } + + ); +} + +export default function TitleView( { item }: { item: CommonPost } ) { + return ; +} diff --git a/packages/fields/src/style.scss b/packages/fields/src/style.scss index 582044235aef1..d9a571270fbb6 100644 --- a/packages/fields/src/style.scss +++ b/packages/fields/src/style.scss @@ -2,3 +2,6 @@ @import "./fields/slug/style.scss"; @import "./fields/featured-image/style.scss"; @import "./fields/template/style.scss"; +@import "./fields/title/style.scss"; +@import "./fields/page-title/style.scss"; +@import "./fields/pattern-title/style.scss"; diff --git a/test/e2e/specs/site-editor/browser-history.spec.js b/test/e2e/specs/site-editor/browser-history.spec.js index a2326d10e3cc5..c3eb2ac5e3a2f 100644 --- a/test/e2e/specs/site-editor/browser-history.spec.js +++ b/test/e2e/specs/site-editor/browser-history.spec.js @@ -19,7 +19,9 @@ test.describe( 'Site editor browser history', () => { // Navigate to a single template await page.click( 'role=button[name="Templates"]' ); - await page.getByRole( 'link', { name: 'Index' } ).click(); + await page + .locator( '.fields-field__title', { hasText: 'Index' } ) + .click(); await expect( page ).toHaveURL( '/wp-admin/site-editor.php?p=%2Fwp_template%2Femptytheme%2F%2Findex&canvas=edit' ); diff --git a/test/e2e/specs/site-editor/new-templates-list.spec.js b/test/e2e/specs/site-editor/new-templates-list.spec.js index 6faa85a2659cf..d26306a6c8e3b 100644 --- a/test/e2e/specs/site-editor/new-templates-list.spec.js +++ b/test/e2e/specs/site-editor/new-templates-list.spec.js @@ -27,13 +27,7 @@ test.describe( 'Templates', () => { page.locator( '[aria-label="Templates"]' ) ).toBeVisible(); - const firstTitle = page - .getByRole( 'region', { - name: 'Template', - includeHidden: true, - } ) - .getByRole( 'link', { includeHidden: true } ) - .first(); + const firstTitle = page.locator( '.fields-field__title' ).first(); // Descending by title. await page.getByRole( 'button', { name: 'View options' } ).click(); @@ -54,9 +48,7 @@ test.describe( 'Templates', () => { await admin.visitSiteEditor( { postType: 'wp_template' } ); // Global search. await page.getByRole( 'searchbox', { name: 'Search' } ).fill( 'tag' ); - const titles = page - .getByRole( 'region', { name: 'Template' } ) - .getByRole( 'link', { includeHidden: true } ); + const titles = page.locator( '.fields-field__title' ); await expect( titles ).toHaveCount( 1 ); await expect( titles.first() ).toHaveText( 'Tag Archives' ); await page diff --git a/test/e2e/specs/site-editor/template-registration.spec.js b/test/e2e/specs/site-editor/template-registration.spec.js index 90e56645813c3..ed89c7d18bf3f 100644 --- a/test/e2e/specs/site-editor/template-registration.spec.js +++ b/test/e2e/specs/site-editor/template-registration.spec.js @@ -319,7 +319,9 @@ test.describe( 'Block template registration', () => { .getByLabel( 'Dismiss this notice' ) .getByText( `"Author: Admin" reset.` ); await page.getByPlaceholder( 'Search' ).fill( 'Author: admin' ); - await page.getByRole( 'link', { name: 'Author: Admin' } ).click(); + await page + .locator( '.fields-field__title', { hasText: 'Author: Admin' } ) + .click(); const actions = page.getByLabel( 'Actions' ); await actions.first().click(); await page.getByRole( 'menuitem', { name: 'Reset' } ).click(); diff --git a/test/performance/specs/site-editor.spec.js b/test/performance/specs/site-editor.spec.js index e72d83fa8b3aa..c09cfe3c67b44 100644 --- a/test/performance/specs/site-editor.spec.js +++ b/test/performance/specs/site-editor.spec.js @@ -237,7 +237,9 @@ test.describe( 'Site Editor Performance', () => { } await metrics.startTracing(); - await page.getByText( 'Single Posts', { exact: true } ).click(); + await page + .getByText( 'Single Posts', { exact: true } ) + .click( { force: true } ); await metrics.stopTracing(); // Get the durations. From f6c0334eb2c9cde5d48f14af36fa62e2ae9d4b1f Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Thu, 5 Dec 2024 12:53:25 +0100 Subject: [PATCH 017/118] DataViews build-wp: don't bundle the date package (#67612) Co-authored-by: jsnajdr Co-authored-by: youknowriad --- packages/dataviews/build.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dataviews/build.js b/packages/dataviews/build.js index e156b1cb875af..16146632d0359 100644 --- a/packages/dataviews/build.js +++ b/packages/dataviews/build.js @@ -8,7 +8,7 @@ const wpExternals = { name: 'wordpress-externals', setup( build ) { build.onResolve( - { filter: /^@wordpress\/(data|hooks|i18n)(\/|$)/ }, + { filter: /^@wordpress\/(data|hooks|i18n|date)(\/|$)/ }, ( args ) => { // Don't bundle WordPress signleton packages return { path: args.path, external: true }; From 2205e5f8f936fbbb4888bcb3f700e52c1871bfab Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 5 Dec 2024 13:00:05 +0100 Subject: [PATCH 018/118] InspectorControlsSlot: remove unused framer motion context forwarding (#67522) * InspectorControlsSlot: remove unused framer motion context forwarding * Remove computedFillProps, use fillProps directly --- Co-authored-by: ciampo Co-authored-by: tyxla Co-authored-by: jsnajdr --- .../src/components/inspector-controls/slot.js | 25 +++---------------- 1 file changed, 3 insertions(+), 22 deletions(-) diff --git a/packages/block-editor/src/components/inspector-controls/slot.js b/packages/block-editor/src/components/inspector-controls/slot.js index 5c18dbd1f86bb..4957ca90b5679 100644 --- a/packages/block-editor/src/components/inspector-controls/slot.js +++ b/packages/block-editor/src/components/inspector-controls/slot.js @@ -1,11 +1,7 @@ /** * WordPress dependencies */ -import { - __experimentalUseSlotFills as useSlotFills, - __unstableMotionContext as MotionContext, -} from '@wordpress/components'; -import { useContext, useMemo } from '@wordpress/element'; +import { __experimentalUseSlotFills as useSlotFills } from '@wordpress/components'; import warning from '@wordpress/warning'; import deprecated from '@wordpress/deprecated'; @@ -37,19 +33,6 @@ export default function InspectorControlsSlot( { const slotFill = groups[ group ]; const fills = useSlotFills( slotFill?.name ); - const motionContextValue = useContext( MotionContext ); - - const computedFillProps = useMemo( - () => ( { - ...fillProps, - forwardedContext: [ - ...( fillProps?.forwardedContext ?? [] ), - [ MotionContext.Provider, { value: motionContextValue } ], - ], - } ), - [ motionContextValue, fillProps ] - ); - if ( ! slotFill ) { warning( `Unknown InspectorControls group "${ group }" provided.` ); return null; @@ -66,14 +49,12 @@ export default function InspectorControlsSlot( { ); } - return ( - - ); + return ; } From 5644105da91c7f65a91b017a13ebd7d2ddfaf47e Mon Sep 17 00:00:00 2001 From: David Calhoun Date: Thu, 5 Dec 2024 07:19:43 -0500 Subject: [PATCH 019/118] docs: Describe patch files (#67603) Provide rationale for patch-package modifications. Co-authored-by: dcalhoun Co-authored-by: sirreal --- patches/README.md | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/patches/README.md b/patches/README.md index 8149c96950057..b811c824532c3 100644 --- a/patches/README.md +++ b/patches/README.md @@ -24,8 +24,16 @@ See https://github.com/facebook/react/pull/17883. ### `patches/react-devtools-core+4.28.5.patch` -No notes. +The mobile editor relies upon `jsdom-jscore-rn` to create a partial DOM +environment, which causes `react-devtools-core` to believe it's running in a +browser environment. We added a custom conditional to disable browser-specific +features when running in a `jsdom-jscore-rn` environment. + +See https://github.com/WordPress/gutenberg/pull/47616. ### `patches/react-native+0.73.3.patch` -No notes. +Accessibility changes in React Native 0.73.0 resulted in a broken braille screen +input on iOS. This patch is a workaround to restore the previous behavior. + +See https://github.com/WordPress/gutenberg/pull/53895. From c99acafaf46fa6ccb1b47bf34e930d5169b65db6 Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Thu, 5 Dec 2024 13:43:28 +0100 Subject: [PATCH 020/118] Keycodes: improve tree shaking by annotating exports as pure (#67615) Co-authored-by: jsnajdr Co-authored-by: youknowriad Co-authored-by: tyxla Co-authored-by: sgomes --- packages/keycodes/src/index.js | 56 ++++++++++++++++------------------ 1 file changed, 27 insertions(+), 29 deletions(-) diff --git a/packages/keycodes/src/index.js b/packages/keycodes/src/index.js index 6b01109e2a40d..b6df5e3f4a214 100644 --- a/packages/keycodes/src/index.js +++ b/packages/keycodes/src/index.js @@ -211,9 +211,9 @@ export const modifiers = { * @type {WPModifierHandler>} Keyed map of functions to raw * shortcuts. */ -export const rawShortcut = mapValues( - modifiers, - ( /** @type {WPModifier} */ modifier ) => { +export const rawShortcut = + /* @__PURE__ */ + mapValues( modifiers, ( /** @type {WPModifier} */ modifier ) => { return /** @type {WPKeyHandler} */ ( character, _isApple = isAppleOS @@ -222,8 +222,7 @@ export const rawShortcut = mapValues( '+' ); }; - } -); + } ); /** * Return an array of the parts of a keyboard shortcut chord for display. @@ -238,9 +237,9 @@ export const rawShortcut = mapValues( * @type {WPModifierHandler>} Keyed map of functions to * shortcut sequences. */ -export const displayShortcutList = mapValues( - modifiers, - ( /** @type {WPModifier} */ modifier ) => { +export const displayShortcutList = + /* @__PURE__ */ + mapValues( modifiers, ( /** @type {WPModifier} */ modifier ) => { return /** @type {WPKeyHandler} */ ( character, _isApple = isAppleOS @@ -268,8 +267,7 @@ export const displayShortcutList = mapValues( return [ ...modifierKeys, capitaliseFirstCharacter( character ) ]; }; - } -); + } ); /** * An object that contains functions to display shortcuts. @@ -284,15 +282,17 @@ export const displayShortcutList = mapValues( * @type {WPModifierHandler>} Keyed map of functions to * display shortcuts. */ -export const displayShortcut = mapValues( - displayShortcutList, - ( /** @type {WPKeyHandler} */ shortcutList ) => { - return /** @type {WPKeyHandler} */ ( - character, - _isApple = isAppleOS - ) => shortcutList( character, _isApple ).join( '' ); - } -); +export const displayShortcut = + /* @__PURE__ */ + mapValues( + displayShortcutList, + ( /** @type {WPKeyHandler} */ shortcutList ) => { + return /** @type {WPKeyHandler} */ ( + character, + _isApple = isAppleOS + ) => shortcutList( character, _isApple ).join( '' ); + } + ); /** * An object that contains functions to return an aria label for a keyboard @@ -308,9 +308,9 @@ export const displayShortcut = mapValues( * @type {WPModifierHandler>} Keyed map of functions to * shortcut ARIA labels. */ -export const shortcutAriaLabel = mapValues( - modifiers, - ( /** @type {WPModifier} */ modifier ) => { +export const shortcutAriaLabel = + /* @__PURE__ */ + mapValues( modifiers, ( /** @type {WPModifier} */ modifier ) => { return /** @type {WPKeyHandler} */ ( character, _isApple = isAppleOS @@ -338,8 +338,7 @@ export const shortcutAriaLabel = mapValues( ) .join( isApple ? ' ' : ' + ' ); }; - } -); + } ); /** * From a given KeyboardEvent, returns an array of active modifier constants for @@ -379,9 +378,9 @@ function getEventModifiers( event ) { * @type {WPModifierHandler} Keyed map of functions * to match events. */ -export const isKeyboardEvent = mapValues( - modifiers, - ( /** @type {WPModifier} */ getModifiers ) => { +export const isKeyboardEvent = + /* @__PURE__ */ + mapValues( modifiers, ( /** @type {WPModifier} */ getModifiers ) => { return /** @type {WPEventKeyHandler} */ ( event, character, @@ -439,5 +438,4 @@ export const isKeyboardEvent = mapValues( return key === character.toLowerCase(); }; - } -); + } ); From 237b381a81601d119319fb075ded5028877c0a13 Mon Sep 17 00:00:00 2001 From: Nik Tsekouras Date: Thu, 5 Dec 2024 15:27:32 +0200 Subject: [PATCH 021/118] Remove words count in the multi-selection inspector (#67624) Co-authored-by: ntsekouras Co-authored-by: Mamaduka Co-authored-by: jasmussen Co-authored-by: t-hamano Co-authored-by: afercia --- .../multi-selection-inspector/index.js | 44 +++++++------------ .../multi-selection-inspector/style.scss | 12 ----- 2 files changed, 17 insertions(+), 39 deletions(-) diff --git a/packages/block-editor/src/components/multi-selection-inspector/index.js b/packages/block-editor/src/components/multi-selection-inspector/index.js index f5e7f69634768..23d890d79fff4 100644 --- a/packages/block-editor/src/components/multi-selection-inspector/index.js +++ b/packages/block-editor/src/components/multi-selection-inspector/index.js @@ -3,9 +3,8 @@ */ import { sprintf, _n } from '@wordpress/i18n'; import { useSelect } from '@wordpress/data'; -import { serialize } from '@wordpress/blocks'; -import { count as wordCount } from '@wordpress/wordcount'; import { copy } from '@wordpress/icons'; +import { __experimentalHStack as HStack } from '@wordpress/components'; /** * Internal dependencies @@ -14,33 +13,24 @@ import BlockIcon from '../block-icon'; import { store as blockEditorStore } from '../../store'; export default function MultiSelectionInspector() { - const { blocks } = useSelect( ( select ) => { - const { getMultiSelectedBlocks } = select( blockEditorStore ); - return { - blocks: getMultiSelectedBlocks(), - }; - }, [] ); - const words = wordCount( serialize( blocks ), 'words' ); - + const selectedBlockCount = useSelect( + ( select ) => select( blockEditorStore ).getSelectedBlockCount(), + [] + ); return ( -
+ -
-
- { sprintf( - /* translators: %d: number of blocks */ - _n( '%d Block', '%d Blocks', blocks.length ), - blocks.length - ) } -
-
- { sprintf( - /* translators: %d: number of words */ - _n( '%d word selected.', '%d words selected.', words ), - words - ) } -
+
+ { sprintf( + /* translators: %d: number of blocks */ + _n( '%d Block', '%d Blocks', selectedBlockCount ), + selectedBlockCount + ) }
-
+ ); } diff --git a/packages/block-editor/src/components/multi-selection-inspector/style.scss b/packages/block-editor/src/components/multi-selection-inspector/style.scss index 61bf5f8cdb382..e37245d58f5dd 100644 --- a/packages/block-editor/src/components/multi-selection-inspector/style.scss +++ b/packages/block-editor/src/components/multi-selection-inspector/style.scss @@ -1,25 +1,13 @@ .block-editor-multi-selection-inspector__card { - display: flex; - align-items: flex-start; padding: $grid-unit-20; } -.block-editor-multi-selection-inspector__card-content { - flex-grow: 1; -} - .block-editor-multi-selection-inspector__card-title { font-weight: 500; - margin-bottom: 5px; -} - -.block-editor-multi-selection-inspector__card-description { - font-size: $default-font-size; } .block-editor-multi-selection-inspector__card .block-editor-block-icon { margin-left: -2px; - margin-right: 10px; padding: 0 3px; width: $button-size; height: $button-size-small; From 3133f56f3f99543ed92557d47f364842bd31e94b Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 5 Dec 2024 14:41:46 +0100 Subject: [PATCH 022/118] Remove `__unstableMotionContext` from `@wordpress/components` (#67623) * Remove unused `__unstableMotionContext` export from `@wordpress/components` * CHANGELOG --- Co-authored-by: ciampo Co-authored-by: tyxla --- packages/components/CHANGELOG.md | 4 ++++ packages/components/src/animation/index.tsx | 1 - packages/components/src/index.ts | 6 +----- 3 files changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 1045b23bfe14f..1fd87cc958352 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Removed the unused `__unstableMotionContext` export ([#67623](https://github.com/WordPress/gutenberg/pull/67623)). + ### Enhancements - `GradientPicker`: Add `enableAlpha` prop ([#66974](https://github.com/WordPress/gutenberg/pull/66974)) diff --git a/packages/components/src/animation/index.tsx b/packages/components/src/animation/index.tsx index 6620f8d5d4eca..1b6796cd61ee9 100644 --- a/packages/components/src/animation/index.tsx +++ b/packages/components/src/animation/index.tsx @@ -9,5 +9,4 @@ export { motion as __unstableMotion, AnimatePresence as __unstableAnimatePresence, - MotionContext as __unstableMotionContext, } from 'framer-motion'; diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index e82d6da70279e..2acd609992d6a 100644 --- a/packages/components/src/index.ts +++ b/packages/components/src/index.ts @@ -21,11 +21,7 @@ export { default as Animate, getAnimateClassName as __unstableGetAnimateClassName, } from './animate'; -export { - __unstableMotion, - __unstableAnimatePresence, - __unstableMotionContext, -} from './animation'; +export { __unstableMotion, __unstableAnimatePresence } from './animation'; export { default as AnglePickerControl } from './angle-picker-control'; export { default as Autocomplete, From 1418350eb5a1f15e109fc96af385bdd029fc7304 Mon Sep 17 00:00:00 2001 From: Marin Atanasov <8436925+tyxla@users.noreply.github.com> Date: Thu, 5 Dec 2024 15:58:53 +0200 Subject: [PATCH 023/118] Preview: ArgsTable => Controls (#67582) Co-authored-by: tyxla Co-authored-by: mirka <0mirka00@git.wordpress.org> --- storybook/preview.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/storybook/preview.js b/storybook/preview.js index a7c9aa0c085fc..e173ab3ed1e26 100644 --- a/storybook/preview.js +++ b/storybook/preview.js @@ -2,7 +2,7 @@ * External dependencies */ import { - ArgsTable, + Controls, Description, Primary, Stories, @@ -114,8 +114,7 @@ export const parameters = { - { /* `story="^"` enables Controls for the primary props table */ } - + ), From c93fd2d78c9bd9fe12642dbb0813448a1534fa03 Mon Sep 17 00:00:00 2001 From: Marin Atanasov <8436925+tyxla@users.noreply.github.com> Date: Thu, 5 Dec 2024 17:38:35 +0200 Subject: [PATCH 024/118] Storybook: Update control types from `null` to `undefined` (#67581) * control type null => undefined * undefined -> false * Also disable NumberControl value control Co-authored-by: tyxla Co-authored-by: mirka <0mirka00@git.wordpress.org> --- .../stories/aliginment-toolbar.story.js | 4 ++-- .../alignment-control/stories/index.story.js | 4 ++-- .../stories/aspect-ratio-tool.story.js | 2 +- .../dimensions-tool/stories/index.story.js | 2 +- .../dimensions-tool/stories/scale-tool.story.js | 2 +- .../stories/width-height-tool.story.js | 2 +- .../resolution-tool/stories/index.story.js | 2 +- .../text-alignment-control/stories/index.story.js | 2 +- .../stories/index.story.tsx | 4 ++-- .../angle-picker-control/stories/index.story.tsx | 4 ++-- .../src/base-control/stories/index.story.tsx | 2 +- .../src/border-box-control/stories/index.story.tsx | 2 +- .../src/border-control/stories/index.story.tsx | 2 +- .../src/box-control/stories/index.story.tsx | 2 +- .../src/button-group/stories/index.story.tsx | 2 +- .../components/src/card/stories/index.story.tsx | 4 ++-- .../src/checkbox-control/stories/index.story.tsx | 2 +- .../circular-option-picker/stories/index.story.tsx | 4 ++-- .../src/color-palette/stories/index.story.tsx | 6 +++--- .../src/color-picker/stories/index.story.tsx | 4 ++-- .../src/combobox-control/stories/index.story.tsx | 2 +- .../src/composite/stories/index.story.tsx | 6 +++--- .../src/confirm-dialog/stories/index.story.tsx | 2 +- .../stories/index.story.tsx | 4 ++-- .../custom-select-control/stories/index.story.tsx | 4 ++-- .../src/date-time/stories/date-time.story.tsx | 2 +- .../src/date-time/stories/date.story.tsx | 2 +- .../src/date-time/stories/time.story.tsx | 2 +- .../src/dimension-control/stories/index.story.tsx | 2 +- .../src/disabled/stories/index.story.tsx | 4 ++-- .../components/src/divider/stories/index.story.tsx | 2 +- .../src/draggable/stories/index.story.tsx | 4 ++-- .../src/dropdown-menu/stories/index.story.tsx | 6 +++--- .../src/dropdown/stories/index.story.tsx | 14 +++++++------- .../stories/duotone-picker.story.tsx | 2 +- .../components/src/flex/stories/index.story.tsx | 2 +- .../src/font-size-picker/stories/index.story.tsx | 2 +- .../src/form-file-upload/stories/index.story.tsx | 6 +++--- .../src/form-token-field/stories/index.story.tsx | 4 ++-- .../src/gradient-picker/stories/index.story.tsx | 2 +- .../components/src/grid/stories/index.story.tsx | 2 +- .../components/src/h-stack/stories/index.story.tsx | 4 ++-- .../src/input-control/stories/index.story.tsx | 8 ++++---- .../src/item-group/stories/index.story.tsx | 4 ++-- .../src/menu-group/stories/index.story.tsx | 2 +- .../src/menu-item/stories/index.story.tsx | 2 +- .../src/menu-items-choice/stories/index.story.tsx | 2 +- .../components/src/menu/stories/index.story.tsx | 4 ++-- .../components/src/modal/stories/index.story.tsx | 4 ++-- .../stories/navigable-menu.story.tsx | 2 +- .../stories/tabbable-container.story.tsx | 2 +- .../src/navigation/stories/index.story.tsx | 8 ++++---- .../src/navigator/stories/index.story.tsx | 6 +++--- .../src/number-control/stories/index.story.tsx | 2 +- .../components/src/panel/stories/index.story.tsx | 2 +- .../src/placeholder/stories/index.story.tsx | 6 +++--- .../components/src/popover/stories/index.story.tsx | 12 ++++++------ .../src/query-controls/stories/index.story.tsx | 12 ++++++------ .../src/radio-control/stories/index.story.tsx | 2 +- .../src/radio-group/stories/index.story.tsx | 6 +++--- .../src/range-control/stories/index.story.tsx | 14 +++++++------- .../src/resizable-box/stories/index.story.tsx | 2 +- .../src/responsive-wrapper/stories/index.story.tsx | 2 +- .../components/src/sandbox/stories/index.story.tsx | 2 +- .../src/scrollable/stories/index.story.tsx | 2 +- .../src/search-control/stories/index.story.tsx | 2 +- .../src/select-control/stories/index.story.tsx | 2 +- .../src/slot-fill/stories/index.story.tsx | 4 ++-- .../src/snackbar/stories/index.story.tsx | 8 ++++---- .../components/src/snackbar/stories/list.story.tsx | 4 ++-- .../components/src/surface/stories/index.story.tsx | 2 +- .../src/text-control/stories/index.story.tsx | 2 +- .../src/textarea-control/stories/index.story.tsx | 2 +- .../src/toggle-control/stories/index.story.tsx | 2 +- .../toggle-group-control/stories/index.story.tsx | 2 +- .../components/src/toolbar/stories/index.story.tsx | 2 +- .../src/tools-panel/stories/index.story.tsx | 6 +++--- .../components/src/tooltip/stories/index.story.tsx | 2 +- .../src/tree-grid/stories/index.story.tsx | 2 +- .../src/tree-select/stories/index.story.tsx | 2 +- .../src/unit-control/stories/index.story.tsx | 8 ++++---- .../components/src/view/stories/index.story.tsx | 2 +- .../src/visually-hidden/stories/index.story.tsx | 2 +- .../components/src/z-stack/stories/index.story.tsx | 2 +- 84 files changed, 152 insertions(+), 152 deletions(-) diff --git a/packages/block-editor/src/components/alignment-control/stories/aliginment-toolbar.story.js b/packages/block-editor/src/components/alignment-control/stories/aliginment-toolbar.story.js index f2191220d6bb4..a02f0ec3dfbce 100644 --- a/packages/block-editor/src/components/alignment-control/stories/aliginment-toolbar.story.js +++ b/packages/block-editor/src/components/alignment-control/stories/aliginment-toolbar.story.js @@ -16,13 +16,13 @@ const meta = { component: AlignmentToolbar, argTypes: { value: { - control: { type: null }, + control: { type: false }, defaultValue: 'undefined', description: 'The current value of the alignment setting.', }, onChange: { action: 'onChange', - control: { type: null }, + control: { type: false }, description: "A callback function invoked when the toolbar's alignment value is changed via an interaction with any of the toolbar's buttons. Called with the new alignment value (ie: `left`, `center`, `right`, `undefined`) as the only argument.", }, diff --git a/packages/block-editor/src/components/alignment-control/stories/index.story.js b/packages/block-editor/src/components/alignment-control/stories/index.story.js index 85c92f7e0665a..ad403dcab4385 100644 --- a/packages/block-editor/src/components/alignment-control/stories/index.story.js +++ b/packages/block-editor/src/components/alignment-control/stories/index.story.js @@ -20,13 +20,13 @@ const meta = { component: AlignmentControl, argTypes: { value: { - control: { type: null }, + control: { type: false }, defaultValue: 'undefined', description: 'The current value of the alignment setting.', }, onChange: { action: 'onChange', - control: { type: null }, + control: { type: false }, description: "A callback function invoked when the toolbar's alignment value is changed via an interaction with any of the toolbar's buttons. Called with the new alignment value (ie: `left`, `center`, `right`, `undefined`) as the only argument.", }, diff --git a/packages/block-editor/src/components/dimensions-tool/stories/aspect-ratio-tool.story.js b/packages/block-editor/src/components/dimensions-tool/stories/aspect-ratio-tool.story.js index 9b82404a23c25..2acaddb57a6cd 100644 --- a/packages/block-editor/src/components/dimensions-tool/stories/aspect-ratio-tool.story.js +++ b/packages/block-editor/src/components/dimensions-tool/stories/aspect-ratio-tool.story.js @@ -16,7 +16,7 @@ export default { title: 'BlockEditor (Private APIs)/DimensionsTool/AspectRatioTool', component: AspectRatioTool, argTypes: { - panelId: { control: { type: null } }, + panelId: { control: { type: false } }, onChange: { action: 'changed' }, }, }; diff --git a/packages/block-editor/src/components/dimensions-tool/stories/index.story.js b/packages/block-editor/src/components/dimensions-tool/stories/index.story.js index d9e1a82771282..270a6b1ae4b37 100644 --- a/packages/block-editor/src/components/dimensions-tool/stories/index.story.js +++ b/packages/block-editor/src/components/dimensions-tool/stories/index.story.js @@ -16,7 +16,7 @@ export default { title: 'BlockEditor (Private APIs)/DimensionsTool', component: DimensionsTool, argTypes: { - panelId: { control: { type: null } }, + panelId: { control: { type: false } }, onChange: { action: 'changed' }, }, }; diff --git a/packages/block-editor/src/components/dimensions-tool/stories/scale-tool.story.js b/packages/block-editor/src/components/dimensions-tool/stories/scale-tool.story.js index a5ff9a81b5304..fe354168d2ae8 100644 --- a/packages/block-editor/src/components/dimensions-tool/stories/scale-tool.story.js +++ b/packages/block-editor/src/components/dimensions-tool/stories/scale-tool.story.js @@ -16,7 +16,7 @@ export default { title: 'BlockEditor (Private APIs)/DimensionsTool/ScaleTool', component: ScaleTool, argTypes: { - panelId: { control: { type: null } }, + panelId: { control: { type: false } }, onChange: { action: 'changed' }, }, }; diff --git a/packages/block-editor/src/components/dimensions-tool/stories/width-height-tool.story.js b/packages/block-editor/src/components/dimensions-tool/stories/width-height-tool.story.js index 4a9d9782ad16b..ea51455ed4b8e 100644 --- a/packages/block-editor/src/components/dimensions-tool/stories/width-height-tool.story.js +++ b/packages/block-editor/src/components/dimensions-tool/stories/width-height-tool.story.js @@ -16,7 +16,7 @@ export default { title: 'BlockEditor (Private APIs)/DimensionsTool/WidthHeightTool', component: WidthHeightTool, argTypes: { - panelId: { control: { type: null } }, + panelId: { control: { type: false } }, onChange: { action: 'changed' }, }, }; diff --git a/packages/block-editor/src/components/resolution-tool/stories/index.story.js b/packages/block-editor/src/components/resolution-tool/stories/index.story.js index ed598acd4df98..9700096b3f2e8 100644 --- a/packages/block-editor/src/components/resolution-tool/stories/index.story.js +++ b/packages/block-editor/src/components/resolution-tool/stories/index.story.js @@ -16,7 +16,7 @@ export default { title: 'BlockEditor (Private APIs)/ResolutionControl', component: ResolutionTool, argTypes: { - panelId: { control: { type: null } }, + panelId: { control: { type: false } }, onChange: { action: 'changed' }, }, }; diff --git a/packages/block-editor/src/components/text-alignment-control/stories/index.story.js b/packages/block-editor/src/components/text-alignment-control/stories/index.story.js index b2c171497acb0..80d04c0a96867 100644 --- a/packages/block-editor/src/components/text-alignment-control/stories/index.story.js +++ b/packages/block-editor/src/components/text-alignment-control/stories/index.story.js @@ -18,7 +18,7 @@ export default { control: 'check', options: [ 'left', 'center', 'right', 'justify' ], }, - value: { control: { type: null } }, + value: { control: { type: false } }, }, }; diff --git a/packages/components/src/alignment-matrix-control/stories/index.story.tsx b/packages/components/src/alignment-matrix-control/stories/index.story.tsx index 433d7540197da..992e79d51f1e8 100644 --- a/packages/components/src/alignment-matrix-control/stories/index.story.tsx +++ b/packages/components/src/alignment-matrix-control/stories/index.story.tsx @@ -24,8 +24,8 @@ const meta: Meta< typeof AlignmentMatrixControl > = { 'AlignmentMatrixControl.Icon': AlignmentMatrixControl.Icon, }, argTypes: { - onChange: { control: { type: null } }, - value: { control: { type: null } }, + onChange: { control: { type: false } }, + value: { control: { type: false } }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/angle-picker-control/stories/index.story.tsx b/packages/components/src/angle-picker-control/stories/index.story.tsx index ebbf3425d802f..9bacd4871a968 100644 --- a/packages/components/src/angle-picker-control/stories/index.story.tsx +++ b/packages/components/src/angle-picker-control/stories/index.story.tsx @@ -17,8 +17,8 @@ const meta: Meta< typeof AnglePickerControl > = { title: 'Components/AnglePickerControl', component: AnglePickerControl, argTypes: { - as: { control: { type: null } }, - value: { control: { type: null } }, + as: { control: { type: false } }, + value: { control: { type: false } }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/base-control/stories/index.story.tsx b/packages/components/src/base-control/stories/index.story.tsx index 90517c75b5e95..88ced86d3fe1b 100644 --- a/packages/components/src/base-control/stories/index.story.tsx +++ b/packages/components/src/base-control/stories/index.story.tsx @@ -18,7 +18,7 @@ const meta: Meta< typeof BaseControl > = { 'BaseControl.VisualLabel': BaseControl.VisualLabel, }, argTypes: { - children: { control: { type: null } }, + children: { control: { type: false } }, help: { control: { type: 'text' } }, label: { control: { type: 'text' } }, }, diff --git a/packages/components/src/border-box-control/stories/index.story.tsx b/packages/components/src/border-box-control/stories/index.story.tsx index 0a961d34fb93d..382ee3afa626a 100644 --- a/packages/components/src/border-box-control/stories/index.story.tsx +++ b/packages/components/src/border-box-control/stories/index.story.tsx @@ -20,7 +20,7 @@ const meta: Meta< typeof BorderBoxControl > = { component: BorderBoxControl, argTypes: { onChange: { action: 'onChange' }, - value: { control: { type: null } }, + value: { control: { type: false } }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/border-control/stories/index.story.tsx b/packages/components/src/border-control/stories/index.story.tsx index 3b5fa740d092d..48fcd37c708d0 100644 --- a/packages/components/src/border-control/stories/index.story.tsx +++ b/packages/components/src/border-control/stories/index.story.tsx @@ -23,7 +23,7 @@ const meta: Meta< typeof BorderControl > = { action: 'onChange', }, width: { control: { type: 'text' } }, - value: { control: { type: null } }, + value: { control: { type: false } }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/box-control/stories/index.story.tsx b/packages/components/src/box-control/stories/index.story.tsx index aa94e8c4bf00b..fc53b2967ac92 100644 --- a/packages/components/src/box-control/stories/index.story.tsx +++ b/packages/components/src/box-control/stories/index.story.tsx @@ -17,7 +17,7 @@ const meta: Meta< typeof BoxControl > = { title: 'Components/BoxControl', component: BoxControl, argTypes: { - values: { control: { type: null } }, + values: { control: { type: false } }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/button-group/stories/index.story.tsx b/packages/components/src/button-group/stories/index.story.tsx index f6af2416977f4..d05a32fe10e98 100644 --- a/packages/components/src/button-group/stories/index.story.tsx +++ b/packages/components/src/button-group/stories/index.story.tsx @@ -13,7 +13,7 @@ const meta: Meta< typeof ButtonGroup > = { title: 'Components/ButtonGroup', component: ButtonGroup, argTypes: { - children: { control: { type: null } }, + children: { control: { type: false } }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/card/stories/index.story.tsx b/packages/components/src/card/stories/index.story.tsx index 03726abbe754e..7534ff5345858 100644 --- a/packages/components/src/card/stories/index.story.tsx +++ b/packages/components/src/card/stories/index.story.tsx @@ -26,10 +26,10 @@ const meta: Meta< typeof Card > = { id: 'components-card', argTypes: { as: { - control: { type: null }, + control: { type: false }, }, children: { - control: { type: null }, + control: { type: false }, }, }, parameters: { diff --git a/packages/components/src/checkbox-control/stories/index.story.tsx b/packages/components/src/checkbox-control/stories/index.story.tsx index a68e380a8f733..c3e45fdd62f37 100644 --- a/packages/components/src/checkbox-control/stories/index.story.tsx +++ b/packages/components/src/checkbox-control/stories/index.story.tsx @@ -24,7 +24,7 @@ const meta: Meta< typeof CheckboxControl > = { action: 'onChange', }, checked: { - control: { type: null }, + control: { type: false }, }, help: { control: { type: 'text' } }, }, diff --git a/packages/components/src/circular-option-picker/stories/index.story.tsx b/packages/components/src/circular-option-picker/stories/index.story.tsx index d0314670fe169..ee10cb70bb55e 100644 --- a/packages/components/src/circular-option-picker/stories/index.story.tsx +++ b/packages/components/src/circular-option-picker/stories/index.story.tsx @@ -32,8 +32,8 @@ const meta: Meta< typeof CircularOptionPicker > = { CircularOptionPicker.DropdownLinkAction, }, argTypes: { - actions: { control: { type: null } }, - options: { control: { type: null } }, + actions: { control: { type: false } }, + options: { control: { type: false } }, children: { control: { type: 'text' } }, }, parameters: { diff --git a/packages/components/src/color-palette/stories/index.story.tsx b/packages/components/src/color-palette/stories/index.story.tsx index 5342fc5222be6..071a1cecfe105 100644 --- a/packages/components/src/color-palette/stories/index.story.tsx +++ b/packages/components/src/color-palette/stories/index.story.tsx @@ -18,9 +18,9 @@ const meta: Meta< typeof ColorPalette > = { id: 'components-colorpalette', component: ColorPalette, argTypes: { - as: { control: { type: null } }, - onChange: { action: 'onChange', control: { type: null } }, - value: { control: { type: null } }, + as: { control: { type: false } }, + onChange: { action: 'onChange', control: { type: false } }, + value: { control: { type: false } }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/color-picker/stories/index.story.tsx b/packages/components/src/color-picker/stories/index.story.tsx index 44040a5265c5d..5277a004a9daa 100644 --- a/packages/components/src/color-picker/stories/index.story.tsx +++ b/packages/components/src/color-picker/stories/index.story.tsx @@ -13,8 +13,8 @@ const meta: Meta< typeof ColorPicker > = { title: 'Components/Selection & Input/Color/ColorPicker', id: 'components-colorpicker', argTypes: { - as: { control: { type: null } }, - color: { control: { type: null } }, + as: { control: { type: false } }, + color: { control: { type: false } }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/combobox-control/stories/index.story.tsx b/packages/components/src/combobox-control/stories/index.story.tsx index 1b4972f167f74..a9ac2ffb74cb3 100644 --- a/packages/components/src/combobox-control/stories/index.story.tsx +++ b/packages/components/src/combobox-control/stories/index.story.tsx @@ -38,7 +38,7 @@ const meta: Meta< typeof ComboboxControl > = { id: 'components-comboboxcontrol', component: ComboboxControl, argTypes: { - value: { control: { type: null } }, + value: { control: { type: false } }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/composite/stories/index.story.tsx b/packages/components/src/composite/stories/index.story.tsx index eefcd59913475..8a6fb6e1e2d86 100644 --- a/packages/components/src/composite/stories/index.story.tsx +++ b/packages/components/src/composite/stories/index.story.tsx @@ -36,9 +36,9 @@ const meta: Meta< typeof Composite > = { 'Composite.Context': Composite.Context, }, argTypes: { - children: { control: { type: null } }, - render: { control: { type: null } }, - setActiveId: { control: { type: null } }, + children: { control: { type: false } }, + render: { control: { type: false } }, + setActiveId: { control: { type: false } }, focusLoop: { control: 'select', options: [ true, false, 'horizontal', 'vertical', 'both' ], diff --git a/packages/components/src/confirm-dialog/stories/index.story.tsx b/packages/components/src/confirm-dialog/stories/index.story.tsx index 9496d85939edf..93fc1f7605449 100644 --- a/packages/components/src/confirm-dialog/stories/index.story.tsx +++ b/packages/components/src/confirm-dialog/stories/index.story.tsx @@ -20,7 +20,7 @@ const meta: Meta< typeof ConfirmDialog > = { id: 'components-experimental-confirmdialog', argTypes: { isOpen: { - control: { type: null }, + control: { type: false }, }, }, parameters: { diff --git a/packages/components/src/custom-select-control-v2/stories/index.story.tsx b/packages/components/src/custom-select-control-v2/stories/index.story.tsx index 3595ee2e95199..e97886d67ee17 100644 --- a/packages/components/src/custom-select-control-v2/stories/index.story.tsx +++ b/packages/components/src/custom-select-control-v2/stories/index.story.tsx @@ -22,8 +22,8 @@ const meta: Meta< typeof CustomSelectControlV2 > = { 'CustomSelectControlV2.Item': CustomSelectControlV2.Item, }, argTypes: { - children: { control: { type: null } }, - value: { control: { type: null } }, + children: { control: { type: false } }, + value: { control: { type: false } }, }, tags: [ 'status-wip' ], parameters: { diff --git a/packages/components/src/custom-select-control/stories/index.story.tsx b/packages/components/src/custom-select-control/stories/index.story.tsx index 9d430b639547c..d86fd45c86b79 100644 --- a/packages/components/src/custom-select-control/stories/index.story.tsx +++ b/packages/components/src/custom-select-control/stories/index.story.tsx @@ -18,8 +18,8 @@ const meta: Meta< typeof CustomSelectControl > = { component: CustomSelectControl, id: 'components-customselectcontrol', argTypes: { - onChange: { control: { type: null } }, - value: { control: { type: null } }, + onChange: { control: { type: false } }, + value: { control: { type: false } }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/date-time/stories/date-time.story.tsx b/packages/components/src/date-time/stories/date-time.story.tsx index 7636e2fdc80a3..b2ee1fa8d9a9c 100644 --- a/packages/components/src/date-time/stories/date-time.story.tsx +++ b/packages/components/src/date-time/stories/date-time.story.tsx @@ -20,7 +20,7 @@ const meta: Meta< typeof DateTimePicker > = { component: DateTimePicker, argTypes: { currentDate: { control: 'date' }, - onChange: { action: 'onChange', control: { type: null } }, + onChange: { action: 'onChange', control: { type: false } }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/date-time/stories/date.story.tsx b/packages/components/src/date-time/stories/date.story.tsx index 36fef0c5bfd19..b90d3c2da555a 100644 --- a/packages/components/src/date-time/stories/date.story.tsx +++ b/packages/components/src/date-time/stories/date.story.tsx @@ -20,7 +20,7 @@ const meta: Meta< typeof DatePicker > = { component: DatePicker, argTypes: { currentDate: { control: 'date' }, - onChange: { action: 'onChange', control: { type: null } }, + onChange: { action: 'onChange', control: { type: false } }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/date-time/stories/time.story.tsx b/packages/components/src/date-time/stories/time.story.tsx index c19b5b4f48f5c..c7fee061d3ef8 100644 --- a/packages/components/src/date-time/stories/time.story.tsx +++ b/packages/components/src/date-time/stories/time.story.tsx @@ -21,7 +21,7 @@ const meta: Meta< typeof TimePicker > = { subcomponents: { 'TimePicker.TimeInput': TimePicker.TimeInput }, argTypes: { currentTime: { control: 'date' }, - onChange: { action: 'onChange', control: { type: null } }, + onChange: { action: 'onChange', control: { type: false } }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/dimension-control/stories/index.story.tsx b/packages/components/src/dimension-control/stories/index.story.tsx index 61fd0aae4ee76..7b059540a883b 100644 --- a/packages/components/src/dimension-control/stories/index.story.tsx +++ b/packages/components/src/dimension-control/stories/index.story.tsx @@ -24,7 +24,7 @@ const meta: Meta< typeof DimensionControl > = { id: 'components-dimensioncontrol', argTypes: { onChange: { action: 'onChange' }, - value: { control: { type: null } }, + value: { control: { type: false } }, icon: { control: { type: 'select' }, options: [ '-', 'desktop', 'tablet', 'mobile' ], diff --git a/packages/components/src/disabled/stories/index.story.tsx b/packages/components/src/disabled/stories/index.story.tsx index 29d9c925f4f5d..b89026a8b548f 100644 --- a/packages/components/src/disabled/stories/index.story.tsx +++ b/packages/components/src/disabled/stories/index.story.tsx @@ -22,8 +22,8 @@ const meta: Meta< typeof Disabled > = { id: 'components-disabled', component: Disabled, argTypes: { - as: { control: { type: null } }, - children: { control: { type: null } }, + as: { control: { type: false } }, + children: { control: { type: false } }, }, parameters: { controls: { diff --git a/packages/components/src/divider/stories/index.story.tsx b/packages/components/src/divider/stories/index.story.tsx index 4910c1b591c52..fe3fba971b28f 100644 --- a/packages/components/src/divider/stories/index.story.tsx +++ b/packages/components/src/divider/stories/index.story.tsx @@ -24,7 +24,7 @@ const meta: Meta< typeof Divider > = { control: { type: 'text' }, }, wrapElement: { - control: { type: null }, + control: { type: false }, }, ref: { table: { diff --git a/packages/components/src/draggable/stories/index.story.tsx b/packages/components/src/draggable/stories/index.story.tsx index 6ecb54a07a3fb..54fdeaadd147e 100644 --- a/packages/components/src/draggable/stories/index.story.tsx +++ b/packages/components/src/draggable/stories/index.story.tsx @@ -21,8 +21,8 @@ const meta: Meta< typeof Draggable > = { title: 'Components/Utilities/Draggable', id: 'components-draggable', argTypes: { - elementId: { control: { type: null } }, - __experimentalDragComponent: { control: { type: null } }, + elementId: { control: { type: false } }, + __experimentalDragComponent: { control: { type: false } }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/dropdown-menu/stories/index.story.tsx b/packages/components/src/dropdown-menu/stories/index.story.tsx index 8c13a0b57dbda..5277d4f54a4df 100644 --- a/packages/components/src/dropdown-menu/stories/index.story.tsx +++ b/packages/components/src/dropdown-menu/stories/index.story.tsx @@ -37,9 +37,9 @@ const meta: Meta< typeof DropdownMenu > = { mapping: { menu, chevronDown, more }, control: { type: 'select' }, }, - open: { control: { type: null } }, - defaultOpen: { control: { type: null } }, - onToggle: { control: { type: null } }, + open: { control: { type: false } }, + defaultOpen: { control: { type: false } }, + onToggle: { control: { type: false } }, }, }; export default meta; diff --git a/packages/components/src/dropdown/stories/index.story.tsx b/packages/components/src/dropdown/stories/index.story.tsx index bfa51a07a9717..8adb10574fc87 100644 --- a/packages/components/src/dropdown/stories/index.story.tsx +++ b/packages/components/src/dropdown/stories/index.story.tsx @@ -25,13 +25,13 @@ const meta: Meta< typeof Dropdown > = { type: 'radio', }, }, - position: { control: { type: null } }, - renderContent: { control: { type: null } }, - renderToggle: { control: { type: null } }, - open: { control: { type: null } }, - defaultOpen: { control: { type: null } }, - onToggle: { control: { type: null } }, - onClose: { control: { type: null } }, + position: { control: { type: false } }, + renderContent: { control: { type: false } }, + renderToggle: { control: { type: false } }, + open: { control: { type: false } }, + defaultOpen: { control: { type: false } }, + onToggle: { control: { type: false } }, + onClose: { control: { type: false } }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/duotone-picker/stories/duotone-picker.story.tsx b/packages/components/src/duotone-picker/stories/duotone-picker.story.tsx index f06d0ee40a6ce..014ab4b22443e 100644 --- a/packages/components/src/duotone-picker/stories/duotone-picker.story.tsx +++ b/packages/components/src/duotone-picker/stories/duotone-picker.story.tsx @@ -19,7 +19,7 @@ const meta: Meta< typeof DuotonePicker > = { component: DuotonePicker, argTypes: { onChange: { action: 'onChange' }, - value: { control: { type: null } }, + value: { control: { type: false } }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/flex/stories/index.story.tsx b/packages/components/src/flex/stories/index.story.tsx index 142f279665721..8f57d01c4de62 100644 --- a/packages/components/src/flex/stories/index.story.tsx +++ b/packages/components/src/flex/stories/index.story.tsx @@ -17,7 +17,7 @@ const meta: Meta< typeof Flex > = { argTypes: { align: { control: { type: 'text' } }, as: { control: { type: 'text' } }, - children: { control: { type: null } }, + children: { control: { type: false } }, gap: { control: { type: 'text' } }, justify: { control: { type: 'text' } }, // Disabled isReversed because it's deprecated. diff --git a/packages/components/src/font-size-picker/stories/index.story.tsx b/packages/components/src/font-size-picker/stories/index.story.tsx index a0d83756ca1ec..4bd50293788bb 100644 --- a/packages/components/src/font-size-picker/stories/index.story.tsx +++ b/packages/components/src/font-size-picker/stories/index.story.tsx @@ -17,7 +17,7 @@ const meta: Meta< typeof FontSizePicker > = { title: 'Components/FontSizePicker', component: FontSizePicker, argTypes: { - value: { control: { type: null } }, + value: { control: { type: false } }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/form-file-upload/stories/index.story.tsx b/packages/components/src/form-file-upload/stories/index.story.tsx index 176d6b2af6098..3f961b87b32f3 100644 --- a/packages/components/src/form-file-upload/stories/index.story.tsx +++ b/packages/components/src/form-file-upload/stories/index.story.tsx @@ -18,9 +18,9 @@ const meta: Meta< typeof FormFileUpload > = { id: 'components-formfileupload', component: FormFileUpload, argTypes: { - icon: { control: { type: null } }, - onChange: { action: 'onChange', control: { type: null } }, - onClick: { control: { type: null } }, + icon: { control: { type: false } }, + onChange: { action: 'onChange', control: { type: false } }, + onClick: { control: { type: false } }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/form-token-field/stories/index.story.tsx b/packages/components/src/form-token-field/stories/index.story.tsx index c43d155c809bb..6e895989c164b 100644 --- a/packages/components/src/form-token-field/stories/index.story.tsx +++ b/packages/components/src/form-token-field/stories/index.story.tsx @@ -19,10 +19,10 @@ const meta: Meta< typeof FormTokenField > = { id: 'components-formtokenfield', argTypes: { value: { - control: { type: null }, + control: { type: false }, }, __experimentalValidateInput: { - control: { type: null }, + control: { type: false }, }, }, parameters: { diff --git a/packages/components/src/gradient-picker/stories/index.story.tsx b/packages/components/src/gradient-picker/stories/index.story.tsx index b2b73b8b60996..5e031a3dad00d 100644 --- a/packages/components/src/gradient-picker/stories/index.story.tsx +++ b/packages/components/src/gradient-picker/stories/index.story.tsx @@ -22,7 +22,7 @@ const meta: Meta< typeof GradientPicker > = { actions: { argTypesRegex: '^on.*' }, }, argTypes: { - value: { control: { type: null } }, + value: { control: { type: false } }, }, }; export default meta; diff --git a/packages/components/src/grid/stories/index.story.tsx b/packages/components/src/grid/stories/index.story.tsx index 171b324e033c0..781fd04a67c28 100644 --- a/packages/components/src/grid/stories/index.story.tsx +++ b/packages/components/src/grid/stories/index.story.tsx @@ -15,7 +15,7 @@ const meta: Meta< typeof Grid > = { argTypes: { as: { control: { type: 'text' } }, align: { control: { type: 'text' } }, - children: { control: { type: null } }, + children: { control: { type: false } }, columnGap: { control: { type: 'text' } }, columns: { table: { type: { summary: 'number' } }, diff --git a/packages/components/src/h-stack/stories/index.story.tsx b/packages/components/src/h-stack/stories/index.story.tsx index 025c3384bddce..bf13cb19471ff 100644 --- a/packages/components/src/h-stack/stories/index.story.tsx +++ b/packages/components/src/h-stack/stories/index.story.tsx @@ -46,10 +46,10 @@ const meta: Meta< typeof HStack > = { id: 'components-experimental-hstack', argTypes: { as: { - control: { type: null }, + control: { type: false }, }, children: { - control: { type: null }, + control: { type: false }, }, alignment: { control: { type: 'select' }, diff --git a/packages/components/src/input-control/stories/index.story.tsx b/packages/components/src/input-control/stories/index.story.tsx index 8cef6a5d37c81..38fc03f13f004 100644 --- a/packages/components/src/input-control/stories/index.story.tsx +++ b/packages/components/src/input-control/stories/index.story.tsx @@ -23,10 +23,10 @@ const meta: Meta< typeof InputControl > = { subcomponents: { InputControlPrefixWrapper, InputControlSuffixWrapper }, argTypes: { __unstableInputWidth: { control: { type: 'text' } }, - __unstableStateReducer: { control: { type: null } }, - onChange: { control: { type: null } }, - prefix: { control: { type: null } }, - suffix: { control: { type: null } }, + __unstableStateReducer: { control: { type: false } }, + onChange: { control: { type: false } }, + prefix: { control: { type: false } }, + suffix: { control: { type: false } }, type: { control: { type: 'text' } }, value: { control: { disable: true } }, }, diff --git a/packages/components/src/item-group/stories/index.story.tsx b/packages/components/src/item-group/stories/index.story.tsx index 99309b81ea314..3f1f310163db8 100644 --- a/packages/components/src/item-group/stories/index.story.tsx +++ b/packages/components/src/item-group/stories/index.story.tsx @@ -17,8 +17,8 @@ const meta: Meta< typeof ItemGroup > = { subcomponents: { Item }, title: 'Components (Experimental)/ItemGroup', argTypes: { - as: { control: { type: null } }, - children: { control: { type: null } }, + as: { control: { type: false } }, + children: { control: { type: false } }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/menu-group/stories/index.story.tsx b/packages/components/src/menu-group/stories/index.story.tsx index f53cbbf5b7b0a..f24fcac19982e 100644 --- a/packages/components/src/menu-group/stories/index.story.tsx +++ b/packages/components/src/menu-group/stories/index.story.tsx @@ -20,7 +20,7 @@ const meta: Meta< typeof MenuGroup > = { component: MenuGroup, id: 'components-menugroup', argTypes: { - children: { control: { type: null } }, + children: { control: { type: false } }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/menu-item/stories/index.story.tsx b/packages/components/src/menu-item/stories/index.story.tsx index 24c592b66f3ae..2f96cb3375293 100644 --- a/packages/components/src/menu-item/stories/index.story.tsx +++ b/packages/components/src/menu-item/stories/index.story.tsx @@ -20,7 +20,7 @@ const meta: Meta< typeof MenuItem > = { title: 'Components/Actions/MenuItem', id: 'components-menuitem', argTypes: { - children: { control: { type: null } }, + children: { control: { type: false } }, icon: { control: { type: 'select' }, options: [ 'check', 'link', 'more' ], diff --git a/packages/components/src/menu-items-choice/stories/index.story.tsx b/packages/components/src/menu-items-choice/stories/index.story.tsx index f4a14054e8f27..c1b88444a1bdc 100644 --- a/packages/components/src/menu-items-choice/stories/index.story.tsx +++ b/packages/components/src/menu-items-choice/stories/index.story.tsx @@ -21,7 +21,7 @@ const meta: Meta< typeof MenuItemsChoice > = { argTypes: { onHover: { action: 'onHover' }, onSelect: { action: 'onSelect' }, - value: { control: { type: null } }, + value: { control: { type: false } }, }, parameters: { controls: { diff --git a/packages/components/src/menu/stories/index.story.tsx b/packages/components/src/menu/stories/index.story.tsx index 92501c3326958..34fae3a8d215e 100644 --- a/packages/components/src/menu/stories/index.story.tsx +++ b/packages/components/src/menu/stories/index.story.tsx @@ -46,8 +46,8 @@ const meta: Meta< typeof Menu > = { ItemHelpText: Menu.ItemHelpText, }, argTypes: { - children: { control: { type: null } }, - trigger: { control: { type: null } }, + children: { control: { type: false } }, + trigger: { control: { type: false } }, }, tags: [ 'status-private' ], parameters: { diff --git a/packages/components/src/modal/stories/index.story.tsx b/packages/components/src/modal/stories/index.story.tsx index 880688ed5c51c..20d16701af337 100644 --- a/packages/components/src/modal/stories/index.story.tsx +++ b/packages/components/src/modal/stories/index.story.tsx @@ -23,10 +23,10 @@ const meta: Meta< typeof Modal > = { id: 'components-modal', argTypes: { children: { - control: { type: null }, + control: { type: false }, }, onKeyDown: { - control: { type: null }, + control: { type: false }, }, focusOnMount: { options: [ true, false, 'firstElement', 'firstContentElement' ], diff --git a/packages/components/src/navigable-container/stories/navigable-menu.story.tsx b/packages/components/src/navigable-container/stories/navigable-menu.story.tsx index 2ad7e028d6faf..05d71e56e754a 100644 --- a/packages/components/src/navigable-container/stories/navigable-menu.story.tsx +++ b/packages/components/src/navigable-container/stories/navigable-menu.story.tsx @@ -13,7 +13,7 @@ const meta: Meta< typeof NavigableMenu > = { id: 'components-navigablemenu', component: NavigableMenu, argTypes: { - children: { control: { type: null } }, + children: { control: { type: false } }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/navigable-container/stories/tabbable-container.story.tsx b/packages/components/src/navigable-container/stories/tabbable-container.story.tsx index 07c87a0c20f1b..69a09d78c9b62 100644 --- a/packages/components/src/navigable-container/stories/tabbable-container.story.tsx +++ b/packages/components/src/navigable-container/stories/tabbable-container.story.tsx @@ -13,7 +13,7 @@ const meta: Meta< typeof TabbableContainer > = { id: 'components-tabbablecontainer', component: TabbableContainer, argTypes: { - children: { control: { type: null } }, + children: { control: { type: false } }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/navigation/stories/index.story.tsx b/packages/components/src/navigation/stories/index.story.tsx index 2f09ace29f16e..3dd5c02f416b2 100644 --- a/packages/components/src/navigation/stories/index.story.tsx +++ b/packages/components/src/navigation/stories/index.story.tsx @@ -39,10 +39,10 @@ const meta: Meta< typeof Navigation > = { NavigationMenu, }, argTypes: { - activeItem: { control: { type: null } }, - activeMenu: { control: { type: null } }, - children: { control: { type: null } }, - onActivateMenu: { control: { type: null } }, + activeItem: { control: { type: false } }, + activeMenu: { control: { type: false } }, + children: { control: { type: false } }, + onActivateMenu: { control: { type: false } }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/navigator/stories/index.story.tsx b/packages/components/src/navigator/stories/index.story.tsx index bd2cdc17a1263..bf78b9fcc2f86 100644 --- a/packages/components/src/navigator/stories/index.story.tsx +++ b/packages/components/src/navigator/stories/index.story.tsx @@ -24,9 +24,9 @@ const meta: Meta< typeof Navigator > = { title: 'Components/Navigation/Navigator', id: 'components-navigator', argTypes: { - as: { control: { type: null } }, - children: { control: { type: null } }, - initialPath: { control: { type: null } }, + as: { control: { type: false } }, + children: { control: { type: false } }, + initialPath: { control: { type: false } }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/number-control/stories/index.story.tsx b/packages/components/src/number-control/stories/index.story.tsx index 8710839fea6ea..4d2fcf30ebcef 100644 --- a/packages/components/src/number-control/stories/index.story.tsx +++ b/packages/components/src/number-control/stories/index.story.tsx @@ -23,7 +23,7 @@ const meta: Meta< typeof NumberControl > = { step: { control: { type: 'text' } }, suffix: { control: { type: 'text' } }, type: { control: { type: 'text' } }, - value: { control: null }, + value: { control: { type: false } }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/panel/stories/index.story.tsx b/packages/components/src/panel/stories/index.story.tsx index af9cf626f8eec..d4b159199e7b2 100644 --- a/packages/components/src/panel/stories/index.story.tsx +++ b/packages/components/src/panel/stories/index.story.tsx @@ -23,7 +23,7 @@ const meta: Meta< typeof Panel > = { // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 subcomponents: { PanelRow, PanelBody }, argTypes: { - children: { control: { type: null } }, + children: { control: { type: false } }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/placeholder/stories/index.story.tsx b/packages/components/src/placeholder/stories/index.story.tsx index 1a0db673320bc..9428299e13847 100644 --- a/packages/components/src/placeholder/stories/index.story.tsx +++ b/packages/components/src/placeholder/stories/index.story.tsx @@ -21,9 +21,9 @@ const meta: Meta< typeof Placeholder > = { component: Placeholder, title: 'Components/Placeholder', argTypes: { - children: { control: { type: null } }, - notices: { control: { type: null } }, - preview: { control: { type: null } }, + children: { control: { type: false } }, + notices: { control: { type: false } }, + preview: { control: { type: false } }, icon: { control: { type: 'select' }, options: Object.keys( ICONS ), diff --git a/packages/components/src/popover/stories/index.story.tsx b/packages/components/src/popover/stories/index.story.tsx index 3d804f5d24d5c..3b783ec9f9746 100644 --- a/packages/components/src/popover/stories/index.story.tsx +++ b/packages/components/src/popover/stories/index.story.tsx @@ -37,18 +37,18 @@ const meta: Meta< typeof Popover > = { id: 'components-popover', component: Popover, argTypes: { - anchor: { control: { type: null } }, - anchorRef: { control: { type: null } }, - anchorRect: { control: { type: null } }, - children: { control: { type: null } }, + anchor: { control: { type: false } }, + anchorRef: { control: { type: false } }, + anchorRect: { control: { type: false } }, + children: { control: { type: false } }, focusOnMount: { control: { type: 'select' }, options: [ 'firstElement', true, false ], }, - getAnchorRect: { control: { type: null } }, + getAnchorRect: { control: { type: false } }, onClose: { action: 'onClose' }, onFocusOutside: { action: 'onFocusOutside' }, - __unstableSlotName: { control: { type: null } }, + __unstableSlotName: { control: { type: false } }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/query-controls/stories/index.story.tsx b/packages/components/src/query-controls/stories/index.story.tsx index 04fe185a59eac..d89d91ecd02bd 100644 --- a/packages/components/src/query-controls/stories/index.story.tsx +++ b/packages/components/src/query-controls/stories/index.story.tsx @@ -22,12 +22,12 @@ const meta: Meta< typeof QueryControls > = { title: 'Components/QueryControls', component: QueryControls, argTypes: { - numberOfItems: { control: { type: null } }, - order: { control: { type: null } }, - orderBy: { control: { type: null } }, - selectedAuthorId: { control: { type: null } }, - selectedCategories: { control: { type: null } }, - selectedCategoryId: { control: { type: null } }, + numberOfItems: { control: { type: false } }, + order: { control: { type: false } }, + orderBy: { control: { type: false } }, + selectedAuthorId: { control: { type: false } }, + selectedCategories: { control: { type: false } }, + selectedCategoryId: { control: { type: false } }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/radio-control/stories/index.story.tsx b/packages/components/src/radio-control/stories/index.story.tsx index 3c76f7610d0d7..6291f8fe5cbe3 100644 --- a/packages/components/src/radio-control/stories/index.story.tsx +++ b/packages/components/src/radio-control/stories/index.story.tsx @@ -22,7 +22,7 @@ const meta: Meta< typeof RadioControl > = { action: 'onChange', }, selected: { - control: { type: null }, + control: { type: false }, }, label: { control: { type: 'text' }, diff --git a/packages/components/src/radio-group/stories/index.story.tsx b/packages/components/src/radio-group/stories/index.story.tsx index a19fb077e7ec4..d453acfb81d75 100644 --- a/packages/components/src/radio-group/stories/index.story.tsx +++ b/packages/components/src/radio-group/stories/index.story.tsx @@ -21,8 +21,8 @@ const meta: Meta< typeof RadioGroup > = { // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 subcomponents: { Radio }, argTypes: { - onChange: { control: { type: null } }, - children: { control: { type: null } }, + onChange: { control: { type: false } }, + children: { control: { type: false } }, checked: { control: { type: 'text' } }, }, parameters: { @@ -99,5 +99,5 @@ Controlled.args = { id: 'controlled-radiogroup', }; Controlled.argTypes = { - checked: { control: { type: null } }, + checked: { control: { type: false } }, }; diff --git a/packages/components/src/range-control/stories/index.story.tsx b/packages/components/src/range-control/stories/index.story.tsx index 86a2609b8db64..fd2ab67e652f1 100644 --- a/packages/components/src/range-control/stories/index.story.tsx +++ b/packages/components/src/range-control/stories/index.story.tsx @@ -33,18 +33,18 @@ const meta: Meta< typeof RangeControl > = { }, color: { control: { type: 'color' } }, help: { control: { type: 'text' } }, - icon: { control: { type: null } }, + icon: { control: { type: false } }, marks: { control: { type: 'object' } }, - onBlur: { control: { type: null } }, - onChange: { control: { type: null } }, - onFocus: { control: { type: null } }, - onMouseLeave: { control: { type: null } }, - onMouseMove: { control: { type: null } }, + onBlur: { control: { type: false } }, + onChange: { control: { type: false } }, + onFocus: { control: { type: false } }, + onMouseLeave: { control: { type: false } }, + onMouseMove: { control: { type: false } }, railColor: { control: { type: 'color' } }, step: { control: { type: 'number' } }, trackColor: { control: { type: 'color' } }, type: { control: { type: 'check' }, options: [ 'stepper' ] }, - value: { control: { type: null } }, + value: { control: { type: false } }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/resizable-box/stories/index.story.tsx b/packages/components/src/resizable-box/stories/index.story.tsx index 489a094c33f11..9b00004bfc1b5 100644 --- a/packages/components/src/resizable-box/stories/index.story.tsx +++ b/packages/components/src/resizable-box/stories/index.story.tsx @@ -18,7 +18,7 @@ const meta: Meta< typeof ResizableBox > = { id: 'components-resizablebox', component: ResizableBox, argTypes: { - children: { control: { type: null } }, + children: { control: { type: false } }, enable: { control: 'object' }, onResizeStop: { action: 'onResizeStop' }, }, diff --git a/packages/components/src/responsive-wrapper/stories/index.story.tsx b/packages/components/src/responsive-wrapper/stories/index.story.tsx index d684a00c87002..cee9c57189651 100644 --- a/packages/components/src/responsive-wrapper/stories/index.story.tsx +++ b/packages/components/src/responsive-wrapper/stories/index.story.tsx @@ -13,7 +13,7 @@ const meta: Meta< typeof ResponsiveWrapper > = { title: 'Components/Layout/ResponsiveWrapper', id: 'components-responsivewrapper', argTypes: { - children: { control: { type: null } }, + children: { control: { type: false } }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/sandbox/stories/index.story.tsx b/packages/components/src/sandbox/stories/index.story.tsx index 0d083eac3e902..21cdb529ae9e2 100644 --- a/packages/components/src/sandbox/stories/index.story.tsx +++ b/packages/components/src/sandbox/stories/index.story.tsx @@ -13,7 +13,7 @@ const meta: Meta< typeof SandBox > = { title: 'Components/Utilities/SandBox', id: 'components-sandbox', argTypes: { - onFocus: { control: { type: null } }, + onFocus: { control: { type: false } }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/scrollable/stories/index.story.tsx b/packages/components/src/scrollable/stories/index.story.tsx index 53d4919de3aab..4c9d0eaa786c4 100644 --- a/packages/components/src/scrollable/stories/index.story.tsx +++ b/packages/components/src/scrollable/stories/index.story.tsx @@ -22,7 +22,7 @@ const meta: Meta< typeof Scrollable > = { control: { type: 'text' }, }, children: { - control: { type: null }, + control: { type: false }, }, }, parameters: { diff --git a/packages/components/src/search-control/stories/index.story.tsx b/packages/components/src/search-control/stories/index.story.tsx index 5e5f6b594e73e..46b45c1cbd5d7 100644 --- a/packages/components/src/search-control/stories/index.story.tsx +++ b/packages/components/src/search-control/stories/index.story.tsx @@ -19,7 +19,7 @@ const meta: Meta< typeof SearchControl > = { component: SearchControl, argTypes: { onChange: { action: 'onChange' }, - value: { control: { type: null } }, + value: { control: { type: false } }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/select-control/stories/index.story.tsx b/packages/components/src/select-control/stories/index.story.tsx index e9461ef6904f6..6f60977eaa1fe 100644 --- a/packages/components/src/select-control/stories/index.story.tsx +++ b/packages/components/src/select-control/stories/index.story.tsx @@ -23,7 +23,7 @@ const meta: Meta< typeof SelectControl > = { label: { control: { type: 'text' } }, prefix: { control: { type: 'text' } }, suffix: { control: { type: 'text' } }, - value: { control: { type: null } }, + value: { control: { type: false } }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/slot-fill/stories/index.story.tsx b/packages/components/src/slot-fill/stories/index.story.tsx index bc6c4f57ad9ce..c727ba543e608 100644 --- a/packages/components/src/slot-fill/stories/index.story.tsx +++ b/packages/components/src/slot-fill/stories/index.story.tsx @@ -20,9 +20,9 @@ const meta: Meta< typeof Slot > = { // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 subcomponents: { Fill, SlotFillProvider }, argTypes: { - name: { control: { type: null } }, + name: { control: { type: false } }, as: { control: { type: 'text' } }, - fillProps: { control: { type: null } }, + fillProps: { control: { type: false } }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/snackbar/stories/index.story.tsx b/packages/components/src/snackbar/stories/index.story.tsx index 9bd1dae42b71b..acfb58e9b3f23 100644 --- a/packages/components/src/snackbar/stories/index.story.tsx +++ b/packages/components/src/snackbar/stories/index.story.tsx @@ -19,17 +19,17 @@ const meta: Meta< typeof Snackbar > = { id: 'components-snackbar', component: Snackbar, argTypes: { - as: { control: { type: null } }, + as: { control: { type: false } }, onRemove: { action: 'onRemove', - control: { type: null }, + control: { type: false }, }, onDismiss: { action: 'onDismiss', - control: { type: null }, + control: { type: false }, }, listRef: { - control: { type: null }, + control: { type: false }, }, }, parameters: { diff --git a/packages/components/src/snackbar/stories/list.story.tsx b/packages/components/src/snackbar/stories/list.story.tsx index 1f93f374ec174..fb6aa7cc97ead 100644 --- a/packages/components/src/snackbar/stories/list.story.tsx +++ b/packages/components/src/snackbar/stories/list.story.tsx @@ -18,10 +18,10 @@ const meta: Meta< typeof SnackbarList > = { id: 'components-snackbarlist', component: SnackbarList, argTypes: { - as: { control: { type: null } }, + as: { control: { type: false } }, onRemove: { action: 'onRemove', - control: { type: null }, + control: { type: false }, }, }, parameters: { diff --git a/packages/components/src/surface/stories/index.story.tsx b/packages/components/src/surface/stories/index.story.tsx index 7f6790d09c848..4237fe09cc851 100644 --- a/packages/components/src/surface/stories/index.story.tsx +++ b/packages/components/src/surface/stories/index.story.tsx @@ -13,7 +13,7 @@ const meta: Meta< typeof Surface > = { component: Surface, title: 'Components (Experimental)/Surface', argTypes: { - children: { control: { type: null } }, + children: { control: { type: false } }, as: { control: { type: 'text' } }, }, parameters: { diff --git a/packages/components/src/text-control/stories/index.story.tsx b/packages/components/src/text-control/stories/index.story.tsx index 481ae714f0ce2..05e9493d7126a 100644 --- a/packages/components/src/text-control/stories/index.story.tsx +++ b/packages/components/src/text-control/stories/index.story.tsx @@ -21,7 +21,7 @@ const meta: Meta< typeof TextControl > = { help: { control: { type: 'text' } }, label: { control: { type: 'text' } }, onChange: { action: 'onChange' }, - value: { control: { type: null } }, + value: { control: { type: false } }, }, parameters: { controls: { diff --git a/packages/components/src/textarea-control/stories/index.story.tsx b/packages/components/src/textarea-control/stories/index.story.tsx index c303883a92c5d..ccb0fabb1cb8e 100644 --- a/packages/components/src/textarea-control/stories/index.story.tsx +++ b/packages/components/src/textarea-control/stories/index.story.tsx @@ -21,7 +21,7 @@ const meta: Meta< typeof TextareaControl > = { onChange: { action: 'onChange' }, label: { control: { type: 'text' } }, help: { control: { type: 'text' } }, - value: { control: { type: null } }, + value: { control: { type: false } }, }, parameters: { controls: { diff --git a/packages/components/src/toggle-control/stories/index.story.tsx b/packages/components/src/toggle-control/stories/index.story.tsx index b9db0474bc760..d731ccc066fb0 100644 --- a/packages/components/src/toggle-control/stories/index.story.tsx +++ b/packages/components/src/toggle-control/stories/index.story.tsx @@ -18,7 +18,7 @@ const meta: Meta< typeof ToggleControl > = { id: 'components-togglecontrol', component: ToggleControl, argTypes: { - checked: { control: { type: null } }, + checked: { control: { type: false } }, help: { control: { type: 'text' } }, label: { control: { type: 'text' } }, onChange: { action: 'onChange' }, diff --git a/packages/components/src/toggle-group-control/stories/index.story.tsx b/packages/components/src/toggle-group-control/stories/index.story.tsx index bd6c67e253887..a2e15a5cdc540 100644 --- a/packages/components/src/toggle-group-control/stories/index.story.tsx +++ b/packages/components/src/toggle-group-control/stories/index.story.tsx @@ -32,7 +32,7 @@ const meta: Meta< typeof ToggleGroupControl > = { argTypes: { help: { control: { type: 'text' } }, onChange: { action: 'onChange' }, - value: { control: { type: null } }, + value: { control: { type: false } }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/toolbar/stories/index.story.tsx b/packages/components/src/toolbar/stories/index.story.tsx index e4fb3b07e1c90..b374fa5931fde 100644 --- a/packages/components/src/toolbar/stories/index.story.tsx +++ b/packages/components/src/toolbar/stories/index.story.tsx @@ -51,7 +51,7 @@ const meta: Meta< typeof Toolbar > = { ToolbarDropdownMenu, }, argTypes: { - children: { control: { type: null } }, + children: { control: { type: false } }, variant: { options: [ undefined, 'unstyled' ], control: { type: 'radio' }, diff --git a/packages/components/src/tools-panel/stories/index.story.tsx b/packages/components/src/tools-panel/stories/index.story.tsx index 0fbdae794d838..4ea70fcad899e 100644 --- a/packages/components/src/tools-panel/stories/index.story.tsx +++ b/packages/components/src/tools-panel/stories/index.story.tsx @@ -31,9 +31,9 @@ const meta: Meta< typeof ToolsPanel > = { // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 subcomponents: { ToolsPanelItem }, argTypes: { - as: { control: { type: null } }, - children: { control: { type: null } }, - panelId: { control: { type: null } }, + as: { control: { type: false } }, + children: { control: { type: false } }, + panelId: { control: { type: false } }, resetAll: { action: 'resetAll' }, }, parameters: { diff --git a/packages/components/src/tooltip/stories/index.story.tsx b/packages/components/src/tooltip/stories/index.story.tsx index 4bddba0ff7b66..ae676dc148a72 100644 --- a/packages/components/src/tooltip/stories/index.story.tsx +++ b/packages/components/src/tooltip/stories/index.story.tsx @@ -19,7 +19,7 @@ const meta: Meta< typeof Tooltip > = { id: 'components-tooltip', component: Tooltip, argTypes: { - children: { control: { type: null } }, + children: { control: { type: false } }, position: { control: { type: 'select' }, options: [ diff --git a/packages/components/src/tree-grid/stories/index.story.tsx b/packages/components/src/tree-grid/stories/index.story.tsx index 5a1ed95e1fd62..eddaeda514fde 100644 --- a/packages/components/src/tree-grid/stories/index.story.tsx +++ b/packages/components/src/tree-grid/stories/index.story.tsx @@ -22,7 +22,7 @@ const meta: Meta< typeof TreeGrid > = { // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 subcomponents: { TreeGridRow, TreeGridCell }, argTypes: { - children: { control: { type: null } }, + children: { control: { type: false } }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/tree-select/stories/index.story.tsx b/packages/components/src/tree-select/stories/index.story.tsx index 703147dc14534..23cb1b9e5aca4 100644 --- a/packages/components/src/tree-select/stories/index.story.tsx +++ b/packages/components/src/tree-select/stories/index.story.tsx @@ -22,7 +22,7 @@ const meta: Meta< typeof TreeSelect > = { label: { control: { type: 'text' } }, prefix: { control: { type: 'text' } }, suffix: { control: { type: 'text' } }, - selectedId: { control: { type: null } }, + selectedId: { control: { type: false } }, }, parameters: { controls: { diff --git a/packages/components/src/unit-control/stories/index.story.tsx b/packages/components/src/unit-control/stories/index.story.tsx index 87628c4644116..b6710fb770229 100644 --- a/packages/components/src/unit-control/stories/index.story.tsx +++ b/packages/components/src/unit-control/stories/index.story.tsx @@ -20,11 +20,11 @@ const meta: Meta< typeof UnitControl > = { id: 'components-experimental-unitcontrol', argTypes: { __unstableInputWidth: { control: { type: 'text' } }, - __unstableStateReducer: { control: { type: null } }, - onChange: { control: { type: null } }, - onUnitChange: { control: { type: null } }, + __unstableStateReducer: { control: { type: false } }, + onChange: { control: { type: false } }, + onUnitChange: { control: { type: false } }, prefix: { control: { type: 'text' } }, - value: { control: { type: null } }, + value: { control: { type: false } }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/view/stories/index.story.tsx b/packages/components/src/view/stories/index.story.tsx index 324825059deb2..96060a3871f5a 100644 --- a/packages/components/src/view/stories/index.story.tsx +++ b/packages/components/src/view/stories/index.story.tsx @@ -12,7 +12,7 @@ const meta: Meta< typeof View > = { component: View, title: 'Components (Experimental)/View', argTypes: { - as: { control: { type: null } }, + as: { control: { type: false } }, children: { control: { type: 'text' } }, }, parameters: { diff --git a/packages/components/src/visually-hidden/stories/index.story.tsx b/packages/components/src/visually-hidden/stories/index.story.tsx index 6ebcf9a2e949c..8c88a89f5efa3 100644 --- a/packages/components/src/visually-hidden/stories/index.story.tsx +++ b/packages/components/src/visually-hidden/stories/index.story.tsx @@ -13,7 +13,7 @@ const meta: Meta< typeof VisuallyHidden > = { title: 'Components/Typography/VisuallyHidden', id: 'components-visuallyhidden', argTypes: { - children: { control: { type: null } }, + children: { control: { type: false } }, as: { control: { type: 'text' } }, }, parameters: { diff --git a/packages/components/src/z-stack/stories/index.story.tsx b/packages/components/src/z-stack/stories/index.story.tsx index 46a364bc520f3..1c8fa1712d0c1 100644 --- a/packages/components/src/z-stack/stories/index.story.tsx +++ b/packages/components/src/z-stack/stories/index.story.tsx @@ -16,7 +16,7 @@ const meta: Meta< typeof ZStack > = { title: 'Components (Experimental)/ZStack', argTypes: { as: { control: { type: 'text' } }, - children: { control: { type: null } }, + children: { control: { type: false } }, }, parameters: { controls: { From f45e35da9bf7c633411f2690853a783472e3cfb7 Mon Sep 17 00:00:00 2001 From: Marin Atanasov <8436925+tyxla@users.noreply.github.com> Date: Thu, 5 Dec 2024 19:10:00 +0200 Subject: [PATCH 025/118] Storybook: Fix control types (#67646) * Storybook: Update false control types to undefined * Fix control definition Co-authored-by: tyxla Co-authored-by: mirka <0mirka00@git.wordpress.org> --- .../stories/aliginment-toolbar.story.js | 4 ++-- .../alignment-control/stories/index.story.js | 4 ++-- .../stories/aspect-ratio-tool.story.js | 2 +- .../dimensions-tool/stories/index.story.js | 2 +- .../dimensions-tool/stories/scale-tool.story.js | 2 +- .../stories/width-height-tool.story.js | 2 +- .../resolution-tool/stories/index.story.js | 2 +- .../text-alignment-control/stories/index.story.js | 2 +- .../stories/index.story.tsx | 4 ++-- .../angle-picker-control/stories/index.story.tsx | 4 ++-- .../src/base-control/stories/index.story.tsx | 2 +- .../src/border-box-control/stories/index.story.tsx | 2 +- .../src/border-control/stories/index.story.tsx | 2 +- .../src/box-control/stories/index.story.tsx | 2 +- .../src/button-group/stories/index.story.tsx | 2 +- .../components/src/card/stories/index.story.tsx | 4 ++-- .../src/checkbox-control/stories/index.story.tsx | 2 +- .../circular-option-picker/stories/index.story.tsx | 4 ++-- .../src/color-palette/stories/index.story.tsx | 6 +++--- .../src/color-picker/stories/index.story.tsx | 4 ++-- .../src/combobox-control/stories/index.story.tsx | 2 +- .../src/composite/stories/index.story.tsx | 6 +++--- .../src/confirm-dialog/stories/index.story.tsx | 2 +- .../stories/index.story.tsx | 4 ++-- .../custom-select-control/stories/index.story.tsx | 4 ++-- .../src/date-time/stories/date-time.story.tsx | 2 +- .../src/date-time/stories/date.story.tsx | 2 +- .../src/date-time/stories/time.story.tsx | 2 +- .../src/dimension-control/stories/index.story.tsx | 2 +- .../src/disabled/stories/index.story.tsx | 4 ++-- .../components/src/divider/stories/index.story.tsx | 2 +- .../src/draggable/stories/index.story.tsx | 4 ++-- .../src/dropdown-menu/stories/index.story.tsx | 6 +++--- .../src/dropdown/stories/index.story.tsx | 14 +++++++------- .../stories/duotone-picker.story.tsx | 2 +- .../components/src/flex/stories/index.story.tsx | 2 +- .../src/font-size-picker/stories/index.story.tsx | 2 +- .../src/form-file-upload/stories/index.story.tsx | 6 +++--- .../src/form-token-field/stories/index.story.tsx | 4 ++-- .../src/gradient-picker/stories/index.story.tsx | 2 +- .../components/src/grid/stories/index.story.tsx | 2 +- .../components/src/h-stack/stories/index.story.tsx | 4 ++-- .../src/input-control/stories/index.story.tsx | 8 ++++---- .../src/item-group/stories/index.story.tsx | 4 ++-- .../src/menu-group/stories/index.story.tsx | 2 +- .../src/menu-item/stories/index.story.tsx | 2 +- .../src/menu-items-choice/stories/index.story.tsx | 2 +- .../components/src/menu/stories/index.story.tsx | 4 ++-- .../components/src/modal/stories/index.story.tsx | 4 ++-- .../stories/navigable-menu.story.tsx | 2 +- .../stories/tabbable-container.story.tsx | 2 +- .../src/navigation/stories/index.story.tsx | 8 ++++---- .../src/navigator/stories/index.story.tsx | 6 +++--- .../src/number-control/stories/index.story.tsx | 2 +- .../components/src/panel/stories/index.story.tsx | 2 +- .../src/placeholder/stories/index.story.tsx | 6 +++--- .../components/src/popover/stories/index.story.tsx | 12 ++++++------ .../src/query-controls/stories/index.story.tsx | 12 ++++++------ .../src/radio-control/stories/index.story.tsx | 2 +- .../src/radio-group/stories/index.story.tsx | 6 +++--- .../src/range-control/stories/index.story.tsx | 14 +++++++------- .../src/resizable-box/stories/index.story.tsx | 2 +- .../src/responsive-wrapper/stories/index.story.tsx | 2 +- .../components/src/sandbox/stories/index.story.tsx | 2 +- .../src/scrollable/stories/index.story.tsx | 2 +- .../src/search-control/stories/index.story.tsx | 2 +- .../src/select-control/stories/index.story.tsx | 2 +- .../src/slot-fill/stories/index.story.tsx | 4 ++-- .../src/snackbar/stories/index.story.tsx | 8 ++++---- .../components/src/snackbar/stories/list.story.tsx | 4 ++-- .../components/src/surface/stories/index.story.tsx | 2 +- .../src/text-control/stories/index.story.tsx | 2 +- .../src/textarea-control/stories/index.story.tsx | 2 +- .../src/toggle-control/stories/index.story.tsx | 2 +- .../toggle-group-control/stories/index.story.tsx | 2 +- .../components/src/toolbar/stories/index.story.tsx | 2 +- .../src/tools-panel/stories/index.story.tsx | 6 +++--- .../components/src/tooltip/stories/index.story.tsx | 2 +- .../src/tree-grid/stories/index.story.tsx | 2 +- .../src/tree-select/stories/index.story.tsx | 2 +- .../src/unit-control/stories/index.story.tsx | 8 ++++---- .../components/src/view/stories/index.story.tsx | 2 +- .../src/visually-hidden/stories/index.story.tsx | 2 +- .../components/src/z-stack/stories/index.story.tsx | 2 +- 84 files changed, 152 insertions(+), 152 deletions(-) diff --git a/packages/block-editor/src/components/alignment-control/stories/aliginment-toolbar.story.js b/packages/block-editor/src/components/alignment-control/stories/aliginment-toolbar.story.js index a02f0ec3dfbce..9d029c30b4846 100644 --- a/packages/block-editor/src/components/alignment-control/stories/aliginment-toolbar.story.js +++ b/packages/block-editor/src/components/alignment-control/stories/aliginment-toolbar.story.js @@ -16,13 +16,13 @@ const meta = { component: AlignmentToolbar, argTypes: { value: { - control: { type: false }, + control: false, defaultValue: 'undefined', description: 'The current value of the alignment setting.', }, onChange: { action: 'onChange', - control: { type: false }, + control: false, description: "A callback function invoked when the toolbar's alignment value is changed via an interaction with any of the toolbar's buttons. Called with the new alignment value (ie: `left`, `center`, `right`, `undefined`) as the only argument.", }, diff --git a/packages/block-editor/src/components/alignment-control/stories/index.story.js b/packages/block-editor/src/components/alignment-control/stories/index.story.js index ad403dcab4385..165f9343e1710 100644 --- a/packages/block-editor/src/components/alignment-control/stories/index.story.js +++ b/packages/block-editor/src/components/alignment-control/stories/index.story.js @@ -20,13 +20,13 @@ const meta = { component: AlignmentControl, argTypes: { value: { - control: { type: false }, + control: false, defaultValue: 'undefined', description: 'The current value of the alignment setting.', }, onChange: { action: 'onChange', - control: { type: false }, + control: false, description: "A callback function invoked when the toolbar's alignment value is changed via an interaction with any of the toolbar's buttons. Called with the new alignment value (ie: `left`, `center`, `right`, `undefined`) as the only argument.", }, diff --git a/packages/block-editor/src/components/dimensions-tool/stories/aspect-ratio-tool.story.js b/packages/block-editor/src/components/dimensions-tool/stories/aspect-ratio-tool.story.js index 2acaddb57a6cd..b853d78005294 100644 --- a/packages/block-editor/src/components/dimensions-tool/stories/aspect-ratio-tool.story.js +++ b/packages/block-editor/src/components/dimensions-tool/stories/aspect-ratio-tool.story.js @@ -16,7 +16,7 @@ export default { title: 'BlockEditor (Private APIs)/DimensionsTool/AspectRatioTool', component: AspectRatioTool, argTypes: { - panelId: { control: { type: false } }, + panelId: { control: false }, onChange: { action: 'changed' }, }, }; diff --git a/packages/block-editor/src/components/dimensions-tool/stories/index.story.js b/packages/block-editor/src/components/dimensions-tool/stories/index.story.js index 270a6b1ae4b37..ebf08fba0c686 100644 --- a/packages/block-editor/src/components/dimensions-tool/stories/index.story.js +++ b/packages/block-editor/src/components/dimensions-tool/stories/index.story.js @@ -16,7 +16,7 @@ export default { title: 'BlockEditor (Private APIs)/DimensionsTool', component: DimensionsTool, argTypes: { - panelId: { control: { type: false } }, + panelId: { control: false }, onChange: { action: 'changed' }, }, }; diff --git a/packages/block-editor/src/components/dimensions-tool/stories/scale-tool.story.js b/packages/block-editor/src/components/dimensions-tool/stories/scale-tool.story.js index fe354168d2ae8..b485bf68a892d 100644 --- a/packages/block-editor/src/components/dimensions-tool/stories/scale-tool.story.js +++ b/packages/block-editor/src/components/dimensions-tool/stories/scale-tool.story.js @@ -16,7 +16,7 @@ export default { title: 'BlockEditor (Private APIs)/DimensionsTool/ScaleTool', component: ScaleTool, argTypes: { - panelId: { control: { type: false } }, + panelId: { control: false }, onChange: { action: 'changed' }, }, }; diff --git a/packages/block-editor/src/components/dimensions-tool/stories/width-height-tool.story.js b/packages/block-editor/src/components/dimensions-tool/stories/width-height-tool.story.js index ea51455ed4b8e..eed3cbc02f466 100644 --- a/packages/block-editor/src/components/dimensions-tool/stories/width-height-tool.story.js +++ b/packages/block-editor/src/components/dimensions-tool/stories/width-height-tool.story.js @@ -16,7 +16,7 @@ export default { title: 'BlockEditor (Private APIs)/DimensionsTool/WidthHeightTool', component: WidthHeightTool, argTypes: { - panelId: { control: { type: false } }, + panelId: { control: false }, onChange: { action: 'changed' }, }, }; diff --git a/packages/block-editor/src/components/resolution-tool/stories/index.story.js b/packages/block-editor/src/components/resolution-tool/stories/index.story.js index 9700096b3f2e8..3fedb6d6facae 100644 --- a/packages/block-editor/src/components/resolution-tool/stories/index.story.js +++ b/packages/block-editor/src/components/resolution-tool/stories/index.story.js @@ -16,7 +16,7 @@ export default { title: 'BlockEditor (Private APIs)/ResolutionControl', component: ResolutionTool, argTypes: { - panelId: { control: { type: false } }, + panelId: { control: false }, onChange: { action: 'changed' }, }, }; diff --git a/packages/block-editor/src/components/text-alignment-control/stories/index.story.js b/packages/block-editor/src/components/text-alignment-control/stories/index.story.js index 80d04c0a96867..3744f3fa012a7 100644 --- a/packages/block-editor/src/components/text-alignment-control/stories/index.story.js +++ b/packages/block-editor/src/components/text-alignment-control/stories/index.story.js @@ -18,7 +18,7 @@ export default { control: 'check', options: [ 'left', 'center', 'right', 'justify' ], }, - value: { control: { type: false } }, + value: { control: false }, }, }; diff --git a/packages/components/src/alignment-matrix-control/stories/index.story.tsx b/packages/components/src/alignment-matrix-control/stories/index.story.tsx index 992e79d51f1e8..e04d8b6690fe8 100644 --- a/packages/components/src/alignment-matrix-control/stories/index.story.tsx +++ b/packages/components/src/alignment-matrix-control/stories/index.story.tsx @@ -24,8 +24,8 @@ const meta: Meta< typeof AlignmentMatrixControl > = { 'AlignmentMatrixControl.Icon': AlignmentMatrixControl.Icon, }, argTypes: { - onChange: { control: { type: false } }, - value: { control: { type: false } }, + onChange: { control: false }, + value: { control: false }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/angle-picker-control/stories/index.story.tsx b/packages/components/src/angle-picker-control/stories/index.story.tsx index 9bacd4871a968..d909f1ed3d205 100644 --- a/packages/components/src/angle-picker-control/stories/index.story.tsx +++ b/packages/components/src/angle-picker-control/stories/index.story.tsx @@ -17,8 +17,8 @@ const meta: Meta< typeof AnglePickerControl > = { title: 'Components/AnglePickerControl', component: AnglePickerControl, argTypes: { - as: { control: { type: false } }, - value: { control: { type: false } }, + as: { control: false }, + value: { control: false }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/base-control/stories/index.story.tsx b/packages/components/src/base-control/stories/index.story.tsx index 88ced86d3fe1b..69188f869656d 100644 --- a/packages/components/src/base-control/stories/index.story.tsx +++ b/packages/components/src/base-control/stories/index.story.tsx @@ -18,7 +18,7 @@ const meta: Meta< typeof BaseControl > = { 'BaseControl.VisualLabel': BaseControl.VisualLabel, }, argTypes: { - children: { control: { type: false } }, + children: { control: false }, help: { control: { type: 'text' } }, label: { control: { type: 'text' } }, }, diff --git a/packages/components/src/border-box-control/stories/index.story.tsx b/packages/components/src/border-box-control/stories/index.story.tsx index 382ee3afa626a..3f118ae7cb37c 100644 --- a/packages/components/src/border-box-control/stories/index.story.tsx +++ b/packages/components/src/border-box-control/stories/index.story.tsx @@ -20,7 +20,7 @@ const meta: Meta< typeof BorderBoxControl > = { component: BorderBoxControl, argTypes: { onChange: { action: 'onChange' }, - value: { control: { type: false } }, + value: { control: false }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/border-control/stories/index.story.tsx b/packages/components/src/border-control/stories/index.story.tsx index 48fcd37c708d0..ca8505c01a0ba 100644 --- a/packages/components/src/border-control/stories/index.story.tsx +++ b/packages/components/src/border-control/stories/index.story.tsx @@ -23,7 +23,7 @@ const meta: Meta< typeof BorderControl > = { action: 'onChange', }, width: { control: { type: 'text' } }, - value: { control: { type: false } }, + value: { control: false }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/box-control/stories/index.story.tsx b/packages/components/src/box-control/stories/index.story.tsx index fc53b2967ac92..0d8b96de06316 100644 --- a/packages/components/src/box-control/stories/index.story.tsx +++ b/packages/components/src/box-control/stories/index.story.tsx @@ -17,7 +17,7 @@ const meta: Meta< typeof BoxControl > = { title: 'Components/BoxControl', component: BoxControl, argTypes: { - values: { control: { type: false } }, + values: { control: false }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/button-group/stories/index.story.tsx b/packages/components/src/button-group/stories/index.story.tsx index d05a32fe10e98..4b5ab3d5dfdb6 100644 --- a/packages/components/src/button-group/stories/index.story.tsx +++ b/packages/components/src/button-group/stories/index.story.tsx @@ -13,7 +13,7 @@ const meta: Meta< typeof ButtonGroup > = { title: 'Components/ButtonGroup', component: ButtonGroup, argTypes: { - children: { control: { type: false } }, + children: { control: false }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/card/stories/index.story.tsx b/packages/components/src/card/stories/index.story.tsx index 7534ff5345858..22fb749461785 100644 --- a/packages/components/src/card/stories/index.story.tsx +++ b/packages/components/src/card/stories/index.story.tsx @@ -26,10 +26,10 @@ const meta: Meta< typeof Card > = { id: 'components-card', argTypes: { as: { - control: { type: false }, + control: false, }, children: { - control: { type: false }, + control: false, }, }, parameters: { diff --git a/packages/components/src/checkbox-control/stories/index.story.tsx b/packages/components/src/checkbox-control/stories/index.story.tsx index c3e45fdd62f37..a2936654c8629 100644 --- a/packages/components/src/checkbox-control/stories/index.story.tsx +++ b/packages/components/src/checkbox-control/stories/index.story.tsx @@ -24,7 +24,7 @@ const meta: Meta< typeof CheckboxControl > = { action: 'onChange', }, checked: { - control: { type: false }, + control: false, }, help: { control: { type: 'text' } }, }, diff --git a/packages/components/src/circular-option-picker/stories/index.story.tsx b/packages/components/src/circular-option-picker/stories/index.story.tsx index ee10cb70bb55e..84165bf24bff6 100644 --- a/packages/components/src/circular-option-picker/stories/index.story.tsx +++ b/packages/components/src/circular-option-picker/stories/index.story.tsx @@ -32,8 +32,8 @@ const meta: Meta< typeof CircularOptionPicker > = { CircularOptionPicker.DropdownLinkAction, }, argTypes: { - actions: { control: { type: false } }, - options: { control: { type: false } }, + actions: { control: false }, + options: { control: false }, children: { control: { type: 'text' } }, }, parameters: { diff --git a/packages/components/src/color-palette/stories/index.story.tsx b/packages/components/src/color-palette/stories/index.story.tsx index 071a1cecfe105..e4c4b89d52444 100644 --- a/packages/components/src/color-palette/stories/index.story.tsx +++ b/packages/components/src/color-palette/stories/index.story.tsx @@ -18,9 +18,9 @@ const meta: Meta< typeof ColorPalette > = { id: 'components-colorpalette', component: ColorPalette, argTypes: { - as: { control: { type: false } }, - onChange: { action: 'onChange', control: { type: false } }, - value: { control: { type: false } }, + as: { control: false }, + onChange: { action: 'onChange', control: false }, + value: { control: false }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/color-picker/stories/index.story.tsx b/packages/components/src/color-picker/stories/index.story.tsx index 5277a004a9daa..0886719a7de52 100644 --- a/packages/components/src/color-picker/stories/index.story.tsx +++ b/packages/components/src/color-picker/stories/index.story.tsx @@ -13,8 +13,8 @@ const meta: Meta< typeof ColorPicker > = { title: 'Components/Selection & Input/Color/ColorPicker', id: 'components-colorpicker', argTypes: { - as: { control: { type: false } }, - color: { control: { type: false } }, + as: { control: false }, + color: { control: false }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/combobox-control/stories/index.story.tsx b/packages/components/src/combobox-control/stories/index.story.tsx index a9ac2ffb74cb3..f033742a33662 100644 --- a/packages/components/src/combobox-control/stories/index.story.tsx +++ b/packages/components/src/combobox-control/stories/index.story.tsx @@ -38,7 +38,7 @@ const meta: Meta< typeof ComboboxControl > = { id: 'components-comboboxcontrol', component: ComboboxControl, argTypes: { - value: { control: { type: false } }, + value: { control: false }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/composite/stories/index.story.tsx b/packages/components/src/composite/stories/index.story.tsx index 8a6fb6e1e2d86..63731a15a8c9c 100644 --- a/packages/components/src/composite/stories/index.story.tsx +++ b/packages/components/src/composite/stories/index.story.tsx @@ -36,9 +36,9 @@ const meta: Meta< typeof Composite > = { 'Composite.Context': Composite.Context, }, argTypes: { - children: { control: { type: false } }, - render: { control: { type: false } }, - setActiveId: { control: { type: false } }, + children: { control: false }, + render: { control: false }, + setActiveId: { control: false }, focusLoop: { control: 'select', options: [ true, false, 'horizontal', 'vertical', 'both' ], diff --git a/packages/components/src/confirm-dialog/stories/index.story.tsx b/packages/components/src/confirm-dialog/stories/index.story.tsx index 93fc1f7605449..7c08d48369a2b 100644 --- a/packages/components/src/confirm-dialog/stories/index.story.tsx +++ b/packages/components/src/confirm-dialog/stories/index.story.tsx @@ -20,7 +20,7 @@ const meta: Meta< typeof ConfirmDialog > = { id: 'components-experimental-confirmdialog', argTypes: { isOpen: { - control: { type: false }, + control: false, }, }, parameters: { diff --git a/packages/components/src/custom-select-control-v2/stories/index.story.tsx b/packages/components/src/custom-select-control-v2/stories/index.story.tsx index e97886d67ee17..75226314af8db 100644 --- a/packages/components/src/custom-select-control-v2/stories/index.story.tsx +++ b/packages/components/src/custom-select-control-v2/stories/index.story.tsx @@ -22,8 +22,8 @@ const meta: Meta< typeof CustomSelectControlV2 > = { 'CustomSelectControlV2.Item': CustomSelectControlV2.Item, }, argTypes: { - children: { control: { type: false } }, - value: { control: { type: false } }, + children: { control: false }, + value: { control: false }, }, tags: [ 'status-wip' ], parameters: { diff --git a/packages/components/src/custom-select-control/stories/index.story.tsx b/packages/components/src/custom-select-control/stories/index.story.tsx index d86fd45c86b79..8c5e200f7532e 100644 --- a/packages/components/src/custom-select-control/stories/index.story.tsx +++ b/packages/components/src/custom-select-control/stories/index.story.tsx @@ -18,8 +18,8 @@ const meta: Meta< typeof CustomSelectControl > = { component: CustomSelectControl, id: 'components-customselectcontrol', argTypes: { - onChange: { control: { type: false } }, - value: { control: { type: false } }, + onChange: { control: false }, + value: { control: false }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/date-time/stories/date-time.story.tsx b/packages/components/src/date-time/stories/date-time.story.tsx index b2ee1fa8d9a9c..0c6af3f53fa19 100644 --- a/packages/components/src/date-time/stories/date-time.story.tsx +++ b/packages/components/src/date-time/stories/date-time.story.tsx @@ -20,7 +20,7 @@ const meta: Meta< typeof DateTimePicker > = { component: DateTimePicker, argTypes: { currentDate: { control: 'date' }, - onChange: { action: 'onChange', control: { type: false } }, + onChange: { action: 'onChange', control: false }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/date-time/stories/date.story.tsx b/packages/components/src/date-time/stories/date.story.tsx index b90d3c2da555a..ae4816809f786 100644 --- a/packages/components/src/date-time/stories/date.story.tsx +++ b/packages/components/src/date-time/stories/date.story.tsx @@ -20,7 +20,7 @@ const meta: Meta< typeof DatePicker > = { component: DatePicker, argTypes: { currentDate: { control: 'date' }, - onChange: { action: 'onChange', control: { type: false } }, + onChange: { action: 'onChange', control: false }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/date-time/stories/time.story.tsx b/packages/components/src/date-time/stories/time.story.tsx index c7fee061d3ef8..12e5574115a6c 100644 --- a/packages/components/src/date-time/stories/time.story.tsx +++ b/packages/components/src/date-time/stories/time.story.tsx @@ -21,7 +21,7 @@ const meta: Meta< typeof TimePicker > = { subcomponents: { 'TimePicker.TimeInput': TimePicker.TimeInput }, argTypes: { currentTime: { control: 'date' }, - onChange: { action: 'onChange', control: { type: false } }, + onChange: { action: 'onChange', control: false }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/dimension-control/stories/index.story.tsx b/packages/components/src/dimension-control/stories/index.story.tsx index 7b059540a883b..086d75b198fb0 100644 --- a/packages/components/src/dimension-control/stories/index.story.tsx +++ b/packages/components/src/dimension-control/stories/index.story.tsx @@ -24,7 +24,7 @@ const meta: Meta< typeof DimensionControl > = { id: 'components-dimensioncontrol', argTypes: { onChange: { action: 'onChange' }, - value: { control: { type: false } }, + value: { control: false }, icon: { control: { type: 'select' }, options: [ '-', 'desktop', 'tablet', 'mobile' ], diff --git a/packages/components/src/disabled/stories/index.story.tsx b/packages/components/src/disabled/stories/index.story.tsx index b89026a8b548f..7a42da71f8efe 100644 --- a/packages/components/src/disabled/stories/index.story.tsx +++ b/packages/components/src/disabled/stories/index.story.tsx @@ -22,8 +22,8 @@ const meta: Meta< typeof Disabled > = { id: 'components-disabled', component: Disabled, argTypes: { - as: { control: { type: false } }, - children: { control: { type: false } }, + as: { control: false }, + children: { control: false }, }, parameters: { controls: { diff --git a/packages/components/src/divider/stories/index.story.tsx b/packages/components/src/divider/stories/index.story.tsx index fe3fba971b28f..3f143fc523769 100644 --- a/packages/components/src/divider/stories/index.story.tsx +++ b/packages/components/src/divider/stories/index.story.tsx @@ -24,7 +24,7 @@ const meta: Meta< typeof Divider > = { control: { type: 'text' }, }, wrapElement: { - control: { type: false }, + control: false, }, ref: { table: { diff --git a/packages/components/src/draggable/stories/index.story.tsx b/packages/components/src/draggable/stories/index.story.tsx index 54fdeaadd147e..537dd9b40d7f3 100644 --- a/packages/components/src/draggable/stories/index.story.tsx +++ b/packages/components/src/draggable/stories/index.story.tsx @@ -21,8 +21,8 @@ const meta: Meta< typeof Draggable > = { title: 'Components/Utilities/Draggable', id: 'components-draggable', argTypes: { - elementId: { control: { type: false } }, - __experimentalDragComponent: { control: { type: false } }, + elementId: { control: false }, + __experimentalDragComponent: { control: false }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/dropdown-menu/stories/index.story.tsx b/packages/components/src/dropdown-menu/stories/index.story.tsx index 5277d4f54a4df..7b06ae979de84 100644 --- a/packages/components/src/dropdown-menu/stories/index.story.tsx +++ b/packages/components/src/dropdown-menu/stories/index.story.tsx @@ -37,9 +37,9 @@ const meta: Meta< typeof DropdownMenu > = { mapping: { menu, chevronDown, more }, control: { type: 'select' }, }, - open: { control: { type: false } }, - defaultOpen: { control: { type: false } }, - onToggle: { control: { type: false } }, + open: { control: false }, + defaultOpen: { control: false }, + onToggle: { control: false }, }, }; export default meta; diff --git a/packages/components/src/dropdown/stories/index.story.tsx b/packages/components/src/dropdown/stories/index.story.tsx index 8adb10574fc87..ff4d0101a377e 100644 --- a/packages/components/src/dropdown/stories/index.story.tsx +++ b/packages/components/src/dropdown/stories/index.story.tsx @@ -25,13 +25,13 @@ const meta: Meta< typeof Dropdown > = { type: 'radio', }, }, - position: { control: { type: false } }, - renderContent: { control: { type: false } }, - renderToggle: { control: { type: false } }, - open: { control: { type: false } }, - defaultOpen: { control: { type: false } }, - onToggle: { control: { type: false } }, - onClose: { control: { type: false } }, + position: { control: false }, + renderContent: { control: false }, + renderToggle: { control: false }, + open: { control: false }, + defaultOpen: { control: false }, + onToggle: { control: false }, + onClose: { control: false }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/duotone-picker/stories/duotone-picker.story.tsx b/packages/components/src/duotone-picker/stories/duotone-picker.story.tsx index 014ab4b22443e..bf8439c38bb85 100644 --- a/packages/components/src/duotone-picker/stories/duotone-picker.story.tsx +++ b/packages/components/src/duotone-picker/stories/duotone-picker.story.tsx @@ -19,7 +19,7 @@ const meta: Meta< typeof DuotonePicker > = { component: DuotonePicker, argTypes: { onChange: { action: 'onChange' }, - value: { control: { type: false } }, + value: { control: false }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/flex/stories/index.story.tsx b/packages/components/src/flex/stories/index.story.tsx index 8f57d01c4de62..fac5b2e7c31e0 100644 --- a/packages/components/src/flex/stories/index.story.tsx +++ b/packages/components/src/flex/stories/index.story.tsx @@ -17,7 +17,7 @@ const meta: Meta< typeof Flex > = { argTypes: { align: { control: { type: 'text' } }, as: { control: { type: 'text' } }, - children: { control: { type: false } }, + children: { control: false }, gap: { control: { type: 'text' } }, justify: { control: { type: 'text' } }, // Disabled isReversed because it's deprecated. diff --git a/packages/components/src/font-size-picker/stories/index.story.tsx b/packages/components/src/font-size-picker/stories/index.story.tsx index 4bd50293788bb..f6502fcfd537c 100644 --- a/packages/components/src/font-size-picker/stories/index.story.tsx +++ b/packages/components/src/font-size-picker/stories/index.story.tsx @@ -17,7 +17,7 @@ const meta: Meta< typeof FontSizePicker > = { title: 'Components/FontSizePicker', component: FontSizePicker, argTypes: { - value: { control: { type: false } }, + value: { control: false }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/form-file-upload/stories/index.story.tsx b/packages/components/src/form-file-upload/stories/index.story.tsx index 3f961b87b32f3..cec182346c0a7 100644 --- a/packages/components/src/form-file-upload/stories/index.story.tsx +++ b/packages/components/src/form-file-upload/stories/index.story.tsx @@ -18,9 +18,9 @@ const meta: Meta< typeof FormFileUpload > = { id: 'components-formfileupload', component: FormFileUpload, argTypes: { - icon: { control: { type: false } }, - onChange: { action: 'onChange', control: { type: false } }, - onClick: { control: { type: false } }, + icon: { control: false }, + onChange: { action: 'onChange', control: false }, + onClick: { control: false }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/form-token-field/stories/index.story.tsx b/packages/components/src/form-token-field/stories/index.story.tsx index 6e895989c164b..52daabe5608b0 100644 --- a/packages/components/src/form-token-field/stories/index.story.tsx +++ b/packages/components/src/form-token-field/stories/index.story.tsx @@ -19,10 +19,10 @@ const meta: Meta< typeof FormTokenField > = { id: 'components-formtokenfield', argTypes: { value: { - control: { type: false }, + control: false, }, __experimentalValidateInput: { - control: { type: false }, + control: false, }, }, parameters: { diff --git a/packages/components/src/gradient-picker/stories/index.story.tsx b/packages/components/src/gradient-picker/stories/index.story.tsx index 5e031a3dad00d..7dc5f62df726d 100644 --- a/packages/components/src/gradient-picker/stories/index.story.tsx +++ b/packages/components/src/gradient-picker/stories/index.story.tsx @@ -22,7 +22,7 @@ const meta: Meta< typeof GradientPicker > = { actions: { argTypesRegex: '^on.*' }, }, argTypes: { - value: { control: { type: false } }, + value: { control: false }, }, }; export default meta; diff --git a/packages/components/src/grid/stories/index.story.tsx b/packages/components/src/grid/stories/index.story.tsx index 781fd04a67c28..5b2284e22d27e 100644 --- a/packages/components/src/grid/stories/index.story.tsx +++ b/packages/components/src/grid/stories/index.story.tsx @@ -15,7 +15,7 @@ const meta: Meta< typeof Grid > = { argTypes: { as: { control: { type: 'text' } }, align: { control: { type: 'text' } }, - children: { control: { type: false } }, + children: { control: false }, columnGap: { control: { type: 'text' } }, columns: { table: { type: { summary: 'number' } }, diff --git a/packages/components/src/h-stack/stories/index.story.tsx b/packages/components/src/h-stack/stories/index.story.tsx index bf13cb19471ff..a2e5b4fa55e9f 100644 --- a/packages/components/src/h-stack/stories/index.story.tsx +++ b/packages/components/src/h-stack/stories/index.story.tsx @@ -46,10 +46,10 @@ const meta: Meta< typeof HStack > = { id: 'components-experimental-hstack', argTypes: { as: { - control: { type: false }, + control: false, }, children: { - control: { type: false }, + control: false, }, alignment: { control: { type: 'select' }, diff --git a/packages/components/src/input-control/stories/index.story.tsx b/packages/components/src/input-control/stories/index.story.tsx index 38fc03f13f004..136301c42e7d0 100644 --- a/packages/components/src/input-control/stories/index.story.tsx +++ b/packages/components/src/input-control/stories/index.story.tsx @@ -23,10 +23,10 @@ const meta: Meta< typeof InputControl > = { subcomponents: { InputControlPrefixWrapper, InputControlSuffixWrapper }, argTypes: { __unstableInputWidth: { control: { type: 'text' } }, - __unstableStateReducer: { control: { type: false } }, - onChange: { control: { type: false } }, - prefix: { control: { type: false } }, - suffix: { control: { type: false } }, + __unstableStateReducer: { control: false }, + onChange: { control: false }, + prefix: { control: false }, + suffix: { control: false }, type: { control: { type: 'text' } }, value: { control: { disable: true } }, }, diff --git a/packages/components/src/item-group/stories/index.story.tsx b/packages/components/src/item-group/stories/index.story.tsx index 3f1f310163db8..845843d2433db 100644 --- a/packages/components/src/item-group/stories/index.story.tsx +++ b/packages/components/src/item-group/stories/index.story.tsx @@ -17,8 +17,8 @@ const meta: Meta< typeof ItemGroup > = { subcomponents: { Item }, title: 'Components (Experimental)/ItemGroup', argTypes: { - as: { control: { type: false } }, - children: { control: { type: false } }, + as: { control: false }, + children: { control: false }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/menu-group/stories/index.story.tsx b/packages/components/src/menu-group/stories/index.story.tsx index f24fcac19982e..c46804bc99900 100644 --- a/packages/components/src/menu-group/stories/index.story.tsx +++ b/packages/components/src/menu-group/stories/index.story.tsx @@ -20,7 +20,7 @@ const meta: Meta< typeof MenuGroup > = { component: MenuGroup, id: 'components-menugroup', argTypes: { - children: { control: { type: false } }, + children: { control: false }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/menu-item/stories/index.story.tsx b/packages/components/src/menu-item/stories/index.story.tsx index 2f96cb3375293..bef548c59d946 100644 --- a/packages/components/src/menu-item/stories/index.story.tsx +++ b/packages/components/src/menu-item/stories/index.story.tsx @@ -20,7 +20,7 @@ const meta: Meta< typeof MenuItem > = { title: 'Components/Actions/MenuItem', id: 'components-menuitem', argTypes: { - children: { control: { type: false } }, + children: { control: false }, icon: { control: { type: 'select' }, options: [ 'check', 'link', 'more' ], diff --git a/packages/components/src/menu-items-choice/stories/index.story.tsx b/packages/components/src/menu-items-choice/stories/index.story.tsx index c1b88444a1bdc..b634eb5becedb 100644 --- a/packages/components/src/menu-items-choice/stories/index.story.tsx +++ b/packages/components/src/menu-items-choice/stories/index.story.tsx @@ -21,7 +21,7 @@ const meta: Meta< typeof MenuItemsChoice > = { argTypes: { onHover: { action: 'onHover' }, onSelect: { action: 'onSelect' }, - value: { control: { type: false } }, + value: { control: false }, }, parameters: { controls: { diff --git a/packages/components/src/menu/stories/index.story.tsx b/packages/components/src/menu/stories/index.story.tsx index 34fae3a8d215e..ad4794057e0e0 100644 --- a/packages/components/src/menu/stories/index.story.tsx +++ b/packages/components/src/menu/stories/index.story.tsx @@ -46,8 +46,8 @@ const meta: Meta< typeof Menu > = { ItemHelpText: Menu.ItemHelpText, }, argTypes: { - children: { control: { type: false } }, - trigger: { control: { type: false } }, + children: { control: false }, + trigger: { control: false }, }, tags: [ 'status-private' ], parameters: { diff --git a/packages/components/src/modal/stories/index.story.tsx b/packages/components/src/modal/stories/index.story.tsx index 20d16701af337..be18ed141dd3f 100644 --- a/packages/components/src/modal/stories/index.story.tsx +++ b/packages/components/src/modal/stories/index.story.tsx @@ -23,10 +23,10 @@ const meta: Meta< typeof Modal > = { id: 'components-modal', argTypes: { children: { - control: { type: false }, + control: false, }, onKeyDown: { - control: { type: false }, + control: false, }, focusOnMount: { options: [ true, false, 'firstElement', 'firstContentElement' ], diff --git a/packages/components/src/navigable-container/stories/navigable-menu.story.tsx b/packages/components/src/navigable-container/stories/navigable-menu.story.tsx index 05d71e56e754a..30986ff479e43 100644 --- a/packages/components/src/navigable-container/stories/navigable-menu.story.tsx +++ b/packages/components/src/navigable-container/stories/navigable-menu.story.tsx @@ -13,7 +13,7 @@ const meta: Meta< typeof NavigableMenu > = { id: 'components-navigablemenu', component: NavigableMenu, argTypes: { - children: { control: { type: false } }, + children: { control: false }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/navigable-container/stories/tabbable-container.story.tsx b/packages/components/src/navigable-container/stories/tabbable-container.story.tsx index 69a09d78c9b62..afb4119015b52 100644 --- a/packages/components/src/navigable-container/stories/tabbable-container.story.tsx +++ b/packages/components/src/navigable-container/stories/tabbable-container.story.tsx @@ -13,7 +13,7 @@ const meta: Meta< typeof TabbableContainer > = { id: 'components-tabbablecontainer', component: TabbableContainer, argTypes: { - children: { control: { type: false } }, + children: { control: false }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/navigation/stories/index.story.tsx b/packages/components/src/navigation/stories/index.story.tsx index 3dd5c02f416b2..8510b6f20b537 100644 --- a/packages/components/src/navigation/stories/index.story.tsx +++ b/packages/components/src/navigation/stories/index.story.tsx @@ -39,10 +39,10 @@ const meta: Meta< typeof Navigation > = { NavigationMenu, }, argTypes: { - activeItem: { control: { type: false } }, - activeMenu: { control: { type: false } }, - children: { control: { type: false } }, - onActivateMenu: { control: { type: false } }, + activeItem: { control: false }, + activeMenu: { control: false }, + children: { control: false }, + onActivateMenu: { control: false }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/navigator/stories/index.story.tsx b/packages/components/src/navigator/stories/index.story.tsx index bf78b9fcc2f86..0baf6a1c9cf5b 100644 --- a/packages/components/src/navigator/stories/index.story.tsx +++ b/packages/components/src/navigator/stories/index.story.tsx @@ -24,9 +24,9 @@ const meta: Meta< typeof Navigator > = { title: 'Components/Navigation/Navigator', id: 'components-navigator', argTypes: { - as: { control: { type: false } }, - children: { control: { type: false } }, - initialPath: { control: { type: false } }, + as: { control: false }, + children: { control: false }, + initialPath: { control: false }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/number-control/stories/index.story.tsx b/packages/components/src/number-control/stories/index.story.tsx index 4d2fcf30ebcef..e66be3490bb71 100644 --- a/packages/components/src/number-control/stories/index.story.tsx +++ b/packages/components/src/number-control/stories/index.story.tsx @@ -23,7 +23,7 @@ const meta: Meta< typeof NumberControl > = { step: { control: { type: 'text' } }, suffix: { control: { type: 'text' } }, type: { control: { type: 'text' } }, - value: { control: { type: false } }, + value: { control: false }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/panel/stories/index.story.tsx b/packages/components/src/panel/stories/index.story.tsx index d4b159199e7b2..db66b911d4dc1 100644 --- a/packages/components/src/panel/stories/index.story.tsx +++ b/packages/components/src/panel/stories/index.story.tsx @@ -23,7 +23,7 @@ const meta: Meta< typeof Panel > = { // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 subcomponents: { PanelRow, PanelBody }, argTypes: { - children: { control: { type: false } }, + children: { control: false }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/placeholder/stories/index.story.tsx b/packages/components/src/placeholder/stories/index.story.tsx index 9428299e13847..ffe60df0b4b85 100644 --- a/packages/components/src/placeholder/stories/index.story.tsx +++ b/packages/components/src/placeholder/stories/index.story.tsx @@ -21,9 +21,9 @@ const meta: Meta< typeof Placeholder > = { component: Placeholder, title: 'Components/Placeholder', argTypes: { - children: { control: { type: false } }, - notices: { control: { type: false } }, - preview: { control: { type: false } }, + children: { control: false }, + notices: { control: false }, + preview: { control: false }, icon: { control: { type: 'select' }, options: Object.keys( ICONS ), diff --git a/packages/components/src/popover/stories/index.story.tsx b/packages/components/src/popover/stories/index.story.tsx index 3b783ec9f9746..cf1bd5135ad9f 100644 --- a/packages/components/src/popover/stories/index.story.tsx +++ b/packages/components/src/popover/stories/index.story.tsx @@ -37,18 +37,18 @@ const meta: Meta< typeof Popover > = { id: 'components-popover', component: Popover, argTypes: { - anchor: { control: { type: false } }, - anchorRef: { control: { type: false } }, - anchorRect: { control: { type: false } }, - children: { control: { type: false } }, + anchor: { control: false }, + anchorRef: { control: false }, + anchorRect: { control: false }, + children: { control: false }, focusOnMount: { control: { type: 'select' }, options: [ 'firstElement', true, false ], }, - getAnchorRect: { control: { type: false } }, + getAnchorRect: { control: false }, onClose: { action: 'onClose' }, onFocusOutside: { action: 'onFocusOutside' }, - __unstableSlotName: { control: { type: false } }, + __unstableSlotName: { control: false }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/query-controls/stories/index.story.tsx b/packages/components/src/query-controls/stories/index.story.tsx index d89d91ecd02bd..ad28d9aed0d0d 100644 --- a/packages/components/src/query-controls/stories/index.story.tsx +++ b/packages/components/src/query-controls/stories/index.story.tsx @@ -22,12 +22,12 @@ const meta: Meta< typeof QueryControls > = { title: 'Components/QueryControls', component: QueryControls, argTypes: { - numberOfItems: { control: { type: false } }, - order: { control: { type: false } }, - orderBy: { control: { type: false } }, - selectedAuthorId: { control: { type: false } }, - selectedCategories: { control: { type: false } }, - selectedCategoryId: { control: { type: false } }, + numberOfItems: { control: false }, + order: { control: false }, + orderBy: { control: false }, + selectedAuthorId: { control: false }, + selectedCategories: { control: false }, + selectedCategoryId: { control: false }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/radio-control/stories/index.story.tsx b/packages/components/src/radio-control/stories/index.story.tsx index 6291f8fe5cbe3..7b7bc773f323a 100644 --- a/packages/components/src/radio-control/stories/index.story.tsx +++ b/packages/components/src/radio-control/stories/index.story.tsx @@ -22,7 +22,7 @@ const meta: Meta< typeof RadioControl > = { action: 'onChange', }, selected: { - control: { type: false }, + control: false, }, label: { control: { type: 'text' }, diff --git a/packages/components/src/radio-group/stories/index.story.tsx b/packages/components/src/radio-group/stories/index.story.tsx index d453acfb81d75..aee8610e1b700 100644 --- a/packages/components/src/radio-group/stories/index.story.tsx +++ b/packages/components/src/radio-group/stories/index.story.tsx @@ -21,8 +21,8 @@ const meta: Meta< typeof RadioGroup > = { // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 subcomponents: { Radio }, argTypes: { - onChange: { control: { type: false } }, - children: { control: { type: false } }, + onChange: { control: false }, + children: { control: false }, checked: { control: { type: 'text' } }, }, parameters: { @@ -99,5 +99,5 @@ Controlled.args = { id: 'controlled-radiogroup', }; Controlled.argTypes = { - checked: { control: { type: false } }, + checked: { control: false }, }; diff --git a/packages/components/src/range-control/stories/index.story.tsx b/packages/components/src/range-control/stories/index.story.tsx index fd2ab67e652f1..5a4b2342a49ff 100644 --- a/packages/components/src/range-control/stories/index.story.tsx +++ b/packages/components/src/range-control/stories/index.story.tsx @@ -33,18 +33,18 @@ const meta: Meta< typeof RangeControl > = { }, color: { control: { type: 'color' } }, help: { control: { type: 'text' } }, - icon: { control: { type: false } }, + icon: { control: false }, marks: { control: { type: 'object' } }, - onBlur: { control: { type: false } }, - onChange: { control: { type: false } }, - onFocus: { control: { type: false } }, - onMouseLeave: { control: { type: false } }, - onMouseMove: { control: { type: false } }, + onBlur: { control: false }, + onChange: { control: false }, + onFocus: { control: false }, + onMouseLeave: { control: false }, + onMouseMove: { control: false }, railColor: { control: { type: 'color' } }, step: { control: { type: 'number' } }, trackColor: { control: { type: 'color' } }, type: { control: { type: 'check' }, options: [ 'stepper' ] }, - value: { control: { type: false } }, + value: { control: false }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/resizable-box/stories/index.story.tsx b/packages/components/src/resizable-box/stories/index.story.tsx index 9b00004bfc1b5..aa5b080d00b51 100644 --- a/packages/components/src/resizable-box/stories/index.story.tsx +++ b/packages/components/src/resizable-box/stories/index.story.tsx @@ -18,7 +18,7 @@ const meta: Meta< typeof ResizableBox > = { id: 'components-resizablebox', component: ResizableBox, argTypes: { - children: { control: { type: false } }, + children: { control: false }, enable: { control: 'object' }, onResizeStop: { action: 'onResizeStop' }, }, diff --git a/packages/components/src/responsive-wrapper/stories/index.story.tsx b/packages/components/src/responsive-wrapper/stories/index.story.tsx index cee9c57189651..5a834b999b715 100644 --- a/packages/components/src/responsive-wrapper/stories/index.story.tsx +++ b/packages/components/src/responsive-wrapper/stories/index.story.tsx @@ -13,7 +13,7 @@ const meta: Meta< typeof ResponsiveWrapper > = { title: 'Components/Layout/ResponsiveWrapper', id: 'components-responsivewrapper', argTypes: { - children: { control: { type: false } }, + children: { control: false }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/sandbox/stories/index.story.tsx b/packages/components/src/sandbox/stories/index.story.tsx index 21cdb529ae9e2..6d5eaa4868e78 100644 --- a/packages/components/src/sandbox/stories/index.story.tsx +++ b/packages/components/src/sandbox/stories/index.story.tsx @@ -13,7 +13,7 @@ const meta: Meta< typeof SandBox > = { title: 'Components/Utilities/SandBox', id: 'components-sandbox', argTypes: { - onFocus: { control: { type: false } }, + onFocus: { control: false }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/scrollable/stories/index.story.tsx b/packages/components/src/scrollable/stories/index.story.tsx index 4c9d0eaa786c4..318a841f22978 100644 --- a/packages/components/src/scrollable/stories/index.story.tsx +++ b/packages/components/src/scrollable/stories/index.story.tsx @@ -22,7 +22,7 @@ const meta: Meta< typeof Scrollable > = { control: { type: 'text' }, }, children: { - control: { type: false }, + control: false, }, }, parameters: { diff --git a/packages/components/src/search-control/stories/index.story.tsx b/packages/components/src/search-control/stories/index.story.tsx index 46b45c1cbd5d7..c3385c4eb21b4 100644 --- a/packages/components/src/search-control/stories/index.story.tsx +++ b/packages/components/src/search-control/stories/index.story.tsx @@ -19,7 +19,7 @@ const meta: Meta< typeof SearchControl > = { component: SearchControl, argTypes: { onChange: { action: 'onChange' }, - value: { control: { type: false } }, + value: { control: false }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/select-control/stories/index.story.tsx b/packages/components/src/select-control/stories/index.story.tsx index 6f60977eaa1fe..d872df540602e 100644 --- a/packages/components/src/select-control/stories/index.story.tsx +++ b/packages/components/src/select-control/stories/index.story.tsx @@ -23,7 +23,7 @@ const meta: Meta< typeof SelectControl > = { label: { control: { type: 'text' } }, prefix: { control: { type: 'text' } }, suffix: { control: { type: 'text' } }, - value: { control: { type: false } }, + value: { control: false }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/slot-fill/stories/index.story.tsx b/packages/components/src/slot-fill/stories/index.story.tsx index c727ba543e608..2c74496e1eada 100644 --- a/packages/components/src/slot-fill/stories/index.story.tsx +++ b/packages/components/src/slot-fill/stories/index.story.tsx @@ -20,9 +20,9 @@ const meta: Meta< typeof Slot > = { // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 subcomponents: { Fill, SlotFillProvider }, argTypes: { - name: { control: { type: false } }, + name: { control: false }, as: { control: { type: 'text' } }, - fillProps: { control: { type: false } }, + fillProps: { control: false }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/snackbar/stories/index.story.tsx b/packages/components/src/snackbar/stories/index.story.tsx index acfb58e9b3f23..5c24044cc1ae6 100644 --- a/packages/components/src/snackbar/stories/index.story.tsx +++ b/packages/components/src/snackbar/stories/index.story.tsx @@ -19,17 +19,17 @@ const meta: Meta< typeof Snackbar > = { id: 'components-snackbar', component: Snackbar, argTypes: { - as: { control: { type: false } }, + as: { control: false }, onRemove: { action: 'onRemove', - control: { type: false }, + control: false, }, onDismiss: { action: 'onDismiss', - control: { type: false }, + control: false, }, listRef: { - control: { type: false }, + control: false, }, }, parameters: { diff --git a/packages/components/src/snackbar/stories/list.story.tsx b/packages/components/src/snackbar/stories/list.story.tsx index fb6aa7cc97ead..69a4367c48575 100644 --- a/packages/components/src/snackbar/stories/list.story.tsx +++ b/packages/components/src/snackbar/stories/list.story.tsx @@ -18,10 +18,10 @@ const meta: Meta< typeof SnackbarList > = { id: 'components-snackbarlist', component: SnackbarList, argTypes: { - as: { control: { type: false } }, + as: { control: false }, onRemove: { action: 'onRemove', - control: { type: false }, + control: false, }, }, parameters: { diff --git a/packages/components/src/surface/stories/index.story.tsx b/packages/components/src/surface/stories/index.story.tsx index 4237fe09cc851..1ef0c0d5637cb 100644 --- a/packages/components/src/surface/stories/index.story.tsx +++ b/packages/components/src/surface/stories/index.story.tsx @@ -13,7 +13,7 @@ const meta: Meta< typeof Surface > = { component: Surface, title: 'Components (Experimental)/Surface', argTypes: { - children: { control: { type: false } }, + children: { control: false }, as: { control: { type: 'text' } }, }, parameters: { diff --git a/packages/components/src/text-control/stories/index.story.tsx b/packages/components/src/text-control/stories/index.story.tsx index 05e9493d7126a..fe7fb538805da 100644 --- a/packages/components/src/text-control/stories/index.story.tsx +++ b/packages/components/src/text-control/stories/index.story.tsx @@ -21,7 +21,7 @@ const meta: Meta< typeof TextControl > = { help: { control: { type: 'text' } }, label: { control: { type: 'text' } }, onChange: { action: 'onChange' }, - value: { control: { type: false } }, + value: { control: false }, }, parameters: { controls: { diff --git a/packages/components/src/textarea-control/stories/index.story.tsx b/packages/components/src/textarea-control/stories/index.story.tsx index ccb0fabb1cb8e..3160e0bfe68f3 100644 --- a/packages/components/src/textarea-control/stories/index.story.tsx +++ b/packages/components/src/textarea-control/stories/index.story.tsx @@ -21,7 +21,7 @@ const meta: Meta< typeof TextareaControl > = { onChange: { action: 'onChange' }, label: { control: { type: 'text' } }, help: { control: { type: 'text' } }, - value: { control: { type: false } }, + value: { control: false }, }, parameters: { controls: { diff --git a/packages/components/src/toggle-control/stories/index.story.tsx b/packages/components/src/toggle-control/stories/index.story.tsx index d731ccc066fb0..6511655810066 100644 --- a/packages/components/src/toggle-control/stories/index.story.tsx +++ b/packages/components/src/toggle-control/stories/index.story.tsx @@ -18,7 +18,7 @@ const meta: Meta< typeof ToggleControl > = { id: 'components-togglecontrol', component: ToggleControl, argTypes: { - checked: { control: { type: false } }, + checked: { control: false }, help: { control: { type: 'text' } }, label: { control: { type: 'text' } }, onChange: { action: 'onChange' }, diff --git a/packages/components/src/toggle-group-control/stories/index.story.tsx b/packages/components/src/toggle-group-control/stories/index.story.tsx index a2e15a5cdc540..0f3c0a299617a 100644 --- a/packages/components/src/toggle-group-control/stories/index.story.tsx +++ b/packages/components/src/toggle-group-control/stories/index.story.tsx @@ -32,7 +32,7 @@ const meta: Meta< typeof ToggleGroupControl > = { argTypes: { help: { control: { type: 'text' } }, onChange: { action: 'onChange' }, - value: { control: { type: false } }, + value: { control: false }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/toolbar/stories/index.story.tsx b/packages/components/src/toolbar/stories/index.story.tsx index b374fa5931fde..8590c1ec8a2c6 100644 --- a/packages/components/src/toolbar/stories/index.story.tsx +++ b/packages/components/src/toolbar/stories/index.story.tsx @@ -51,7 +51,7 @@ const meta: Meta< typeof Toolbar > = { ToolbarDropdownMenu, }, argTypes: { - children: { control: { type: false } }, + children: { control: false }, variant: { options: [ undefined, 'unstyled' ], control: { type: 'radio' }, diff --git a/packages/components/src/tools-panel/stories/index.story.tsx b/packages/components/src/tools-panel/stories/index.story.tsx index 4ea70fcad899e..76735c845c3ea 100644 --- a/packages/components/src/tools-panel/stories/index.story.tsx +++ b/packages/components/src/tools-panel/stories/index.story.tsx @@ -31,9 +31,9 @@ const meta: Meta< typeof ToolsPanel > = { // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 subcomponents: { ToolsPanelItem }, argTypes: { - as: { control: { type: false } }, - children: { control: { type: false } }, - panelId: { control: { type: false } }, + as: { control: false }, + children: { control: false }, + panelId: { control: false }, resetAll: { action: 'resetAll' }, }, parameters: { diff --git a/packages/components/src/tooltip/stories/index.story.tsx b/packages/components/src/tooltip/stories/index.story.tsx index ae676dc148a72..e3d21525dd345 100644 --- a/packages/components/src/tooltip/stories/index.story.tsx +++ b/packages/components/src/tooltip/stories/index.story.tsx @@ -19,7 +19,7 @@ const meta: Meta< typeof Tooltip > = { id: 'components-tooltip', component: Tooltip, argTypes: { - children: { control: { type: false } }, + children: { control: false }, position: { control: { type: 'select' }, options: [ diff --git a/packages/components/src/tree-grid/stories/index.story.tsx b/packages/components/src/tree-grid/stories/index.story.tsx index eddaeda514fde..f91ba4631d320 100644 --- a/packages/components/src/tree-grid/stories/index.story.tsx +++ b/packages/components/src/tree-grid/stories/index.story.tsx @@ -22,7 +22,7 @@ const meta: Meta< typeof TreeGrid > = { // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 subcomponents: { TreeGridRow, TreeGridCell }, argTypes: { - children: { control: { type: false } }, + children: { control: false }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/tree-select/stories/index.story.tsx b/packages/components/src/tree-select/stories/index.story.tsx index 23cb1b9e5aca4..b43245e5e1621 100644 --- a/packages/components/src/tree-select/stories/index.story.tsx +++ b/packages/components/src/tree-select/stories/index.story.tsx @@ -22,7 +22,7 @@ const meta: Meta< typeof TreeSelect > = { label: { control: { type: 'text' } }, prefix: { control: { type: 'text' } }, suffix: { control: { type: 'text' } }, - selectedId: { control: { type: false } }, + selectedId: { control: false }, }, parameters: { controls: { diff --git a/packages/components/src/unit-control/stories/index.story.tsx b/packages/components/src/unit-control/stories/index.story.tsx index b6710fb770229..3a9da70ad5095 100644 --- a/packages/components/src/unit-control/stories/index.story.tsx +++ b/packages/components/src/unit-control/stories/index.story.tsx @@ -20,11 +20,11 @@ const meta: Meta< typeof UnitControl > = { id: 'components-experimental-unitcontrol', argTypes: { __unstableInputWidth: { control: { type: 'text' } }, - __unstableStateReducer: { control: { type: false } }, - onChange: { control: { type: false } }, - onUnitChange: { control: { type: false } }, + __unstableStateReducer: { control: false }, + onChange: { control: false }, + onUnitChange: { control: false }, prefix: { control: { type: 'text' } }, - value: { control: { type: false } }, + value: { control: false }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/view/stories/index.story.tsx b/packages/components/src/view/stories/index.story.tsx index 96060a3871f5a..ee4bb71b8a243 100644 --- a/packages/components/src/view/stories/index.story.tsx +++ b/packages/components/src/view/stories/index.story.tsx @@ -12,7 +12,7 @@ const meta: Meta< typeof View > = { component: View, title: 'Components (Experimental)/View', argTypes: { - as: { control: { type: false } }, + as: { control: false }, children: { control: { type: 'text' } }, }, parameters: { diff --git a/packages/components/src/visually-hidden/stories/index.story.tsx b/packages/components/src/visually-hidden/stories/index.story.tsx index 8c88a89f5efa3..1c79718ddf6e0 100644 --- a/packages/components/src/visually-hidden/stories/index.story.tsx +++ b/packages/components/src/visually-hidden/stories/index.story.tsx @@ -13,7 +13,7 @@ const meta: Meta< typeof VisuallyHidden > = { title: 'Components/Typography/VisuallyHidden', id: 'components-visuallyhidden', argTypes: { - children: { control: { type: false } }, + children: { control: false }, as: { control: { type: 'text' } }, }, parameters: { diff --git a/packages/components/src/z-stack/stories/index.story.tsx b/packages/components/src/z-stack/stories/index.story.tsx index 1c8fa1712d0c1..53c7d950e75b1 100644 --- a/packages/components/src/z-stack/stories/index.story.tsx +++ b/packages/components/src/z-stack/stories/index.story.tsx @@ -16,7 +16,7 @@ const meta: Meta< typeof ZStack > = { title: 'Components (Experimental)/ZStack', argTypes: { as: { control: { type: 'text' } }, - children: { control: { type: false } }, + children: { control: false }, }, parameters: { controls: { From 2caf693f545c5b24345d8d3c9e06dcdd1f0e74b7 Mon Sep 17 00:00:00 2001 From: Jorge Costa Date: Thu, 5 Dec 2024 18:17:14 +0000 Subject: [PATCH 026/118] Fix: Remove parent block selector while in Write mode (#67395) Co-authored-by: jorgefilipecosta Co-authored-by: Mamaduka Co-authored-by: richtabor --- .../components/block-parent-selector/index.js | 20 +------------------ .../src/components/block-toolbar/index.js | 1 + 2 files changed, 2 insertions(+), 19 deletions(-) diff --git a/packages/block-editor/src/components/block-parent-selector/index.js b/packages/block-editor/src/components/block-parent-selector/index.js index 9090de42f8b7d..84b5211089cd9 100644 --- a/packages/block-editor/src/components/block-parent-selector/index.js +++ b/packages/block-editor/src/components/block-parent-selector/index.js @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { getBlockType, store as blocksStore } from '@wordpress/blocks'; import { ToolbarButton } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; import { __, sprintf } from '@wordpress/i18n'; @@ -24,31 +23,18 @@ import { unlock } from '../../lock-unlock'; */ export default function BlockParentSelector() { const { selectBlock } = useDispatch( blockEditorStore ); - const { parentClientId, isVisible } = useSelect( ( select ) => { + const { parentClientId } = useSelect( ( select ) => { const { - getBlockName, getBlockParents, getSelectedBlockClientId, - getBlockEditingMode, getParentSectionBlock, } = unlock( select( blockEditorStore ) ); - const { hasBlockSupport } = select( blocksStore ); const selectedBlockClientId = getSelectedBlockClientId(); const parentSection = getParentSectionBlock( selectedBlockClientId ); const parents = getBlockParents( selectedBlockClientId ); const _parentClientId = parentSection ?? parents[ parents.length - 1 ]; - const parentBlockName = getBlockName( _parentClientId ); - const _parentBlockType = getBlockType( parentBlockName ); return { parentClientId: _parentClientId, - isVisible: - _parentClientId && - getBlockEditingMode( _parentClientId ) !== 'disabled' && - hasBlockSupport( - _parentBlockType, - '__experimentalParentSelector', - true - ), }; }, [] ); const blockInformation = useBlockDisplayInformation( parentClientId ); @@ -61,10 +47,6 @@ export default function BlockParentSelector() { highlightParent: true, } ); - if ( ! isVisible ) { - return null; - } - return (
Date: Thu, 5 Dec 2024 18:36:16 +0000 Subject: [PATCH 027/118] Docs: Fix Playwright Page Object Model link. (#67652) Co-authored-by: jorgefilipecosta Co-authored-by: Mamaduka --- docs/contributors/code/e2e/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/contributors/code/e2e/README.md b/docs/contributors/code/e2e/README.md index 3a123cc2988b7..5aa4e21be909f 100644 --- a/docs/contributors/code/e2e/README.md +++ b/docs/contributors/code/e2e/README.md @@ -75,7 +75,7 @@ To encourage better practices for querying elements, selectors are [strict](http ### Favor Page Object Model over utils -As mentioned above, [Page Object Model](https://playwright.dev/docs/test-pom) is the preferred way to create reusable utility functions on a certain page. +As mentioned above, [Page Object Model](https://playwright.dev/docs/pom) is the preferred way to create reusable utility functions on a certain page. The rationale behind using a POM is to group utils under namespaces to be easier to discover and use. In fact, `PageUtils` in the `e2e-test-utils-playwright` package is also a POM, which avoids the need for global variables, and utils can reference each other with `this`. From 63c4d5b1bc5fe0820f59549415b65f3693f08f4e Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Fri, 6 Dec 2024 06:58:34 +0900 Subject: [PATCH 028/118] Revert "Preview: ArgsTable => Controls (#67582)" (#67656) Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: tyxla --- storybook/preview.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/storybook/preview.js b/storybook/preview.js index e173ab3ed1e26..a7c9aa0c085fc 100644 --- a/storybook/preview.js +++ b/storybook/preview.js @@ -2,7 +2,7 @@ * External dependencies */ import { - Controls, + ArgsTable, Description, Primary, Stories, @@ -114,7 +114,8 @@ export const parameters = { - + { /* `story="^"` enables Controls for the primary props table */ } + ), From 34088ef4d10c71183c56b16fc53fb1c6574c4e71 Mon Sep 17 00:00:00 2001 From: Ramon Date: Fri, 6 Dec 2024 14:20:14 +1100 Subject: [PATCH 029/118] Style book: scroll to top at styles root (#67605) Co-authored-by: ramonjd Co-authored-by: tellthemachines --- .../src/components/style-book/index.js | 28 +++++++++++++++---- 1 file changed, 23 insertions(+), 5 deletions(-) diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js index 6a044d8055300..f0992381943aa 100644 --- a/packages/edit-site/src/components/style-book/index.js +++ b/packages/edit-site/src/components/style-book/index.js @@ -67,11 +67,14 @@ function isObjectEmpty( object ) { * @param {HTMLIFrameElement} iframe The target iframe. */ const scrollToSection = ( anchorId, iframe ) => { - if ( ! iframe || ! iframe?.contentDocument ) { + if ( ! anchorId || ! iframe || ! iframe?.contentDocument ) { return; } - const element = iframe.contentDocument.getElementById( anchorId ); + const element = + anchorId === 'top' + ? iframe.contentDocument.body + : iframe.contentDocument.getElementById( anchorId ); if ( element ) { element.scrollIntoView( { behavior: 'smooth', @@ -89,6 +92,12 @@ const scrollToSection = ( anchorId, iframe ) => { */ const getStyleBookNavigationFromPath = ( path ) => { if ( path && typeof path === 'string' ) { + if ( path === '/' ) { + return { + top: true, + }; + } + if ( path.startsWith( '/typography' ) ) { return { block: 'typography', @@ -365,10 +374,19 @@ const StyleBookBody = ( { const handleLoad = () => setHasIframeLoaded( true ); useLayoutEffect( () => { - if ( goTo?.block && hasIframeLoaded && iframeRef?.current ) { - scrollToSection( `example-${ goTo?.block }`, iframeRef?.current ); + if ( hasIframeLoaded && iframeRef?.current ) { + if ( goTo?.top ) { + scrollToSection( 'top', iframeRef?.current ); + return; + } + if ( goTo?.block ) { + scrollToSection( + `example-${ goTo?.block }`, + iframeRef?.current + ); + } } - }, [ iframeRef?.current, goTo?.block, scrollToSection, hasIframeLoaded ] ); + }, [ iframeRef?.current, goTo, scrollToSection, hasIframeLoaded ] ); return ( +
) } ); diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss index 4674b5e5fc3ca..11dbae7bc66b1 100644 --- a/packages/edit-site/src/components/global-styles/style.scss +++ b/packages/edit-site/src/components/global-styles/style.scss @@ -6,7 +6,7 @@ cursor: pointer; } -.edit-site-global-styles-preview__iframe { +.edit-site-global-styles-preview__wrapper { max-width: 100%; display: block; width: 100%; @@ -230,10 +230,6 @@ // The &#{&} is a workaround for the specificity of the Card component. &#{&}, &#{&} .edit-site-global-styles-screen-root__active-style-tile-preview { - box-shadow: none; border-radius: $radius-small; - .block-editor-iframe__container { - border: 1px solid $gray-200; - } } } diff --git a/packages/edit-site/src/components/global-styles/typography-example.js b/packages/edit-site/src/components/global-styles/typography-example.js index a491ca57bf5be..9c0a4e0e1cb13 100644 --- a/packages/edit-site/src/components/global-styles/typography-example.js +++ b/packages/edit-site/src/components/global-styles/typography-example.js @@ -14,7 +14,9 @@ import { unlock } from '../../lock-unlock'; import { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles'; import { getFontFamilies } from './utils'; -const { GlobalStylesContext } = unlock( blockEditorPrivateApis ); +const { useGlobalStyle, GlobalStylesContext } = unlock( + blockEditorPrivateApis +); const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis ); export default function PreviewTypography( { fontSize, variation } ) { @@ -23,6 +25,9 @@ export default function PreviewTypography( { fontSize, variation } ) { if ( variation ) { config = mergeBaseAndUserConfigs( base, variation ); } + + const [ textColor ] = useGlobalStyle( 'color.text' ); + const [ bodyFontFamilies, headingFontFamilies ] = getFontFamilies( config ); const bodyPreviewStyle = bodyFontFamilies ? getFamilyPreviewStyle( bodyFontFamilies ) @@ -31,6 +36,11 @@ export default function PreviewTypography( { fontSize, variation } ) { ? getFamilyPreviewStyle( headingFontFamilies ) : {}; + if ( textColor ) { + bodyPreviewStyle.color = textColor; + headingPreviewStyle.color = textColor; + } + if ( fontSize ) { bodyPreviewStyle.fontSize = fontSize; headingPreviewStyle.fontSize = fontSize; @@ -52,6 +62,7 @@ export default function PreviewTypography( { fontSize, variation } ) { } } style={ { textAlign: 'center', + lineHeight: 1, } } > diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/content.js b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/content.js index 986238697f734..ce8cd32aa009c 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/content.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/content.js @@ -2,54 +2,26 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { useSelect } from '@wordpress/data'; import { __experimentalVStack as VStack } from '@wordpress/components'; -import { BlockEditorProvider } from '@wordpress/block-editor'; /** * Internal dependencies */ import StyleVariationsContainer from '../global-styles/style-variations-container'; -import { unlock } from '../../lock-unlock'; -import { store as editSiteStore } from '../../store'; import ColorVariations from '../global-styles/variations/variations-color'; import TypographyVariations from '../global-styles/variations/variations-typography'; -const noop = () => {}; - export default function SidebarNavigationScreenGlobalStylesContent() { - const { storedSettings } = useSelect( ( select ) => { - const { getSettings } = unlock( select( editSiteStore ) ); - - return { - storedSettings: getSettings(), - }; - }, [] ); - const gap = 3; - // Wrap in a BlockEditorProvider to ensure that the Iframe's dependencies are - // loaded. This is necessary because the Iframe component waits until - // the block editor store's `__internalIsInitialized` is true before - // rendering the iframe. Without this, the iframe previews will not render - // in mobile viewport sizes, where the editor canvas is hidden. return ( - - - - - - - + + + + ); } From 959bb6b006a8e3deecff9aad4e07658878029c26 Mon Sep 17 00:00:00 2001 From: Sarthak Nagoshe <83178197+sarthaknagoshe2002@users.noreply.github.com> Date: Sat, 7 Dec 2024 09:23:09 +0530 Subject: [PATCH 055/118] Simplify description and option names in the Lock modal dialog (#67437) * Refactor Lock modal dialog for improved clarity and simplicity * Fix: modify the e2e test cases * Fix: shorten the text & make it feel more specific Co-authored-by: sarthaknagoshe2002 Co-authored-by: t-hamano Co-authored-by: afercia Co-authored-by: mtias --- .../block-editor/src/components/block-lock/modal.js | 10 ++++------ test/e2e/specs/editor/blocks/columns.spec.js | 2 +- test/e2e/specs/editor/various/block-locking.spec.js | 4 ++-- test/e2e/specs/editor/various/block-switcher.spec.js | 2 +- 4 files changed, 8 insertions(+), 10 deletions(-) diff --git a/packages/block-editor/src/components/block-lock/modal.js b/packages/block-editor/src/components/block-lock/modal.js index 3be23f6adde14..df267e97165e3 100644 --- a/packages/block-editor/src/components/block-lock/modal.js +++ b/packages/block-editor/src/components/block-lock/modal.js @@ -99,9 +99,7 @@ export default function BlockLockModal( { clientId, onClose } ) { >
- { __( - 'Choose specific attributes to restrict or lock all available options.' - ) } + { __( 'Select the features you want to lock' ) } { /* * Disable reason: The `list` ARIA role is redundant but @@ -137,7 +135,7 @@ export default function BlockLockModal( { clientId, onClose } ) {
  • setLock( ( prevLock ) => ( { @@ -159,7 +157,7 @@ export default function BlockLockModal( { clientId, onClose } ) {
  • setLock( ( prevLock ) => ( { @@ -178,7 +176,7 @@ export default function BlockLockModal( { clientId, onClose } ) {
  • setLock( ( prevLock ) => ( { diff --git a/test/e2e/specs/editor/blocks/columns.spec.js b/test/e2e/specs/editor/blocks/columns.spec.js index eea6e321aacb1..29262aef810d2 100644 --- a/test/e2e/specs/editor/blocks/columns.spec.js +++ b/test/e2e/specs/editor/blocks/columns.spec.js @@ -63,7 +63,7 @@ test.describe( 'Columns', () => { ); await editor.clickBlockToolbarButton( 'Options' ); await page.click( 'role=menuitem[name="Lock"i]' ); - await page.locator( 'role=checkbox[name="Prevent removal"i]' ).check(); + await page.locator( 'role=checkbox[name="Lock removal"i]' ).check(); await page.click( 'role=button[name="Apply"i]' ); // Select columns block diff --git a/test/e2e/specs/editor/various/block-locking.spec.js b/test/e2e/specs/editor/various/block-locking.spec.js index eafb468902ef9..a8895d282fb95 100644 --- a/test/e2e/specs/editor/various/block-locking.spec.js +++ b/test/e2e/specs/editor/various/block-locking.spec.js @@ -16,7 +16,7 @@ test.describe( 'Block Locking', () => { await editor.clickBlockOptionsMenuItem( 'Lock' ); - await page.click( 'role=checkbox[name="Prevent removal"]' ); + await page.click( 'role=checkbox[name="Lock removal"]' ); await page.click( 'role=button[name="Apply"]' ); await expect( @@ -35,7 +35,7 @@ test.describe( 'Block Locking', () => { await editor.clickBlockOptionsMenuItem( 'Lock' ); - await page.click( 'role=checkbox[name="Disable movement"]' ); + await page.click( 'role=checkbox[name="Lock movement"]' ); await page.click( 'role=button[name="Apply"]' ); // Hide options. diff --git a/test/e2e/specs/editor/various/block-switcher.spec.js b/test/e2e/specs/editor/various/block-switcher.spec.js index 41b0b1ee49c88..cb95c4d395c66 100644 --- a/test/e2e/specs/editor/various/block-switcher.spec.js +++ b/test/e2e/specs/editor/various/block-switcher.spec.js @@ -107,7 +107,7 @@ test.describe( 'Block Switcher', () => { await expect( button ).toBeEnabled(); await editor.clickBlockOptionsMenuItem( 'Lock' ); - await page.click( 'role=checkbox[name="Prevent removal"]' ); + await page.click( 'role=checkbox[name="Lock removal"]' ); await page.click( 'role=button[name="Apply"]' ); // Verify the block switcher isn't enabled. From 72417c3b89b6c51fae4b1bf550833738f89aefaf Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Sat, 7 Dec 2024 15:42:40 +0900 Subject: [PATCH 056/118] Style book: Fix critical error when blocks are not registered (#67703) Co-authored-by: t-hamano Co-authored-by: ramonjd --- .../src/components/style-book/examples.tsx | 75 ++++++++++++------- .../src/components/style-book/types.ts | 2 +- 2 files changed, 48 insertions(+), 29 deletions(-) diff --git a/packages/edit-site/src/components/style-book/examples.tsx b/packages/edit-site/src/components/style-book/examples.tsx index c944b87b09d7e..cb7b6afcb422c 100644 --- a/packages/edit-site/src/components/style-book/examples.tsx +++ b/packages/edit-site/src/components/style-book/examples.tsx @@ -12,7 +12,12 @@ import { /** * Internal dependencies */ -import type { BlockExample, ColorOrigin, MultiOriginPalettes } from './types'; +import type { + Block, + BlockExample, + ColorOrigin, + MultiOriginPalettes, +} from './types'; import ColorExamples from './color-examples'; import DuotoneExamples from './duotone-examples'; import { STYLE_BOOK_COLOR_GROUPS } from './constants'; @@ -91,30 +96,33 @@ function getOverviewBlockExamples( examples.push( themeColorexample ); } - const headingBlock = createBlock( 'core/heading', { - content: __( - `AaBbCcDdEeFfGgHhiiJjKkLIMmNnOoPpQakRrssTtUuVVWwXxxYyZzOl23356789X{(…)},2!*&:/A@HELFO™` - ), - level: 1, - } ); - const firstParagraphBlock = createBlock( 'core/paragraph', { - content: __( - `A paragraph in a website refers to a distinct block of text that is used to present and organize information. It is a fundamental unit of content in web design and is typically composed of a group of related sentences or thoughts focused on a particular topic or idea. Paragraphs play a crucial role in improving the readability and user experience of a website. They break down the text into smaller, manageable chunks, allowing readers to scan the content more easily.` - ), - } ); - const secondParagraphBlock = createBlock( 'core/paragraph', { - content: __( - `Additionally, paragraphs help structure the flow of information and provide logical breaks between different concepts or pieces of information. In terms of formatting, paragraphs in websites are commonly denoted by a vertical gap or indentation between each block of text. This visual separation helps visually distinguish one paragraph from another, creating a clear and organized layout that guides the reader through the content smoothly.` - ), - } ); + // Get examples for typography blocks. + const typographyBlockExamples: Block[] = []; + + if ( getBlockType( 'core/heading' ) ) { + const headingBlock = createBlock( 'core/heading', { + content: __( + `AaBbCcDdEeFfGgHhiiJjKkLIMmNnOoPpQakRrssTtUuVVWwXxxYyZzOl23356789X{(…)},2!*&:/A@HELFO™` + ), + level: 1, + } ); + typographyBlockExamples.push( headingBlock ); + } + + if ( getBlockType( 'core/paragraph' ) ) { + const firstParagraphBlock = createBlock( 'core/paragraph', { + content: __( + `A paragraph in a website refers to a distinct block of text that is used to present and organize information. It is a fundamental unit of content in web design and is typically composed of a group of related sentences or thoughts focused on a particular topic or idea. Paragraphs play a crucial role in improving the readability and user experience of a website. They break down the text into smaller, manageable chunks, allowing readers to scan the content more easily.` + ), + } ); + const secondParagraphBlock = createBlock( 'core/paragraph', { + content: __( + `Additionally, paragraphs help structure the flow of information and provide logical breaks between different concepts or pieces of information. In terms of formatting, paragraphs in websites are commonly denoted by a vertical gap or indentation between each block of text. This visual separation helps visually distinguish one paragraph from another, creating a clear and organized layout that guides the reader through the content smoothly.` + ), + } ); - const textExample = { - name: 'typography', - title: __( 'Typography' ), - category: 'overview', - blocks: [ - headingBlock, - createBlock( + if ( getBlockType( 'core/group' ) ) { + const groupBlock = createBlock( 'core/group', { layout: { @@ -129,10 +137,21 @@ function getOverviewBlockExamples( }, }, [ firstParagraphBlock, secondParagraphBlock ] - ), - ], - }; - examples.push( textExample ); + ); + typographyBlockExamples.push( groupBlock ); + } else { + typographyBlockExamples.push( firstParagraphBlock ); + } + } + + if ( !! typographyBlockExamples.length ) { + examples.push( { + name: 'typography', + title: __( 'Typography' ), + category: 'overview', + blocks: typographyBlockExamples, + } ); + } const otherBlockExamples = [ 'core/image', diff --git a/packages/edit-site/src/components/style-book/types.ts b/packages/edit-site/src/components/style-book/types.ts index e7be17b17dd4d..9f65039121856 100644 --- a/packages/edit-site/src/components/style-book/types.ts +++ b/packages/edit-site/src/components/style-book/types.ts @@ -1,4 +1,4 @@ -type Block = { +export type Block = { name: string; attributes: Record< string, unknown >; innerBlocks?: Block[]; From df98e3731b300c01a93d0900a59ffb1c60a3a0f3 Mon Sep 17 00:00:00 2001 From: Luigi Teschio Date: Sat, 7 Dec 2024 15:48:51 +0100 Subject: [PATCH 057/118] CreateTemplatePartModal: replace ts-ignore with ts-expect-error (#67709) Co-authored-by: gigitux Co-authored-by: ciampo --- .../src/components/create-template-part-modal/index.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/fields/src/components/create-template-part-modal/index.tsx b/packages/fields/src/components/create-template-part-modal/index.tsx index 03b39a8fdcdf3..c7dc54df84a2a 100644 --- a/packages/fields/src/components/create-template-part-modal/index.tsx +++ b/packages/fields/src/components/create-template-part-modal/index.tsx @@ -28,7 +28,7 @@ import { symbolFilled as symbolFilledIcon, } from '@wordpress/icons'; import { store as noticesStore } from '@wordpress/notices'; -// @ts-ignore +// @ts-expect-error serialize is not typed import { serialize } from '@wordpress/blocks'; /** @@ -64,7 +64,7 @@ export default function CreateTemplatePartModal( { } & CreateTemplatePartModalContentsProps ) { const defaultModalTitle = useSelect( ( select ) => - // @ts-ignore + // @ts-expect-error getPostType is not typed with 'wp_template_part' as argument. select( coreStore ).getPostType( 'wp_template_part' )?.labels ?.add_new_item, [] @@ -77,7 +77,6 @@ export default function CreateTemplatePartModal( { focusOnMount="firstContentElement" size="medium" > - { /* @ts-ignore */ } ); From 7cf1ceddbef6ea3802014c43ea16d193febcb6d1 Mon Sep 17 00:00:00 2001 From: Eshaan Dabasiya <76681468+im3dabasia@users.noreply.github.com> Date: Sun, 8 Dec 2024 07:44:53 +0530 Subject: [PATCH 058/118] Remove .components-item-group selector in edit-site components[2] (#67575) * fix: Removed .components-item-group selector class usage in scss file in edit-site components Applied horizontal margins to the following screens 1. Navigation 2. Pages 3. Templates 4. Patterns * fix: Added sidebar-navigation-screen-main/style.scss file correctly * refactor: CSS code for sidebar in editor Co-authored-by: im3dabasia Co-authored-by: t-hamano Co-authored-by: afercia --- packages/edit-site/src/components/sidebar-dataviews/index.js | 2 +- .../edit-site/src/components/sidebar-dataviews/style.scss | 5 +++++ .../src/components/sidebar-navigation-screen-main/index.js | 2 +- .../src/components/sidebar-navigation-screen-main/style.scss | 4 ++++ .../sidebar-navigation-screen-navigation-menus/index.js | 2 +- .../sidebar-navigation-screen-navigation-menus/style.scss | 5 +++++ .../components/sidebar-navigation-screen-patterns/style.scss | 2 ++ .../sidebar-navigation-screen-templates-browse/content.js | 2 +- .../sidebar-navigation-screen-templates-browse/style.scss | 4 ++++ .../src/components/sidebar-navigation-screen/style.scss | 5 ----- packages/edit-site/src/style.scss | 4 +++- 11 files changed, 27 insertions(+), 10 deletions(-) create mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-main/style.scss create mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/style.scss diff --git a/packages/edit-site/src/components/sidebar-dataviews/index.js b/packages/edit-site/src/components/sidebar-dataviews/index.js index 410767650c6f3..312bf43d6df65 100644 --- a/packages/edit-site/src/components/sidebar-dataviews/index.js +++ b/packages/edit-site/src/components/sidebar-dataviews/index.js @@ -26,7 +26,7 @@ export default function DataViewsSidebarContent( { postType } ) { return ( <> - + { defaultViews.map( ( dataview ) => { return ( + - + { navigationMenus?.map( ( { id, title, status }, index ) => ( + Date: Mon, 9 Dec 2024 13:42:53 +1100 Subject: [PATCH 059/118] Update global stylesheet docblocks with `custom-css` parameter. (#67716) Co-authored-by: tellthemachines Co-authored-by: ramonjd --- backport-changelog/6.8/7976.md | 3 +++ lib/class-wp-theme-json-gutenberg.php | 2 ++ lib/global-styles-and-settings.php | 4 +++- 3 files changed, 8 insertions(+), 1 deletion(-) create mode 100644 backport-changelog/6.8/7976.md diff --git a/backport-changelog/6.8/7976.md b/backport-changelog/6.8/7976.md new file mode 100644 index 0000000000000..e2942d5e4fbe1 --- /dev/null +++ b/backport-changelog/6.8/7976.md @@ -0,0 +1,3 @@ +https://github.com/WordPress/wordpress-develop/pull/7976 + +* https://github.com/WordPress/gutenberg/pull/67716 \ No newline at end of file diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 083ce3516b71a..778dcdbec78d9 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -1319,6 +1319,8 @@ public function get_settings() { * - `variables`: only the CSS Custom Properties for presets & custom ones. * - `styles`: only the styles section in theme.json. * - `presets`: only the classes for the presets. + * - `base-layout-styles`: only the base layout styles. + * - `custom-css`: only the custom CSS. * @param array $origins A list of origins to include. By default it includes VALID_ORIGINS. * @param array $options An array of options for now used for internal purposes only (may change without notice). * The options currently supported are: diff --git a/lib/global-styles-and-settings.php b/lib/global-styles-and-settings.php index c4446cf29cf01..3ff5e6cb135e1 100644 --- a/lib/global-styles-and-settings.php +++ b/lib/global-styles-and-settings.php @@ -9,7 +9,7 @@ * Returns the stylesheet resulting of merging core, theme, and user data. * * @param array $types Types of styles to load. Optional. - * It accepts as values: 'variables', 'presets', 'styles', 'base-layout-styles. + * See {@see 'WP_Theme_JSON::get_stylesheet'} for all valid types. * If empty, it'll load the following: * - for themes without theme.json: 'variables', 'presets', 'base-layout-styles'. * - for themes with theme.json: 'variables', 'presets', 'styles'. @@ -142,6 +142,8 @@ function gutenberg_get_global_settings( $path = array(), $context = array() ) { /** * Gets the global styles custom css from theme.json. * + * @deprecated Gutenberg 18.6.0 Use {@see 'gutenberg_get_global_stylesheet'} instead for top-level custom CSS, or {@see 'WP_Theme_JSON_Gutenberg::get_styles_for_block'} for block-level custom CSS. + * * @return string */ function gutenberg_get_global_styles_custom_css() { From 57c5f849a5fc6ef6b3ba3f90e52c66fbe4ca8c5e Mon Sep 17 00:00:00 2001 From: Dan Knauss <273554+dknauss@users.noreply.github.com> Date: Mon, 9 Dec 2024 01:46:06 -0700 Subject: [PATCH 060/118] Improve DataViews README (#67711) Co-authored-by: dknauss Co-authored-by: oandregal --- packages/dataviews/README.md | 44 ++++++++++++++++++------------------ 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/packages/dataviews/README.md b/packages/dataviews/README.md index 651d87268c28e..6f74a13d8f197 100644 --- a/packages/dataviews/README.md +++ b/packages/dataviews/README.md @@ -1,6 +1,6 @@ # The `@wordpress/dataviews` package -The DataViews package offers two React components and a few utilites to work with a list of data: +The DataViews package offers two React components and a few utilities to work with a list of data: - `DataViews`: to render the dataset using different types of layouts (table, grid, list) and interaction capabilities (search, filters, sorting, etc.). - `DataForm`: to edit the items of the dataset. @@ -15,7 +15,7 @@ npm install @wordpress/dataviews --save ## `DataViews` -
    At WordPress Gutenberg's Storybook there's and example implementation of the Dataviews component.
    +
    At WordPress Gutenberg's Storybook there's an example implementation of the Dataviews component.
    **Important note** If you're trying to use the `DataViews` component in a WordPress plugin or theme and you're building your scripts using the `@wordpress/scripts` package, you need to import the components from `@wordpress/dataviews/wp` instead of `@wordpress/dataviews`. @@ -68,13 +68,13 @@ const data = [ ]; ``` -The data can come from anywhere, from a static JSON file to a dynamic source like a HTTP Request. It's the consumer's responsiblity to query the data source appropiately and update the dataset based on the user's choices for sorting, filtering, etc. +The data can come from anywhere, from a static JSON file to a dynamic source like an HTTP Request. It's the consumer's responsibility to query the data source appropriately and update the dataset based on the user's choices for sorting, filtering, etc. Each record should have an `id` that identifies them uniquely. If they don't, the consumer should provide the `getItemId` property to `DataViews`: a function that returns an unique identifier for the record. #### `getItemId`: `function` -Function that receives an item and returns an unique identifier for it. +A function that receives an item and returns a unique identifier for it. It's optional. The field will get a default implementation by `DataViews` that returns the value of the `item[ id ]`. @@ -185,9 +185,9 @@ Properties: - `field`: the field used for sorting the dataset. - `direction`: the direction to use for sorting, one of `asc` or `desc`. -- `titleField`: The id of the field reprensenting the title of the record. -- `mediaField`: The id of the field reprensenting the media of the record. -- `descriptionField`: The id of field the reprensenting the description of the record. +- `titleField`: The id of the field representing the title of the record. +- `mediaField`: The id of the field representing the media of the record. +- `descriptionField`: The id of the field representing the description of the record. - `showTitle`: Whether the title should be shown in the UI. `true` by default. - `showMedia`: Whether the media should be shown in the UI. `true` by default. - `showDescription`: Whether the description should be shown in the UI. `true` by default. @@ -205,7 +205,7 @@ Properties: Callback executed when the view has changed. It receives the new view object as a parameter. -The view is a representation of the visible state of the dataset: what type of layout is used to display it (table, grid, etc.), how the dataset is filtered, how it is sorted or paginated. It's the consumer's responsibility to use the view config to query the data provider and make sure the user decisions (sort, pagination, filters, etc.) are respected. +The view is a representation of the visible state of the dataset: what type of layout is used to display it (table, grid, etc.), how the dataset is filtered, and how it is sorted or paginated. The consumer is responsible for using the view config to query the data provider and ensure the user decisions (sort, pagination, filters, etc.) are respected. The following example shows how a view object is used to query the WordPress REST API via the entities abstraction. The same can be done with any other data provider. @@ -337,7 +337,7 @@ Whether the data is loading. `false` by default. #### `defaultLayouts`: `Record< string, view >` -This property provides layout information about the view types that are active. If empty, enables all layout types (see "Layout Types") with empty layout data. +This property provides layout information about active view types. If empty, this enables all layout types (see "Layout Types") with empty layout data. For example, this is how you'd enable only the table view type: @@ -358,17 +358,17 @@ The `defaultLayouts` property should be an object that includes properties named The list of selected items' ids. -If `selection` and `onChangeSelection` are provided, the `DataViews` component behaves as a controlled component, otherwise, it behaves like an uncontrolled component. +If `selection` and `onChangeSelection` are provided, the `DataViews` component behaves like a controlled component. Otherwise, it behaves like an uncontrolled component. #### `onChangeSelection`: `function` -Callback that signals the user selected one of more items. It receives the list of selected items' ids as a parameter. +Callback that signals the user selected one of more items. It receives the list of selected items' IDs as a parameter. -If `selection` and `onChangeSelection` are provided, the `DataViews` component behaves as a controlled component, otherwise, it behaves like an uncontrolled component. +If `selection` and `onChangeSelection` are provided, the `DataViews` component behaves like a controlled component. Otherwise, it behaves like an uncontrolled component. ### `isItemClickable`: `function` -A function that determines if a media field or a primary field are clickable. It receives an item as an argument and returns a boolean value indicating whether the item can be clicked. +A function that determines if a media field or a primary field is clickable. It receives an item as an argument and returns a boolean value indicating whether the item can be clicked. ### `onClickItem`: `function` @@ -405,7 +405,7 @@ const Example = () => { A single item to be edited. -It can be think of as a single record coming from the `data` property of `DataViews` — though it doesn't need to be. It can be totally separated or a mix of records if your app supports bulk editing. +It can be thought of as a single record coming from the `data` property of `DataViews` — though it doesn't need to be. It can be totally separated or a mix of records if your app supports bulk editing. #### `fields`: `Object[]` @@ -500,7 +500,7 @@ Returns an object containing: ### `isItemValid` -Utility to determine whether or not the given item's value is valid according to the current fields and form config. +Utility is used to determine whether or not the given item's value is valid according to the current fields and form configuration. Parameters: @@ -687,7 +687,7 @@ Example: Field type. One of `text`, `integer`, `datetime`. -If a field declares a `type`, it gets default implementations for the `sort`, `isValid`, and `Edit` functions. They will overriden if the field provides its own. +If a field declares a `type`, it gets default implementations for the `sort`, `isValid`, and `Edit` functions if no other values are specified. - Type: `string`. - Optional. @@ -732,7 +732,7 @@ Example: ### `getValue` -React component that returns the value of a field. This value is used in sorting the fields, or when filtering. +React component that returns the value of a field. This value is used to sort or filter the fields. - Type: React component. - Optional. @@ -977,13 +977,13 @@ Example: ### `elements` -List of valid values for a field. If provided, it creates a DataViews' filter for the field. DataForm's edit control will use these values as well (see `Edit` field property). +List of valid values for a field. If provided, it creates a DataViews' filter for the field. DataForm's edit control will also use these values. (See `Edit` field property.) - Type: `array` of objects. - Optional. - Each object can have the following properties: - - `value`: required, the value to match against the field's value. - - `label`: required, the name to display to users. + - `value`: the value to match against the field's value. (Required) + - `label`: the name to display to users. (Required) - `description`: optional, a longer description of the item. Example: @@ -1006,7 +1006,7 @@ Configuration of the filters. - Type: `object`. - Optional. - Properties: - - `operators`: the list of operators supported by the field. See "operators" below. By default, a filter will support the `isAny` and `isNone` multi-selection operators. + - `operators`: the list of operators supported by the field. See "operators" below. A filter will support the `isAny` and `isNone` multi-selection operators by default. - `isPrimary`: boolean, optional. Indicates if the filter is primary. A primary filter is always visible and is not listed in the "Add filter" component, except for the list layout where it behaves like a secondary filter. Operators: @@ -1020,7 +1020,7 @@ Operators: | `isAll` | Multiple items | `AND`. The item's field has all of the values in the list. | Category is all: Book, Review, Science Fiction | | `isNotAll` | Multiple items | `NOT AND`. The item's field doesn't have all of the values in the list. | Category is not all: Book, Review, Science Fiction | -`is` and `isNot` are single-selection operators, while `isAny`, `isNone`, `isAll`, and `isNotALl` are multi-selection. By default, a filter with no operators declared will support the `isAny` and `isNone` multi-selection operators. A filter cannot mix single-selection & multi-selection operators; if a single-selection operator is present in the list of valid operators, the multi-selection ones will be discarded and the filter won't allow selecting more than one item. +`is` and `isNot` are single-selection operators, while `isAny`, `isNone`, `isAll`, and `isNotALl` are multi-selection. A filter with no operators declared will support the `isAny` and `isNone` multi-selection operators by default. A filter cannot mix single-selection & multi-selection operators; if a single-selection operator is present in the list of valid operators, the multi-selection ones will be discarded, and the filter won't allow selecting more than one item. Example: From 9e0397303f23d9540e2d6aae2a7aeb30268bd3ce Mon Sep 17 00:00:00 2001 From: Ramon Date: Mon, 9 Dec 2024 20:45:04 +1100 Subject: [PATCH 061/118] Data views: expand config drop down on mobile (#67715) In this view, ensure that the content is horizontally scrollable and the width takes up the screen.Co-authored-by: ramonjd Co-authored-by: ntsekouras Co-authored-by: megane9988 --- .../src/components/dataviews-view-config/index.tsx | 12 ++++++++++-- .../src/components/dataviews-view-config/style.scss | 8 ++++++++ 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/packages/dataviews/src/components/dataviews-view-config/index.tsx b/packages/dataviews/src/components/dataviews-view-config/index.tsx index 28e48525ffa73..3146064a41922 100644 --- a/packages/dataviews/src/components/dataviews-view-config/index.tsx +++ b/packages/dataviews/src/components/dataviews-view-config/index.tsx @@ -53,7 +53,11 @@ interface ViewTypeMenuProps { defaultLayouts?: SupportedLayouts; } -const DATAVIEWS_CONFIG_POPOVER_PROPS = { placement: 'bottom-end', offset: 9 }; +const DATAVIEWS_CONFIG_POPOVER_PROPS = { + className: 'dataviews-config__popover', + placement: 'bottom-end', + offset: 9, +}; function ViewTypeMenu( { defaultLayouts = { list: {}, grid: {}, table: {} }, @@ -619,6 +623,7 @@ function DataviewsViewConfigDropdown() { ); return ( ( - + diff --git a/packages/dataviews/src/components/dataviews-view-config/style.scss b/packages/dataviews/src/components/dataviews-view-config/style.scss index 8427796b6e15e..0fd97b916b4aa 100644 --- a/packages/dataviews/src/components/dataviews-view-config/style.scss +++ b/packages/dataviews/src/components/dataviews-view-config/style.scss @@ -6,6 +6,14 @@ line-height: $default-line-height; } +.dataviews-config__popover.is-expanded .dataviews-config__popover-content-wrapper { + overflow-y: scroll; + height: 100%; + .dataviews-view-config { + width: auto; + } +} + .dataviews-view-config__sort-direction .components-toggle-group-control-option-base { text-transform: uppercase; } From ce01840f5d937ce13f780a19bfb7deba9bfa9ea6 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Mon, 9 Dec 2024 14:34:28 +0400 Subject: [PATCH 062/118] Data: Include more details when shallow equality fails in 'useSelect' (#67713) Co-authored-by: Mamaduka Co-authored-by: jsnajdr Co-authored-by: tyxla --- .../data/src/components/use-select/index.js | 24 +++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/packages/data/src/components/use-select/index.js b/packages/data/src/components/use-select/index.js index 15a3c88d2d554..6931743151773 100644 --- a/packages/data/src/components/use-select/index.js +++ b/packages/data/src/components/use-select/index.js @@ -19,6 +19,25 @@ import useAsyncMode from '../async-mode-provider/use-async-mode'; const renderQueue = createQueue(); +function warnOnUnstableReference( a, b ) { + if ( ! a || ! b ) { + return; + } + + const keys = + typeof a === 'object' && typeof b === 'object' + ? Object.keys( a ).filter( ( k ) => a[ k ] !== b[ k ] ) + : []; + + // eslint-disable-next-line no-console + console.warn( + 'The `useSelect` hook returns different values when called with the same state and parameters.\n' + + 'This can lead to unnecessary re-renders and performance issues if not fixed.\n\n' + + 'Non-equal value keys: %s\n\n', + keys.join( ', ' ) + ); +} + /** * @typedef {import('../../types').StoreDescriptor} StoreDescriptor * @template {import('../../types').AnyConfig} C @@ -159,10 +178,7 @@ function Store( registry, suspense ) { if ( ! didWarnUnstableReference ) { const secondMapResult = mapSelect( select, registry ); if ( ! isShallowEqual( mapResult, secondMapResult ) ) { - // eslint-disable-next-line no-console - console.warn( - `The 'useSelect' hook returns different values when called with the same state and parameters. This can lead to unnecessary rerenders.` - ); + warnOnUnstableReference( mapResult, secondMapResult ); didWarnUnstableReference = true; } } From 0d757db8ccb47988d9d3655c2b3ca86c1a6072dc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20K=C3=A4gy?= Date: Mon, 9 Dec 2024 11:45:07 +0100 Subject: [PATCH 063/118] Feature: add ability to show drop cap setting in paragraph block by default via defaultControls config (#45994) Co-authored-by: fabiankaegy Co-authored-by: Mamaduka Co-authored-by: youknowriad Co-authored-by: aaronrobertshaw Co-authored-by: jasmussen Co-authored-by: carolinan Co-authored-by: jeffpaul Co-authored-by: jordesign --- packages/block-library/src/paragraph/edit.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js index d32b4e8d5eca0..02ca1feceae55 100644 --- a/packages/block-library/src/paragraph/edit.js +++ b/packages/block-library/src/paragraph/edit.js @@ -21,6 +21,7 @@ import { useSettings, useBlockEditingMode, } from '@wordpress/block-editor'; +import { getBlockSupport } from '@wordpress/blocks'; import { formatLtr } from '@wordpress/icons'; /** @@ -47,7 +48,7 @@ function hasDropCapDisabled( align ) { return align === ( isRTL() ? 'left' : 'right' ) || align === 'center'; } -function DropCapControl( { clientId, attributes, setAttributes } ) { +function DropCapControl( { clientId, attributes, setAttributes, name } ) { // Please do not add a useSelect call to the paragraph block unconditionally. // Every useSelect added to a (frequently used) block will degrade load // and type performance. By moving it within InspectorControls, the subscription is @@ -69,11 +70,18 @@ function DropCapControl( { clientId, attributes, setAttributes } ) { helpText = __( 'Show a large initial letter.' ); } + const isDropCapControlEnabledByDefault = getBlockSupport( + name, + 'typography.defaultControls.dropCap', + false + ); + return ( !! dropCap } label={ __( 'Drop cap' ) } + isShownByDefault={ isDropCapControlEnabledByDefault } onDeselect={ () => setAttributes( { dropCap: undefined } ) } resetAllFilter={ () => ( { dropCap: undefined } ) } panelId={ clientId } @@ -99,6 +107,7 @@ function ParagraphBlock( { setAttributes, clientId, isSelected: isSingleSelected, + name, } ) { const { align, content, direction, dropCap, placeholder } = attributes; const blockProps = useBlockProps( { @@ -136,6 +145,7 @@ function ParagraphBlock( { ) } { isSingleSelected && ( Date: Mon, 9 Dec 2024 11:46:54 +0100 Subject: [PATCH 064/118] Feature: Allow Post Template block to get deeply nested within Query Block (#67657) Co-authored-by: fabiankaegy Co-authored-by: carolinan Co-authored-by: youknowriad Co-authored-by: Mamaduka Co-authored-by: ntsekouras --- docs/reference-guides/core-blocks.md | 2 +- packages/block-library/src/post-template/block.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 29033e278c348..71ad6359adca0 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -660,7 +660,7 @@ Contains the block elements used to render a post, like the title, date, feature - **Name:** core/post-template - **Category:** theme -- **Parent:** core/query +- **Ancestor:** core/query - **Supports:** align (full, wide), color (background, gradients, link, text), interactivity (clientNavigation), layout, spacing (blockGap), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~ ## Post Terms diff --git a/packages/block-library/src/post-template/block.json b/packages/block-library/src/post-template/block.json index da576a83312a4..6e1f58155590f 100644 --- a/packages/block-library/src/post-template/block.json +++ b/packages/block-library/src/post-template/block.json @@ -4,7 +4,7 @@ "name": "core/post-template", "title": "Post Template", "category": "theme", - "parent": [ "core/query" ], + "ancestor": [ "core/query" ], "description": "Contains the block elements used to render a post, like the title, date, featured image, content or excerpt, and more.", "textdomain": "default", "usesContext": [ From 5e3d5752cca4e9005f09b1c2a8ec1a1ff89275bc Mon Sep 17 00:00:00 2001 From: Nik Tsekouras Date: Mon, 9 Dec 2024 13:38:06 +0200 Subject: [PATCH 065/118] DataViews: Refactor actions to render modal outside of the menu (#67664) Co-authored-by: ntsekouras Co-authored-by: oandregal Co-authored-by: ciampo Co-authored-by: doekenorg --- .../dataviews-bulk-actions/index.tsx | 46 ++++- .../dataviews-item-actions/index.tsx | 186 ++++++++---------- .../src/dataviews-layouts/list/index.tsx | 14 ++ .../src/components/post-actions/index.js | 133 +++++-------- 4 files changed, 194 insertions(+), 185 deletions(-) diff --git a/packages/dataviews/src/components/dataviews-bulk-actions/index.tsx b/packages/dataviews/src/components/dataviews-bulk-actions/index.tsx index 92a3fe85f67e7..86f0bb6db0ba8 100644 --- a/packages/dataviews/src/components/dataviews-bulk-actions/index.tsx +++ b/packages/dataviews/src/components/dataviews-bulk-actions/index.tsx @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import type { ReactElement } from 'react'; + /** * WordPress dependencies */ @@ -15,11 +20,46 @@ import { closeSmall } from '@wordpress/icons'; * Internal dependencies */ import DataViewsContext from '../dataviews-context'; -import { ActionWithModal } from '../dataviews-item-actions'; -import type { Action } from '../../types'; +import { ActionModal } from '../dataviews-item-actions'; +import type { Action, ActionModal as ActionModalType } from '../../types'; import type { SetSelection } from '../../private-types'; import type { ActionTriggerProps } from '../dataviews-item-actions'; +interface ActionWithModalProps< Item > { + action: ActionModalType< Item >; + items: Item[]; + ActionTriggerComponent: ( + props: ActionTriggerProps< Item > + ) => ReactElement; +} + +function ActionWithModal< Item >( { + action, + items, + ActionTriggerComponent, +}: ActionWithModalProps< Item > ) { + const [ isModalOpen, setIsModalOpen ] = useState( false ); + const actionTriggerProps = { + action, + onClick: () => { + setIsModalOpen( true ); + }, + items, + }; + return ( + <> + + { isModalOpen && ( + setIsModalOpen( false ) } + /> + ) } + + ); +} + export function useHasAPossibleBulkAction< Item >( actions: Action< Item >[], item: Item @@ -160,7 +200,7 @@ function ActionButton< Item >( { key={ action.id } action={ action } items={ selectedEligibleItems } - ActionTrigger={ ActionTrigger } + ActionTriggerComponent={ ActionTrigger } /> ); } diff --git a/packages/dataviews/src/components/dataviews-item-actions/index.tsx b/packages/dataviews/src/components/dataviews-item-actions/index.tsx index c5e1cb09adf15..abe63e27a15b3 100644 --- a/packages/dataviews/src/components/dataviews-item-actions/index.tsx +++ b/packages/dataviews/src/components/dataviews-item-actions/index.tsx @@ -1,7 +1,7 @@ /** * External dependencies */ -import type { MouseEventHandler, ReactElement } from 'react'; +import type { MouseEventHandler } from 'react'; /** * WordPress dependencies @@ -32,20 +32,17 @@ export interface ActionTriggerProps< Item > { items: Item[]; } -interface ActionModalProps< Item > { +export interface ActionModalProps< Item > { action: ActionModalType< Item >; items: Item[]; - closeModal?: () => void; -} - -interface ActionWithModalProps< Item > extends ActionModalProps< Item > { - ActionTrigger: ( props: ActionTriggerProps< Item > ) => ReactElement; - isBusy?: boolean; + closeModal: () => void; } interface ActionsMenuGroupProps< Item > { actions: Action< Item >[]; item: Item; + registry: ReturnType< typeof useRegistry >; + setActiveModalAction: ( action: ActionModalType< Item > | null ) => void; } interface ItemActionsProps< Item > { @@ -58,6 +55,7 @@ interface CompactItemActionsProps< Item > { item: Item; actions: Action< Item >[]; isSmall?: boolean; + registry: ReturnType< typeof useRegistry >; } interface PrimaryActionsProps< Item > { @@ -65,12 +63,6 @@ interface PrimaryActionsProps< Item > { actions: Action< Item >[]; registry: ReturnType< typeof useRegistry >; } -interface ActionsListProps< Item > { - item: Item; - actions: Action< Item >[]; - registry: ReturnType< typeof useRegistry >; - ActionTrigger: ( props: ActionTriggerProps< Item > ) => ReactElement; -} function ButtonTrigger< Item >( { action, @@ -98,10 +90,7 @@ function MenuItemTrigger< Item >( { const label = typeof action.label === 'string' ? action.label : action.label( items ); return ( - + { label } ); @@ -118,7 +107,7 @@ export function ActionModal< Item >( { {} ) } + onRequestClose={ closeModal } focusOnMount="firstContentElement" size="medium" overlayClassName={ `dataviews-action-modal dataviews-action-modal__${ kebabCase( @@ -130,48 +119,28 @@ export function ActionModal< Item >( { ); } -export function ActionWithModal< Item >( { - action, - items, - ActionTrigger, - isBusy, -}: ActionWithModalProps< Item > ) { - const [ isModalOpen, setIsModalOpen ] = useState( false ); - const actionTriggerProps = { - action, - onClick: () => { - setIsModalOpen( true ); - }, - items, - isBusy, - }; - return ( - <> - - { isModalOpen && ( - setIsModalOpen( false ) } - /> - ) } - - ); -} - export function ActionsMenuGroup< Item >( { actions, item, + registry, + setActiveModalAction, }: ActionsMenuGroupProps< Item > ) { - const registry = useRegistry(); return ( - + { actions.map( ( action ) => ( + { + if ( 'RenderModal' in action ) { + setActiveModalAction( action ); + return; + } + action.callback( [ item ], { registry } ); + } } + items={ [ item ] } + /> + ) ) } ); } @@ -210,6 +179,7 @@ export default function ItemActions< Item >( { item={ item } actions={ eligibleActions } isSmall + registry={ registry } /> ); } @@ -239,7 +209,11 @@ export default function ItemActions< Item >( { actions={ primaryActions } registry={ registry } /> - + ); } @@ -248,23 +222,41 @@ function CompactItemActions< Item >( { item, actions, isSmall, + registry, }: CompactItemActionsProps< Item > ) { + const [ activeModalAction, setActiveModalAction ] = useState( + null as ActionModalType< Item > | null + ); return ( - + + } + placement="bottom-end" + > + - } - placement="bottom-end" - > - - + + { !! activeModalAction && ( + setActiveModalAction( null ) } + /> + ) } + ); } @@ -273,45 +265,33 @@ function PrimaryActions< Item >( { actions, registry, }: PrimaryActionsProps< Item > ) { + const [ activeModalAction, setActiveModalAction ] = useState( null as any ); if ( ! Array.isArray( actions ) || actions.length === 0 ) { return null; } return ( - - ); -} - -function ActionsList< Item >( { - item, - actions, - registry, - ActionTrigger, -}: ActionsListProps< Item > ) { - return actions.map( ( action ) => { - if ( 'RenderModal' in action ) { - return ( - + { actions.map( ( action ) => ( + { + if ( 'RenderModal' in action ) { + setActiveModalAction( action ); + return; + } + action.callback( [ item ], { registry } ); + } } items={ [ item ] } - ActionTrigger={ ActionTrigger } /> - ); - } - return ( - { - action.callback( [ item ], { registry } ); - } } - items={ [ item ] } - /> - ); - } ); + ) ) } + { !! activeModalAction && ( + setActiveModalAction( null ) } + /> + ) } + + ); } diff --git a/packages/dataviews/src/dataviews-layouts/list/index.tsx b/packages/dataviews/src/dataviews-layouts/list/index.tsx index d400cc6274169..62d813c1485af 100644 --- a/packages/dataviews/src/dataviews-layouts/list/index.tsx +++ b/packages/dataviews/src/dataviews-layouts/list/index.tsx @@ -40,6 +40,7 @@ import type { NormalizedField, ViewList as ViewListType, ViewListProps, + ActionModal as ActionModalType, } from '../../types'; interface ListViewItemProps< Item > { @@ -154,7 +155,11 @@ function ListItem< Item >( { const labelId = `${ idPrefix }-label`; const descriptionId = `${ idPrefix }-description`; + const registry = useRegistry(); const [ isHovered, setIsHovered ] = useState( false ); + const [ activeModalAction, setActiveModalAction ] = useState( + null as ActionModalType< Item > | null + ); const handleHover: React.MouseEventHandler = ( { type } ) => { const isHover = type === 'mouseenter'; setIsHovered( isHover ); @@ -233,8 +238,17 @@ function ListItem< Item >( { + { !! activeModalAction && ( + setActiveModalAction( null ) } + /> + ) }
    • ) } diff --git a/packages/editor/src/components/post-actions/index.js b/packages/editor/src/components/post-actions/index.js index ab11b5e318b5a..bfdddb4a5a062 100644 --- a/packages/editor/src/components/post-actions/index.js +++ b/packages/editor/src/components/post-actions/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { useSelect } from '@wordpress/data'; +import { useRegistry, useSelect } from '@wordpress/data'; import { useState, useMemo } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { @@ -21,7 +21,7 @@ import { usePostActions } from './actions'; const { Menu, kebabCase } = unlock( componentsPrivateApis ); export default function PostActions( { postType, postId, onActionPerformed } ) { - const [ isActionsMenuOpen, setIsActionsMenuOpen ] = useState( false ); + const [ activeModalAction, setActiveModalAction ] = useState( null ); const { item, permissions } = useSelect( ( select ) => { const { getEditedEntityRecord, getEntityRecordPermissions } = @@ -54,32 +54,34 @@ export default function PostActions( { postType, postId, onActionPerformed } ) { }, [ allActions, itemWithPermissions ] ); return ( - - setIsActionsMenuOpen( ! isActionsMenuOpen ) - } + <> + + } + placement="bottom-end" + > + - } - onOpenChange={ setIsActionsMenuOpen } - placement="bottom-end" - > - { - setIsActionsMenuOpen( false ); - } } - /> - + + { !! activeModalAction && ( + setActiveModalAction( null ) } + /> + ) } + ); } @@ -88,78 +90,51 @@ export default function PostActions( { postType, postId, onActionPerformed } ) { // and the dataviews package should not be using the editor packages directly, // so duplicating the code here seems like the least bad option. -// Copied as is from packages/dataviews/src/item-actions.js function DropdownMenuItemTrigger( { action, onClick, items } ) { const label = typeof action.label === 'string' ? action.label : action.label( items ); return ( - + { label } ); } -// Copied as is from packages/dataviews/src/item-actions.js -// With an added onClose prop. -function ActionWithModal( { action, item, ActionTrigger, onClose } ) { - const [ isModalOpen, setIsModalOpen ] = useState( false ); - const actionTriggerProps = { - action, - onClick: () => setIsModalOpen( true ), - items: [ item ], - }; - const { RenderModal, hideModalHeader } = action; +export function ActionModal( { action, items, closeModal } ) { + const label = + typeof action.label === 'string' ? action.label : action.label( items ); return ( - <> - - { isModalOpen && ( - { - setIsModalOpen( false ); - } } - overlayClassName={ `editor-action-modal editor-action-modal__${ kebabCase( - action.id - ) }` } - focusOnMount="firstContentElement" - size="medium" - > - { - setIsModalOpen( false ); - onClose(); - } } - /> - - ) } - + {} ) } + focusOnMount="firstContentElement" + size="medium" + overlayClassName={ `editor-action-modal editor-action-modal__${ kebabCase( + action.id + ) }` } + > + + ); } -// Copied as is from packages/dataviews/src/item-actions.js -// With an added onClose prop. -function ActionsDropdownMenuGroup( { actions, item, onClose } ) { +function ActionsDropdownMenuGroup( { actions, item, setActiveModalAction } ) { + const registry = useRegistry(); return ( { actions.map( ( action ) => { - if ( action.RenderModal ) { - return ( - - ); - } return ( action.callback( [ item ] ) } + onClick={ () => { + if ( 'RenderModal' in action ) { + setActiveModalAction( action ); + return; + } + action.callback( [ item ], { registry } ); + } } items={ [ item ] } /> ); From 91b130b2db14028768e8e85fdf83ac8e5cb0b5b8 Mon Sep 17 00:00:00 2001 From: Nik Tsekouras Date: Mon, 9 Dec 2024 14:55:49 +0200 Subject: [PATCH 066/118] [Block Library]: Update the relationship of `No results` block to `ancestor` (#48348) Co-authored-by: ntsekouras Co-authored-by: Mamaduka Co-authored-by: gziolo Co-authored-by: webmandesign --- docs/reference-guides/core-blocks.md | 2 +- packages/block-library/src/query-no-results/block.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 71ad6359adca0..7800eae6c7f2e 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -724,7 +724,7 @@ Contains the block elements used to render content when no query results are fou - **Name:** core/query-no-results - **Category:** theme -- **Parent:** core/query +- **Ancestor:** core/query - **Supports:** align, color (background, gradients, link, text), interactivity (clientNavigation), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~ ## Pagination diff --git a/packages/block-library/src/query-no-results/block.json b/packages/block-library/src/query-no-results/block.json index 2f656594afa30..c7d3ff500e0f4 100644 --- a/packages/block-library/src/query-no-results/block.json +++ b/packages/block-library/src/query-no-results/block.json @@ -5,7 +5,7 @@ "title": "No results", "category": "theme", "description": "Contains the block elements used to render content when no query results are found.", - "parent": [ "core/query" ], + "ancestor": [ "core/query" ], "textdomain": "default", "usesContext": [ "queryId", "query" ], "example": { From 01543397474a600dc1b75f309071d03d6103d4f5 Mon Sep 17 00:00:00 2001 From: Matias Benedetto Date: Mon, 9 Dec 2024 10:14:12 -0300 Subject: [PATCH 067/118] Stylebook: render overview colors in 4 columns (#67597) * render overview colors in 4 columns * use templateColums instead of colums to enable responsive columns * use templateColumns instead of columns * tweak CSS Co-authored-by: matiasbenedetto Co-authored-by: tellthemachines Co-authored-by: jasmussen --- .../components/style-book/color-examples.tsx | 24 ++++++++++++++++--- .../src/components/style-book/constants.ts | 1 - .../src/components/style-book/examples.tsx | 7 +++++- 3 files changed, 27 insertions(+), 5 deletions(-) diff --git a/packages/edit-site/src/components/style-book/color-examples.tsx b/packages/edit-site/src/components/style-book/color-examples.tsx index 97bdeecee32d3..bdc7bc7936bc1 100644 --- a/packages/edit-site/src/components/style-book/color-examples.tsx +++ b/packages/edit-site/src/components/style-book/color-examples.tsx @@ -18,13 +18,25 @@ import { */ import type { Color, Gradient } from './types'; -const ColorExamples = ( { colors, type } ): JSX.Element | null => { +type Props = { + colors: Color[] | Gradient[]; + type: 'colors' | 'gradients'; + templateColumns?: string | number; + itemHeight?: string; +}; + +const ColorExamples = ( { + colors, + type, + templateColumns = '1fr 1fr', + itemHeight = '52px', +}: Props ): JSX.Element | null => { if ( ! colors ) { return null; } return ( - + { colors.map( ( color: Color | Gradient ) => { const className = type === 'gradients' @@ -35,7 +47,13 @@ const ColorExamples = ( { colors, type } ): JSX.Element | null => { className ); - return ; + return ( + + ); } ) } ); diff --git a/packages/edit-site/src/components/style-book/constants.ts b/packages/edit-site/src/components/style-book/constants.ts index 0cbbaec07086d..401d532b98cbb 100644 --- a/packages/edit-site/src/components/style-book/constants.ts +++ b/packages/edit-site/src/components/style-book/constants.ts @@ -220,7 +220,6 @@ export const STYLE_BOOK_IFRAME_STYLES = ` } .edit-site-style-book__color-example { - height: 32px; border: 1px solid color-mix( in srgb, currentColor 10%, transparent ); } diff --git a/packages/edit-site/src/components/style-book/examples.tsx b/packages/edit-site/src/components/style-book/examples.tsx index cb7b6afcb422c..b585d556341f8 100644 --- a/packages/edit-site/src/components/style-book/examples.tsx +++ b/packages/edit-site/src/components/style-book/examples.tsx @@ -89,7 +89,12 @@ function getOverviewBlockExamples( title: __( 'Colors' ), category: 'overview', content: ( - + ), }; From e7724382e790db993682263121e917120d4daa68 Mon Sep 17 00:00:00 2001 From: Marin Atanasov <8436925+tyxla@users.noreply.github.com> Date: Mon, 9 Dec 2024 16:00:48 +0200 Subject: [PATCH 068/118] Navigation: Fix active item hover color (#67732) * Navigation: Fix active item hover color * Add CHANGELOG entry * Fix duplicate Enhancements sections Co-authored-by: tyxla Co-authored-by: mirka <0mirka00@git.wordpress.org> --- packages/components/CHANGELOG.md | 13 +++++-------- .../src/navigation/styles/navigation-styles.tsx | 1 + 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 2d2761924fb63..047d190ee3c5d 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -11,6 +11,11 @@ - `GradientPicker`: Add `enableAlpha` prop ([#66974](https://github.com/WordPress/gutenberg/pull/66974)) - `CustomGradientPicker`: Add `enableAlpha` prop ([#66974](https://github.com/WordPress/gutenberg/pull/66974)) - `RangeControl`: Update the design of the range control marks ([#67611](https://github.com/WordPress/gutenberg/pull/67611)) +- `BorderBoxControl`: Reduce gap value when unlinked ([#67049](https://github.com/WordPress/gutenberg/pull/67049)). +- `DropdownMenu`: Increase option height to 40px ([#67435](https://github.com/WordPress/gutenberg/pull/67435)). +- `MenuItem`: Increase height to 40px ([#67435](https://github.com/WordPress/gutenberg/pull/67435)). +- `MenuItemsChoice`: Increase option height to 40px ([#67435](https://github.com/WordPress/gutenberg/pull/67435)). +- `Navigation`: Fix active item hover color ([#67732](https://github.com/WordPress/gutenberg/pull/67732)). ### Deprecations @@ -22,14 +27,6 @@ - `FormFileUpload`: Deprecate 36px default size ([#67438](https://github.com/WordPress/gutenberg/pull/67438)). - `FormTokenField`: Deprecate 36px default size ([#67454](https://github.com/WordPress/gutenberg/pull/67454)). - -### Enhancements - -- `BorderBoxControl`: Reduce gap value when unlinked ([#67049](https://github.com/WordPress/gutenberg/pull/67049)). -- `DropdownMenu`: Increase option height to 40px ([#67435](https://github.com/WordPress/gutenberg/pull/67435)). -- `MenuItem`: Increase height to 40px ([#67435](https://github.com/WordPress/gutenberg/pull/67435)). -- `MenuItemsChoice`: Increase option height to 40px ([#67435](https://github.com/WordPress/gutenberg/pull/67435)). - ### Experimental - `Menu`: throw when subcomponents are not rendered inside top level `Menu` ([#67411](https://github.com/WordPress/gutenberg/pull/67411)). diff --git a/packages/components/src/navigation/styles/navigation-styles.tsx b/packages/components/src/navigation/styles/navigation-styles.tsx index 580c0eef4dba8..71dbccd7717c4 100644 --- a/packages/components/src/navigation/styles/navigation-styles.tsx +++ b/packages/components/src/navigation/styles/navigation-styles.tsx @@ -137,6 +137,7 @@ export const ItemBaseUI = styled.li` color: ${ COLORS.white }; > button, + .components-button:hover, > a { color: ${ COLORS.white }; opacity: 1; From 896b316bc774f0b2da4b4b916196fba4877945a0 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Mon, 9 Dec 2024 23:09:46 +0900 Subject: [PATCH 069/118] Components: Deprecate `COLORS.white` (#67649) * Components: Deprecate `COLORS.white` * Add changelogs * Update snapshot Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: tyxla --- packages/components/CHANGELOG.md | 3 ++ packages/components/src/menu/styles.ts | 2 +- .../navigation/styles/navigation-styles.tsx | 4 +- .../test/__snapshots__/index.tsx.snap | 44 +++++++++---------- .../styles.ts | 12 ++--- .../toggle-group-control/styles.ts | 2 +- .../components/src/utils/colors-values.js | 3 ++ .../components/src/utils/config-values.js | 1 - 8 files changed, 38 insertions(+), 33 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 047d190ee3c5d..249d4f3f65b93 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -10,6 +10,9 @@ - `GradientPicker`: Add `enableAlpha` prop ([#66974](https://github.com/WordPress/gutenberg/pull/66974)) - `CustomGradientPicker`: Add `enableAlpha` prop ([#66974](https://github.com/WordPress/gutenberg/pull/66974)) +- `Menu`: Replace hardcoded white color with theme-ready variable ([#67649](https://github.com/WordPress/gutenberg/pull/67649)). +- `Navigation` (deprecated): Replace hardcoded white color with theme-ready variable ([#67649](https://github.com/WordPress/gutenberg/pull/67649)). +- `ToggleGroupControl`: Replace hardcoded white color with theme-ready variable ([#67649](https://github.com/WordPress/gutenberg/pull/67649)). - `RangeControl`: Update the design of the range control marks ([#67611](https://github.com/WordPress/gutenberg/pull/67611)) - `BorderBoxControl`: Reduce gap value when unlinked ([#67049](https://github.com/WordPress/gutenberg/pull/67049)). - `DropdownMenu`: Increase option height to 40px ([#67435](https://github.com/WordPress/gutenberg/pull/67435)). diff --git a/packages/components/src/menu/styles.ts b/packages/components/src/menu/styles.ts index 0e0752bf24cd1..cda5c7321f38b 100644 --- a/packages/components/src/menu/styles.ts +++ b/packages/components/src/menu/styles.ts @@ -201,7 +201,7 @@ const baseItem = css` [aria-disabled='true'] ) { background-color: ${ COLORS.theme.accent }; - color: ${ COLORS.white }; + color: ${ COLORS.theme.accentInverted }; } /* Keyboard focus (focus-visible) */ diff --git a/packages/components/src/navigation/styles/navigation-styles.tsx b/packages/components/src/navigation/styles/navigation-styles.tsx index 71dbccd7717c4..aa0976a9a0f27 100644 --- a/packages/components/src/navigation/styles/navigation-styles.tsx +++ b/packages/components/src/navigation/styles/navigation-styles.tsx @@ -134,12 +134,12 @@ export const ItemBaseUI = styled.li` &.is-active { background-color: ${ COLORS.theme.accent }; - color: ${ COLORS.white }; + color: ${ COLORS.theme.accentInverted }; > button, .components-button:hover, > a { - color: ${ COLORS.white }; + color: ${ COLORS.theme.accentInverted }; opacity: 1; } } diff --git a/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap b/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap index f344cd6ba1652..91e9f291ddf01 100644 --- a/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap +++ b/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap @@ -72,7 +72,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] = content: ''; position: absolute; pointer-events: none; - background: #1e1e1e; + background: var(--wp-components-color-foreground, #1e1e1e); outline: 2px solid transparent; outline-offset: -3px; --antialiasing-factor: 100; @@ -134,7 +134,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] = background: transparent; border: none; border-radius: 1px; - color: #757575; + color: var(--wp-components-color-gray-700, #757575); fill: currentColor; cursor: pointer; display: -webkit-box; @@ -158,12 +158,12 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] = user-select: none; width: 100%; z-index: 2; - color: #1e1e1e; + color: var(--wp-components-color-foreground, #1e1e1e); height: 32px; aspect-ratio: 1; padding-left: 0; padding-right: 0; - color: #fff; + color: var(--wp-components-color-foreground-inverted, #fff); } @media not ( prefers-reduced-motion ) { @@ -183,7 +183,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] = } .emotion-12:active { - background: #fff; + background: var(--wp-components-color-background, #fff); } .emotion-12:active { @@ -211,7 +211,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] = background: transparent; border: none; border-radius: 1px; - color: #757575; + color: var(--wp-components-color-gray-700, #757575); fill: currentColor; cursor: pointer; display: -webkit-box; @@ -235,7 +235,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] = user-select: none; width: 100%; z-index: 2; - color: #1e1e1e; + color: var(--wp-components-color-foreground, #1e1e1e); height: 32px; aspect-ratio: 1; padding-left: 0; @@ -259,7 +259,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] = } .emotion-17:active { - background: #fff; + background: var(--wp-components-color-background, #fff); }
    @@ -437,7 +437,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options content: ''; position: absolute; pointer-events: none; - background: #1e1e1e; + background: var(--wp-components-color-foreground, #1e1e1e); outline: 2px solid transparent; outline-offset: -3px; --antialiasing-factor: 100; @@ -499,7 +499,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options background: transparent; border: none; border-radius: 1px; - color: #757575; + color: var(--wp-components-color-gray-700, #757575); fill: currentColor; cursor: pointer; display: -webkit-box; @@ -542,7 +542,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options } .emotion-12:active { - background: #fff; + background: var(--wp-components-color-background, #fff); } .emotion-13 { @@ -706,7 +706,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`] content: ''; position: absolute; pointer-events: none; - background: #1e1e1e; + background: var(--wp-components-color-foreground, #1e1e1e); outline: 2px solid transparent; outline-offset: -3px; --antialiasing-factor: 100; @@ -768,7 +768,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`] background: transparent; border: none; border-radius: 1px; - color: #757575; + color: var(--wp-components-color-gray-700, #757575); fill: currentColor; cursor: pointer; display: -webkit-box; @@ -792,12 +792,12 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`] user-select: none; width: 100%; z-index: 2; - color: #1e1e1e; + color: var(--wp-components-color-foreground, #1e1e1e); height: 32px; aspect-ratio: 1; padding-left: 0; padding-right: 0; - color: #fff; + color: var(--wp-components-color-foreground-inverted, #fff); } @media not ( prefers-reduced-motion ) { @@ -817,7 +817,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`] } .emotion-12:active { - background: #fff; + background: var(--wp-components-color-background, #fff); } .emotion-12:active { @@ -845,7 +845,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`] background: transparent; border: none; border-radius: 1px; - color: #757575; + color: var(--wp-components-color-gray-700, #757575); fill: currentColor; cursor: pointer; display: -webkit-box; @@ -869,7 +869,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`] user-select: none; width: 100%; z-index: 2; - color: #1e1e1e; + color: var(--wp-components-color-foreground, #1e1e1e); height: 32px; aspect-ratio: 1; padding-left: 0; @@ -893,7 +893,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`] } .emotion-17:active { - background: #fff; + background: var(--wp-components-color-background, #fff); }
    @@ -1065,7 +1065,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio content: ''; position: absolute; pointer-events: none; - background: #1e1e1e; + background: var(--wp-components-color-foreground, #1e1e1e); outline: 2px solid transparent; outline-offset: -3px; --antialiasing-factor: 100; @@ -1127,7 +1127,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio background: transparent; border: none; border-radius: 1px; - color: #757575; + color: var(--wp-components-color-gray-700, #757575); fill: currentColor; cursor: pointer; display: -webkit-box; @@ -1170,7 +1170,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio } .emotion-12:active { - background: #fff; + background: var(--wp-components-color-background, #fff); } .emotion-13 { diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts b/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts index c0248f9b3f7f2..a53eced1219db 100644 --- a/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts +++ b/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts @@ -38,7 +38,7 @@ export const buttonView = ( { background: transparent; border: none; border-radius: ${ CONFIG.radiusXSmall }; - color: ${ COLORS.gray[ 700 ] }; + color: ${ COLORS.theme.gray[ 700 ] }; fill: currentColor; cursor: pointer; display: flex; @@ -70,7 +70,7 @@ export const buttonView = ( { } &:active { - background: ${ CONFIG.controlBackgroundColor }; + background: ${ COLORS.ui.background }; } ${ isDeselectable && deselectable } @@ -79,7 +79,7 @@ export const buttonView = ( { `; const pressed = css` - color: ${ COLORS.white }; + color: ${ COLORS.theme.foregroundInverted }; &:active { background: transparent; @@ -87,11 +87,11 @@ const pressed = css` `; const deselectable = css` - color: ${ COLORS.gray[ 900 ] }; + color: ${ COLORS.theme.foreground }; &:focus { box-shadow: - inset 0 0 0 1px ${ COLORS.white }, + inset 0 0 0 1px ${ COLORS.ui.background }, 0 0 0 ${ CONFIG.borderWidthFocus } ${ COLORS.theme.accent }; outline: 2px solid transparent; } @@ -112,7 +112,7 @@ const isIconStyles = ( { }; return css` - color: ${ COLORS.gray[ 900 ] }; + color: ${ COLORS.theme.foreground }; height: ${ iconButtonSizes[ size ] }; aspect-ratio: 1; padding-left: 0; diff --git a/packages/components/src/toggle-group-control/toggle-group-control/styles.ts b/packages/components/src/toggle-group-control/toggle-group-control/styles.ts index bb6efe476b2b2..8376b66a5a86c 100644 --- a/packages/components/src/toggle-group-control/toggle-group-control/styles.ts +++ b/packages/components/src/toggle-group-control/toggle-group-control/styles.ts @@ -39,7 +39,7 @@ export const toggleGroupControl = ( { content: ''; position: absolute; pointer-events: none; - background: ${ COLORS.gray[ 900 ] }; + background: ${ COLORS.theme.foreground }; // Windows High Contrast mode will show this outline, but not the box-shadow. outline: 2px solid transparent; diff --git a/packages/components/src/utils/colors-values.js b/packages/components/src/utils/colors-values.js index 1ad528d13f010..439d464f1460b 100644 --- a/packages/components/src/utils/colors-values.js +++ b/packages/components/src/utils/colors-values.js @@ -75,6 +75,9 @@ export const COLORS = Object.freeze( { * @deprecated Use semantic aliases in `COLORS.ui` or theme-ready variables in `COLORS.theme.gray`. */ gray: GRAY, // TODO: Stop exporting this when everything is migrated to `theme` or `ui` + /** + * @deprecated Prefer theme-ready variables in `COLORS.theme`. + */ white, alert: ALERT, /** diff --git a/packages/components/src/utils/config-values.js b/packages/components/src/utils/config-values.js index 1bc3945f9b3b1..13b704540e9c4 100644 --- a/packages/components/src/utils/config-values.js +++ b/packages/components/src/utils/config-values.js @@ -12,7 +12,6 @@ const CONTROL_PROPS = { controlPaddingXSmall: 8, controlPaddingXLarge: 12 * 1.3334, // TODO: Deprecate - controlBackgroundColor: COLORS.white, controlBoxShadowFocus: `0 0 0 0.5px ${ COLORS.theme.accent }`, controlHeight: CONTROL_HEIGHT, controlHeightXSmall: `calc( ${ CONTROL_HEIGHT } * 0.6 )`, From 9da58a749e2958f65c51352afd2f469379057fc4 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Mon, 9 Dec 2024 18:38:42 +0400 Subject: [PATCH 070/118] Data: Expose 'useSelect' warning to third-party consumers (#67735) Co-authored-by: Mamaduka Co-authored-by: youknowriad Co-authored-by: gziolo Co-authored-by: tyxla --- .../block-editor/src/hooks/test/font-size.js | 27 ++++++++++--------- .../src/hooks/test/use-query-select.js | 12 +++++++++ .../data/src/components/use-select/index.js | 2 +- .../src/components/use-select/test/index.js | 13 +++++++++ .../src/components/with-select/test/index.js | 13 +++++++++ 5 files changed, 54 insertions(+), 13 deletions(-) diff --git a/packages/block-editor/src/hooks/test/font-size.js b/packages/block-editor/src/hooks/test/font-size.js index 11cd024bf8a28..dc3fc9100e475 100644 --- a/packages/block-editor/src/hooks/test/font-size.js +++ b/packages/block-editor/src/hooks/test/font-size.js @@ -19,6 +19,15 @@ import { import _fontSize from '../font-size'; const noop = () => {}; +const EMPTY_ARRAY = []; +const EMPTY_OBJECT = {}; +const fontSizes = [ + { + name: 'A larger font', + size: '32px', + slug: 'larger', + }, +]; function addUseSettingFilter( callback ) { addFilter( @@ -55,13 +64,7 @@ describe( 'useBlockProps', () => { registerBlockType( blockSettings.name, blockSettings ); addUseSettingFilter( ( result, path ) => { if ( 'typography.fontSizes' === path ) { - return [ - { - name: 'A larger font', - size: '32px', - slug: 'larger', - }, - ]; + return fontSizes; } if ( 'typography.fluid' === path ) { @@ -69,7 +72,7 @@ describe( 'useBlockProps', () => { } if ( 'layout' === path ) { - return {}; + return EMPTY_OBJECT; } return result; @@ -95,7 +98,7 @@ describe( 'useBlockProps', () => { registerBlockType( blockSettings.name, blockSettings ); addUseSettingFilter( ( result, path ) => { if ( 'typography.fontSizes' === path ) { - return []; + return EMPTY_ARRAY; } if ( 'typography.fluid' === path ) { @@ -103,7 +106,7 @@ describe( 'useBlockProps', () => { } if ( 'layout' === path ) { - return {}; + return EMPTY_OBJECT; } return result; @@ -132,7 +135,7 @@ describe( 'useBlockProps', () => { registerBlockType( blockSettings.name, blockSettings ); addUseSettingFilter( ( result, path ) => { if ( 'typography.fontSizes' === path ) { - return []; + return EMPTY_ARRAY; } if ( 'typography.fluid' === path ) { @@ -140,7 +143,7 @@ describe( 'useBlockProps', () => { } if ( 'layout' === path ) { - return {}; + return EMPTY_OBJECT; } return result; diff --git a/packages/core-data/src/hooks/test/use-query-select.js b/packages/core-data/src/hooks/test/use-query-select.js index 894851f79a9c7..873b897fff4e7 100644 --- a/packages/core-data/src/hooks/test/use-query-select.js +++ b/packages/core-data/src/hooks/test/use-query-select.js @@ -17,9 +17,16 @@ import { render, screen, waitFor } from '@testing-library/react'; */ import useQuerySelect from '../use-query-select'; +/* eslint-disable @wordpress/wp-global-usage */ describe( 'useQuerySelect', () => { + const initialScriptDebug = globalThis.SCRIPT_DEBUG; let registry; + beforeAll( () => { + // Do not run hook in development mode; it will call `mapSelect` an extra time. + globalThis.SCRIPT_DEBUG = false; + } ); + beforeEach( () => { registry = createRegistry(); registry.registerStore( 'testStore', { @@ -31,6 +38,10 @@ describe( 'useQuerySelect', () => { } ); } ); + afterAll( () => { + globalThis.SCRIPT_DEBUG = initialScriptDebug; + } ); + const getTestComponent = ( mapSelectSpy, dependencyKey ) => ( props ) => { const dependencies = props[ dependencyKey ]; mapSelectSpy.mockImplementation( ( select ) => ( { @@ -188,3 +199,4 @@ describe( 'useQuerySelect', () => { ); } ); } ); +/* eslint-enable @wordpress/wp-global-usage */ diff --git a/packages/data/src/components/use-select/index.js b/packages/data/src/components/use-select/index.js index 6931743151773..ea4869bb4e7a9 100644 --- a/packages/data/src/components/use-select/index.js +++ b/packages/data/src/components/use-select/index.js @@ -174,7 +174,7 @@ function Store( registry, suspense ) { listeningStores ); - if ( process.env.NODE_ENV === 'development' ) { + if ( globalThis.SCRIPT_DEBUG ) { if ( ! didWarnUnstableReference ) { const secondMapResult = mapSelect( select, registry ); if ( ! isShallowEqual( mapResult, secondMapResult ) ) { diff --git a/packages/data/src/components/use-select/test/index.js b/packages/data/src/components/use-select/test/index.js index 3320f7d4638a5..6bb47d3c68e9e 100644 --- a/packages/data/src/components/use-select/test/index.js +++ b/packages/data/src/components/use-select/test/index.js @@ -32,12 +32,24 @@ function counterStore( initialCount = 0, step = 1 ) { }; } +/* eslint-disable @wordpress/wp-global-usage */ describe( 'useSelect', () => { + const initialScriptDebug = globalThis.SCRIPT_DEBUG; let registry; + + beforeAll( () => { + // Do not run hook in development mode; it will call `mapSelect` an extra time. + globalThis.SCRIPT_DEBUG = false; + } ); + beforeEach( () => { registry = createRegistry(); } ); + afterAll( () => { + globalThis.SCRIPT_DEBUG = initialScriptDebug; + } ); + it( 'passes the relevant data to the component', () => { registry.registerStore( 'testStore', { reducer: () => ( { foo: 'bar' } ), @@ -1257,3 +1269,4 @@ describe( 'useSelect', () => { } ); } ); } ); +/* eslint-enable @wordpress/wp-global-usage */ diff --git a/packages/data/src/components/with-select/test/index.js b/packages/data/src/components/with-select/test/index.js index fe798354cba20..9e01bb17cbb7e 100644 --- a/packages/data/src/components/with-select/test/index.js +++ b/packages/data/src/components/with-select/test/index.js @@ -18,7 +18,19 @@ import withDispatch from '../../with-dispatch'; import { createRegistry } from '../../../registry'; import { RegistryProvider } from '../../registry-provider'; +/* eslint-disable @wordpress/wp-global-usage */ describe( 'withSelect', () => { + const initialScriptDebug = globalThis.SCRIPT_DEBUG; + + beforeAll( () => { + // Do not run HOC in development mode; it will call `mapSelect` an extra time. + globalThis.SCRIPT_DEBUG = false; + } ); + + afterAll( () => { + globalThis.SCRIPT_DEBUG = initialScriptDebug; + } ); + it( 'passes the relevant data to the component', () => { const registry = createRegistry(); registry.registerStore( 'reactReducer', { @@ -615,3 +627,4 @@ describe( 'withSelect', () => { expect( screen.getByRole( 'status' ) ).toHaveTextContent( 'second' ); } ); } ); +/* eslint-enable @wordpress/wp-global-usage */ From e85937ff6868a4b35856845755636c39dbbc555a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20K=C3=A4gy?= Date: Mon, 9 Dec 2024 15:51:18 +0100 Subject: [PATCH 071/118] Feature: Add `navigation.isLoading` state to core/router store (#67680) --- packages/interactivity-router/src/index.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/interactivity-router/src/index.ts b/packages/interactivity-router/src/index.ts index 8a46d4ce35011..0c10e896ce1ef 100644 --- a/packages/interactivity-router/src/index.ts +++ b/packages/interactivity-router/src/index.ts @@ -223,6 +223,7 @@ interface Store { state: { url: string; navigation: { + isLoading: boolean; hasStarted: boolean; hasFinished: boolean; }; @@ -237,6 +238,7 @@ export const { state, actions } = store< Store >( 'core/router', { state: { url: window.location.href, navigation: { + isLoading: false, hasStarted: false, hasFinished: false, }, @@ -289,6 +291,7 @@ export const { state, actions } = store< Store >( 'core/router', { return; } + navigation.isLoading = true; if ( loadingAnimation ) { navigation.hasStarted = true; navigation.hasFinished = false; @@ -328,6 +331,7 @@ export const { state, actions } = store< Store >( 'core/router', { // Update the navigation status once the the new page rendering // has been completed. + navigation.isLoading = false; if ( loadingAnimation ) { navigation.hasStarted = false; navigation.hasFinished = true; From 6b8e47fbd17c0710a4e55d4104dce185fdfac53b Mon Sep 17 00:00:00 2001 From: Manzoor Wani Date: Mon, 9 Dec 2024 07:09:23 -0800 Subject: [PATCH 072/118] TypeScript: Convert factory utils in data package to TS (#67667) * TypeScript: Convert factory utils in data package to TS * Fix docgen build error * Update docs * Revert and fix TS error * Extract and improve signature --- packages/core-data/src/private-selectors.ts | 2 +- packages/data/README.md | 17 +++------ ...{create-selector.js => create-selector.ts} | 4 --- packages/data/src/{factory.js => factory.ts} | 35 +++++++++++++------ 4 files changed, 30 insertions(+), 28 deletions(-) rename packages/data/src/{create-selector.js => create-selector.ts} (55%) rename packages/data/src/{factory.js => factory.ts} (75%) diff --git a/packages/core-data/src/private-selectors.ts b/packages/core-data/src/private-selectors.ts index 7779051265306..abdf2c837e8ed 100644 --- a/packages/core-data/src/private-selectors.ts +++ b/packages/core-data/src/private-selectors.ts @@ -92,7 +92,7 @@ export function getEntityRecordPermissions( name: string, id: string ) { - return getEntityRecordsPermissions( state, kind, name, id )[ 0 ]; + return getEntityRecordsPermissions( state, kind, name, [ id ] )[ 0 ]; } /** diff --git a/packages/data/README.md b/packages/data/README.md index b6e0e03b1d8b7..67c01af24bde3 100644 --- a/packages/data/README.md +++ b/packages/data/README.md @@ -418,11 +418,11 @@ When registering a control created with `createRegistryControl` with a store, th _Parameters_ -- _registryControl_ `Function`: Function receiving a registry object and returning a control. +- _registryControl_ `T & { isRegistryControl?: boolean; }`: Function receiving a registry object and returning a control. _Returns_ -- `Function`: Registry control that can be registered with a store. +- Registry control that can be registered with a store. ### createRegistrySelector @@ -471,11 +471,11 @@ with a store. _Parameters_ -- _registrySelector_ `Function`: Function receiving a registry `select` function and returning a state selector. +- _registrySelector_ `( select: ) => Selector`: Function receiving a registry `select` function and returning a state selector. _Returns_ -- `Function`: Registry selector that can be registered with a store. +- `RegistrySelector< Selector >`: Registry selector that can be registered with a store. ### createSelector @@ -485,15 +485,6 @@ _Related_ - The documentation for the `rememo` package from which the `createSelector` function is reexported. -_Parameters_ - -- _selector_ `Function`: Selector function that calculates a value from state and parameters. -- _getDependants_ `Function`: Function that returns an array of "dependant" objects. - -_Returns_ - -- `Function`: A memoized version of `selector` that caches the calculated return values. - ### dispatch Given a store descriptor, returns an object of the store's action creators. Calling an action creator will cause it to be dispatched, updating the state value accordingly. diff --git a/packages/data/src/create-selector.js b/packages/data/src/create-selector.ts similarity index 55% rename from packages/data/src/create-selector.js rename to packages/data/src/create-selector.ts index 069932e8007e2..bfb7a1d283733 100644 --- a/packages/data/src/create-selector.js +++ b/packages/data/src/create-selector.ts @@ -3,9 +3,5 @@ * and the selector parameters, and recomputes the values only when any of them changes. * * @see The documentation for the `rememo` package from which the `createSelector` function is reexported. - * - * @param {Function} selector Selector function that calculates a value from state and parameters. - * @param {Function} getDependants Function that returns an array of "dependant" objects. - * @return {Function} A memoized version of `selector` that caches the calculated return values. */ export { default as createSelector } from 'rememo'; diff --git a/packages/data/src/factory.js b/packages/data/src/factory.ts similarity index 75% rename from packages/data/src/factory.js rename to packages/data/src/factory.ts index be4ef8cf673c5..8218fd2cdb07d 100644 --- a/packages/data/src/factory.js +++ b/packages/data/src/factory.ts @@ -1,3 +1,14 @@ +/** + * Internal dependencies + */ +import type { select as globalSelect } from './select'; + +type RegistrySelector< Selector extends ( ...args: any[] ) => any > = { + ( ...args: Parameters< Selector > ): ReturnType< Selector >; + isRegistrySelector?: boolean; + registry?: any; +}; + /** * Creates a selector function that takes additional curried argument with the * registry `select` function. While a regular selector has signature @@ -33,17 +44,21 @@ * registry as argument. The registry binding happens automatically when registering the selector * with a store. * - * @param {Function} registrySelector Function receiving a registry `select` - * function and returning a state selector. + * @param registrySelector Function receiving a registry `select` + * function and returning a state selector. * - * @return {Function} Registry selector that can be registered with a store. + * @return Registry selector that can be registered with a store. */ -export function createRegistrySelector( registrySelector ) { +export function createRegistrySelector< + Selector extends ( ...args: any[] ) => any, +>( + registrySelector: ( select: typeof globalSelect ) => Selector +): RegistrySelector< Selector > { const selectorsByRegistry = new WeakMap(); // Create a selector function that is bound to the registry referenced by `selector.registry` // and that has the same API as a regular selector. Binding it in such a way makes it // possible to call the selector directly from another selector. - const wrappedSelector = ( ...args ) => { + const wrappedSelector: RegistrySelector< Selector > = ( ...args ) => { let selector = selectorsByRegistry.get( wrappedSelector.registry ); // We want to make sure the cache persists even when new registry // instances are created. For example patterns create their own editors @@ -60,8 +75,6 @@ export function createRegistrySelector( registrySelector ) { * Flag indicating that the selector is a registry selector that needs the correct registry * reference to be assigned to `selector.registry` to make it work correctly. * be mapped as a registry selector. - * - * @type {boolean} */ wrappedSelector.isRegistrySelector = true; @@ -84,11 +97,13 @@ export function createRegistrySelector( registrySelector ) { * When registering a control created with `createRegistryControl` with a store, the store * knows which calling convention to use when executing the control. * - * @param {Function} registryControl Function receiving a registry object and returning a control. + * @param registryControl Function receiving a registry object and returning a control. * - * @return {Function} Registry control that can be registered with a store. + * @return Registry control that can be registered with a store. */ -export function createRegistryControl( registryControl ) { +export function createRegistryControl< T extends ( ...args: any ) => any >( + registryControl: T & { isRegistryControl?: boolean } +) { registryControl.isRegistryControl = true; return registryControl; From 9ae9ec35ff68f3426d3a75e3c543d80c1f16c3e2 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 9 Dec 2024 16:39:08 +0100 Subject: [PATCH 073/118] DataViews: Fix filters lost when switching layouts (#67740) Co-authored-by: youknowriad Co-authored-by: ntsekouras --- .../src/components/post-list/index.js | 90 ++++++++++--------- test/e2e/specs/site-editor/page-list.spec.js | 56 ++++++++++++ 2 files changed, 104 insertions(+), 42 deletions(-) create mode 100644 test/e2e/specs/site-editor/page-list.spec.js diff --git a/packages/edit-site/src/components/post-list/index.js b/packages/edit-site/src/components/post-list/index.js index 145a5e8243ac5..a67a505795b3c 100644 --- a/packages/edit-site/src/components/post-list/index.js +++ b/packages/edit-site/src/components/post-list/index.js @@ -13,7 +13,7 @@ import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews'; import { privateApis as editorPrivateApis } from '@wordpress/editor'; import { __ } from '@wordpress/i18n'; import { drawerRight } from '@wordpress/icons'; -import { usePrevious } from '@wordpress/compose'; +import { useEvent, usePrevious } from '@wordpress/compose'; import { addQueryArgs } from '@wordpress/url'; /** @@ -112,53 +112,50 @@ function useView( postType ) { }; } ); - const setViewWithUrlUpdate = useCallback( - ( newView ) => { - if ( newView.type === LAYOUT_LIST && ! layout ) { - // Skip updating the layout URL param if - // it is not present and the newView.type is LAYOUT_LIST. - } else if ( newView.type !== layout ) { - history.navigate( - addQueryArgs( path, { - layout: newView.type, - } ) - ); - } + const setViewWithUrlUpdate = useEvent( ( newView ) => { + setView( newView ); - setView( newView ); + if ( isCustom === 'true' && editedEntityRecord?.id ) { + editEntityRecord( + 'postType', + 'wp_dataviews', + editedEntityRecord?.id, + { + content: JSON.stringify( newView ), + } + ); + } - if ( isCustom === 'true' && editedEntityRecord?.id ) { - editEntityRecord( - 'postType', - 'wp_dataviews', - editedEntityRecord?.id, - { - content: JSON.stringify( newView ), - } - ); - } - }, - [ - history, - isCustom, - editEntityRecord, - editedEntityRecord?.id, - layout, - path, - ] - ); + const currentUrlLayout = layout ?? LAYOUT_LIST; + if ( newView.type !== currentUrlLayout ) { + history.navigate( + addQueryArgs( path, { + layout: newView.type, + } ) + ); + } + } ); // When layout URL param changes, update the view type // without affecting any other config. + const onUrlLayoutChange = useEvent( () => { + setView( ( prevView ) => { + const layoutToApply = layout ?? LAYOUT_LIST; + if ( layoutToApply === prevView.type ) { + return prevView; + } + return { + ...prevView, + type: layout ?? LAYOUT_LIST, + }; + } ); + } ); useEffect( () => { - setView( ( prevView ) => ( { - ...prevView, - type: layout ?? LAYOUT_LIST, - } ) ); - }, [ layout ] ); + onUrlLayoutChange(); + }, [ onUrlLayoutChange, layout ] ); // When activeView or isCustom URL parameters change, reset the view. - useEffect( () => { + const onUrlActiveViewChange = useEvent( () => { let newView; if ( isCustom === 'true' ) { newView = getCustomView( editedEntityRecord ); @@ -173,9 +170,18 @@ function useView( postType ) { type, } ); } - }, [ activeView, isCustom, layout, defaultViews, editedEntityRecord ] ); + } ); + useEffect( () => { + onUrlActiveViewChange(); + }, [ + onUrlActiveViewChange, + activeView, + isCustom, + defaultViews, + editedEntityRecord, + ] ); - return [ view, setViewWithUrlUpdate, setViewWithUrlUpdate ]; + return [ view, setViewWithUrlUpdate ]; } const DEFAULT_STATUSES = 'draft,future,pending,private,publish'; // All but 'trash'. diff --git a/test/e2e/specs/site-editor/page-list.spec.js b/test/e2e/specs/site-editor/page-list.spec.js new file mode 100644 index 0000000000000..fa9cb86cd1d62 --- /dev/null +++ b/test/e2e/specs/site-editor/page-list.spec.js @@ -0,0 +1,56 @@ +/** + * WordPress dependencies + */ +const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); + +test.describe( 'Page List', () => { + test.beforeAll( async ( { requestUtils } ) => { + // Activate a theme with permissions to access the site editor. + await requestUtils.activateTheme( 'emptytheme' ); + await requestUtils.createPage( { + title: 'Privacy Policy', + status: 'publish', + } ); + await requestUtils.createPage( { + title: 'Sample Page', + status: 'publish', + } ); + } ); + + test.afterAll( async ( { requestUtils } ) => { + // Go back to the default theme. + await Promise.all( [ + requestUtils.activateTheme( 'twentytwentyone' ), + requestUtils.deleteAllPages(), + ] ); + } ); + + test.beforeEach( async ( { admin, page } ) => { + // Go to the pages page, as it has the list layout enabled by default. + await admin.visitSiteEditor(); + await page.getByRole( 'button', { name: 'Pages' } ).click(); + } ); + + test( 'Persists filter/search when switching layout', async ( { + page, + } ) => { + // Search pages + await page + .getByRole( 'searchbox', { name: 'Search' } ) + .fill( 'Privacy' ); + + // Switch layout + await page.getByRole( 'button', { name: 'Layout' } ).click(); + await page.getByRole( 'menuitemradio', { name: 'Table' } ).click(); + + // Confirm the table is visible + await expect( page.getByRole( 'table' ) ).toContainText( + 'Privacy Policy' + ); + + // The search should still contain the search term + await expect( + page.getByRole( 'searchbox', { name: 'Search' } ) + ).toHaveValue( 'Privacy' ); + } ); +} ); From d03eeae0d48b35fb3e5e05a90bbc7b956a6b72f5 Mon Sep 17 00:00:00 2001 From: Miguel Fonseca <150562+mcsf@users.noreply.github.com> Date: Mon, 9 Dec 2024 16:15:04 +0000 Subject: [PATCH 074/118] wp-env: Add phpMyAdmin support (#67588) * wp-env: Add phpMyAdmin support Defines two new docker-compose services: `phpmyadmin` and `tests-phpmyadmin`. These are off by default. They can be individually turned on by: - Specifying a port in any enviroment's config via key `phpmyadminPort` (see bottom of commit message for example). - By setting environment variable `WP_ENV_PHPMYADMIN_PORT` and/or `WP_ENV_TESTS_PHPMYADMIN_PORT`. * Opt into the phpMyAdmin service in the Gutenberg environment * wp-env: start: refactor computation of command output - Refactor repeating logic into getPublicDockerPort - Remove trailing newlines from dockerCompose output - Refactor evaluation of spinner.prefixText so as to clearly reveal newlines. { env: { development: { ... phpmyadminPort: 9000 }, tests: { ... } } } --------- Co-authored-by: Riad Benguella --- .wp-env.json | 3 + packages/env/CHANGELOG.md | 4 + packages/env/README.md | 2 +- .../env/lib/build-docker-compose-config.js | 27 +++++++ packages/env/lib/commands/start.js | 76 +++++++++++++++---- .../get-config-from-environment-vars.js | 7 ++ packages/env/lib/config/parse-config.js | 27 +++++-- .../__snapshots__/config-integration.js.snap | 8 ++ packages/env/lib/config/test/parse-config.js | 54 +++++++++++++ packages/env/lib/validate-run-container.js | 1 + schemas/json/wp-env.json | 7 +- 11 files changed, 190 insertions(+), 26 deletions(-) diff --git a/.wp-env.json b/.wp-env.json index 05ea05b2809f9..d368f3ea1c72a 100644 --- a/.wp-env.json +++ b/.wp-env.json @@ -4,6 +4,9 @@ "plugins": [ "." ], "themes": [ "./test/emptytheme" ], "env": { + "development": { + "phpmyadminPort": 9000 + }, "tests": { "mappings": { "wp-content/plugins/gutenberg": ".", diff --git a/packages/env/CHANGELOG.md b/packages/env/CHANGELOG.md index 651d6b285e1bd..6ee37efdf850c 100644 --- a/packages/env/CHANGELOG.md +++ b/packages/env/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Enhancements + +- Add phpMyAdmin as an optional service. Enabled via the new `phpmyadminPort` environment config, as well as env vars `WP_ENV_PHPMYADMIN_PORT` and `WP_ENV_TESTS_PHPMYADMIN_PORT`. + ## 10.13.0 (2024-11-27) ## 10.12.0 (2024-11-16) diff --git a/packages/env/README.md b/packages/env/README.md index 35b00fe83e8f4..af037f5ee80ab 100644 --- a/packages/env/README.md +++ b/packages/env/README.md @@ -349,7 +349,7 @@ containers. Positionals: container The Docker service to run the command on. [string] [required] [choices: "mysql", "tests-mysql", "wordpress", - "tests-wordpress", "cli", "tests-cli", "composer", "phpunit"] + "tests-wordpress", "cli", "tests-cli", "composer", "phpmyadmin"] command The command to run. [required] Options: diff --git a/packages/env/lib/build-docker-compose-config.js b/packages/env/lib/build-docker-compose-config.js index a394537e36087..a1a4f68256b68 100644 --- a/packages/env/lib/build-docker-compose-config.js +++ b/packages/env/lib/build-docker-compose-config.js @@ -174,6 +174,13 @@ module.exports = function buildDockerComposeConfig( config ) { config.env.tests.mysqlPort ?? '' }}:3306`; + const developmentPhpmyadminPorts = `\${WP_ENV_PHPMYADMIN_PORT:-${ + config.env.development.phpmyadminPort ?? '' + }}:80`; + const testsPhpmyadminPorts = `\${WP_ENV_TESTS_PHPMYADMIN_PORT:-${ + config.env.tests.phpmyadminPort ?? '' + }}:80`; + return { services: { mysql: { @@ -266,6 +273,26 @@ module.exports = function buildDockerComposeConfig( config ) { }, extra_hosts: [ 'host.docker.internal:host-gateway' ], }, + phpmyadmin: { + image: 'phpmyadmin', + ports: [ developmentPhpmyadminPorts ], + environment: { + PMA_PORT: 3306, + PMA_HOST: 'mysql', + PMA_USER: 'root', + PMA_PASSWORD: 'password', + }, + }, + 'tests-phpmyadmin': { + image: 'phpmyadmin', + ports: [ testsPhpmyadminPorts ], + environment: { + PMA_PORT: 3306, + PMA_HOST: 'tests-mysql', + PMA_USER: 'root', + PMA_PASSWORD: 'password', + }, + }, }, volumes: { ...( ! config.env.development.coreSource && { wordpress: {} } ), diff --git a/packages/env/lib/commands/start.js b/packages/env/lib/commands/start.js index 4203ac7463228..24d57d71fd3c6 100644 --- a/packages/env/lib/commands/start.js +++ b/packages/env/lib/commands/start.js @@ -180,6 +180,24 @@ module.exports = async function start( { } ); + if ( config.env.development.phpmyadminPort ) { + await dockerCompose.upOne( 'phpmyadmin', { + ...dockerComposeConfig, + commandOptions: shouldConfigureWp + ? [ '--build', '--force-recreate' ] + : [], + } ); + } + + if ( config.env.tests.phpmyadminPort ) { + await dockerCompose.upOne( 'tests-phpmyadmin', { + ...dockerComposeConfig, + commandOptions: shouldConfigureWp + ? [ '--build', '--force-recreate' ] + : [], + } ); + } + // Make sure we've consumed the custom CLI dockerfile. if ( shouldConfigureWp ) { await dockerCompose.buildOne( [ 'cli' ], { ...dockerComposeConfig } ); @@ -225,35 +243,61 @@ module.exports = async function start( { const siteUrl = config.env.development.config.WP_SITEURL; const testsSiteUrl = config.env.tests.config.WP_SITEURL; - const { out: mySQLAddress } = await dockerCompose.port( + const mySQLPort = await getPublicDockerPort( 'mysql', 3306, dockerComposeConfig ); - const mySQLPort = mySQLAddress.split( ':' ).pop(); - const { out: testsMySQLAddress } = await dockerCompose.port( + const testsMySQLPort = await getPublicDockerPort( 'tests-mysql', 3306, dockerComposeConfig ); - const testsMySQLPort = testsMySQLAddress.split( ':' ).pop(); - - spinner.prefixText = 'WordPress development site started' - .concat( siteUrl ? ` at ${ siteUrl }` : '.' ) - .concat( '\n' ) - .concat( 'WordPress test site started' ) - .concat( testsSiteUrl ? ` at ${ testsSiteUrl }` : '.' ) - .concat( '\n' ) - .concat( `MySQL is listening on port ${ mySQLPort }` ) - .concat( - `MySQL for automated testing is listening on port ${ testsMySQLPort }` - ) - .concat( '\n' ); + const phpmyadminPort = config.env.development.phpmyadminPort + ? await getPublicDockerPort( 'phpmyadmin', 80, dockerComposeConfig ) + : null; + + const testsPhpmyadminPort = config.env.tests.phpmyadminPort + ? await getPublicDockerPort( + 'tests-phpmyadmin', + 80, + dockerComposeConfig + ) + : null; + + spinner.prefixText = [ + 'WordPress development site started' + + ( siteUrl ? ` at ${ siteUrl }` : '.' ), + 'WordPress test site started' + + ( testsSiteUrl ? ` at ${ testsSiteUrl }` : '.' ), + `MySQL is listening on port ${ mySQLPort }`, + `MySQL for automated testing is listening on port ${ testsMySQLPort }`, + phpmyadminPort && + `phpMyAdmin started at http://localhost:${ phpmyadminPort }`, + testsPhpmyadminPort && + `phpMyAdmin for automated testing started at http://localhost:${ testsPhpmyadminPort }`, + ] + .filter( Boolean ) + .join( '\n' ); + spinner.prefixText += '\n\n'; spinner.text = 'Done!'; }; +async function getPublicDockerPort( + service, + containerPort, + dockerComposeConfig +) { + const { out: address } = await dockerCompose.port( + service, + containerPort, + dockerComposeConfig + ); + return address.split( ':' ).pop().trim(); +} + /** * Checks for legacy installs and provides * the user the option to delete them. diff --git a/packages/env/lib/config/get-config-from-environment-vars.js b/packages/env/lib/config/get-config-from-environment-vars.js index beaf721ea1c0c..618b5fff25792 100644 --- a/packages/env/lib/config/get-config-from-environment-vars.js +++ b/packages/env/lib/config/get-config-from-environment-vars.js @@ -20,6 +20,7 @@ const { checkPort, checkVersion, checkString } = require( './validate-config' ); * @property {?number} mysqlPort An override for the development environment's MySQL port. * @property {?number} testsPort An override for the testing environment's port. * @property {?number} testsMysqlPort An override for the testing environment's MySQL port. + * @property {?number} phpmyadminPort An override for the development environment's phpMyAdmin port. * @property {?WPSource} coreSource An override for all environment's coreSource. * @property {?string} phpVersion An override for all environment's PHP version. * @property {?Object.} lifecycleScripts An override for various lifecycle scripts. @@ -40,6 +41,12 @@ module.exports = function getConfigFromEnvironmentVars( cacheDirectoryPath ) { testsMysqlPort: getPortFromEnvironmentVariable( 'WP_ENV_TESTS_MYSQL_PORT' ), + phpmyadminPort: getPortFromEnvironmentVariable( + 'WP_ENV_PHPMYADMIN_PORT' + ), + testsPhpmyadminPort: getPortFromEnvironmentVariable( + 'WP_ENV_TESTS_PHPMYADMIN_PORT' + ), lifecycleScripts: getLifecycleScriptOverrides(), }; diff --git a/packages/env/lib/config/parse-config.js b/packages/env/lib/config/parse-config.js index 1fc7e94925149..bddd7bc72aaee 100644 --- a/packages/env/lib/config/parse-config.js +++ b/packages/env/lib/config/parse-config.js @@ -46,14 +46,15 @@ const mergeConfigs = require( './merge-configs' ); * The environment-specific configuration options. (development/tests/etc) * * @typedef WPEnvironmentConfig - * @property {WPSource} coreSource The WordPress installation to load in the environment. - * @property {WPSource[]} pluginSources Plugins to load in the environment. - * @property {WPSource[]} themeSources Themes to load in the environment. - * @property {number} port The port to use. - * @property {number} mysqlPort The port to use for MySQL. Random if empty. - * @property {Object} config Mapping of wp-config.php constants to their desired values. - * @property {Object.} mappings Mapping of WordPress directories to local directories which should be mounted. - * @property {string|null} phpVersion Version of PHP to use in the environments, of the format 0.0. + * @property {WPSource} coreSource The WordPress installation to load in the environment. + * @property {WPSource[]} pluginSources Plugins to load in the environment. + * @property {WPSource[]} themeSources Themes to load in the environment. + * @property {number} port The port to use. + * @property {number} mysqlPort The port to use for MySQL. Random if empty. + * @property {number} phpmyadminPort The port to use for phpMyAdmin. If empty, disabled phpMyAdmin. + * @property {Object} config Mapping of wp-config.php constants to their desired values. + * @property {Object.} mappings Mapping of WordPress directories to local directories which should be mounted. + * @property {string|null} phpVersion Version of PHP to use in the environments, of the format 0.0. */ /** @@ -87,6 +88,7 @@ const DEFAULT_ENVIRONMENT_CONFIG = { port: 8888, testsPort: 8889, mysqlPort: null, + phpmyadminPort: null, mappings: {}, config: { FS_METHOD: 'direct', @@ -282,6 +284,11 @@ function getEnvironmentVarOverrides( cacheDirectoryPath ) { overrideConfig.env.development.mysqlPort = overrides.mysqlPort; } + if ( overrides.phpmyadminPort ) { + overrideConfig.env.development.phpmyadminPort = + overrides.phpmyadminPort; + } + if ( overrides.testsPort ) { overrideConfig.testsPort = overrides.testsPort; overrideConfig.env.tests.port = overrides.testsPort; @@ -455,6 +462,10 @@ async function parseEnvironmentConfig( parsedConfig.mysqlPort = config.mysqlPort; } + if ( config.phpmyadminPort !== undefined ) { + parsedConfig.phpmyadminPort = config.phpmyadminPort; + } + if ( config.phpVersion !== undefined ) { // Support null as a valid input. if ( config.phpVersion !== null ) { diff --git a/packages/env/lib/config/test/__snapshots__/config-integration.js.snap b/packages/env/lib/config/test/__snapshots__/config-integration.js.snap index 6c3618f4724cb..6b671a6bc858e 100644 --- a/packages/env/lib/config/test/__snapshots__/config-integration.js.snap +++ b/packages/env/lib/config/test/__snapshots__/config-integration.js.snap @@ -31,6 +31,7 @@ exports[`Config Integration should load local and override configuration files 1 "mappings": {}, "mysqlPort": 23306, "phpVersion": null, + "phpmyadminPort": null, "pluginSources": [], "port": 999, "themeSources": [], @@ -60,6 +61,7 @@ exports[`Config Integration should load local and override configuration files 1 "mappings": {}, "mysqlPort": 23307, "phpVersion": null, + "phpmyadminPort": null, "pluginSources": [], "port": 456, "themeSources": [], @@ -106,6 +108,7 @@ exports[`Config Integration should load local configuration file 1`] = ` "mappings": {}, "mysqlPort": 13306, "phpVersion": null, + "phpmyadminPort": null, "pluginSources": [], "port": 123, "themeSources": [], @@ -135,6 +138,7 @@ exports[`Config Integration should load local configuration file 1`] = ` "mappings": {}, "mysqlPort": 23307, "phpVersion": null, + "phpmyadminPort": null, "pluginSources": [], "port": 8889, "themeSources": [], @@ -181,6 +185,7 @@ exports[`Config Integration should use default configuration 1`] = ` "mappings": {}, "mysqlPort": null, "phpVersion": null, + "phpmyadminPort": null, "pluginSources": [], "port": 8888, "themeSources": [], @@ -210,6 +215,7 @@ exports[`Config Integration should use default configuration 1`] = ` "mappings": {}, "mysqlPort": null, "phpVersion": null, + "phpmyadminPort": null, "pluginSources": [], "port": 8889, "themeSources": [], @@ -256,6 +262,7 @@ exports[`Config Integration should use environment variables over local and over "mappings": {}, "mysqlPort": 23306, "phpVersion": null, + "phpmyadminPort": null, "pluginSources": [], "port": 12345, "testsPort": 61234, @@ -286,6 +293,7 @@ exports[`Config Integration should use environment variables over local and over "mappings": {}, "mysqlPort": 23307, "phpVersion": null, + "phpmyadminPort": null, "pluginSources": [], "port": 61234, "testsPort": 61234, diff --git a/packages/env/lib/config/test/parse-config.js b/packages/env/lib/config/test/parse-config.js index 38e4db9860cb3..cc6e2c7a96bbc 100644 --- a/packages/env/lib/config/test/parse-config.js +++ b/packages/env/lib/config/test/parse-config.js @@ -22,6 +22,7 @@ const DEFAULT_CONFIG = { port: 8888, testsPort: 8889, mysqlPort: null, + phpmyadminPort: null, phpVersion: null, coreSource: { type: 'git', @@ -400,4 +401,57 @@ describe( 'parseConfig', () => { ) ); } ); + + it( 'should parse phpmyadmin configuration for a given environment', async () => { + readRawConfigFile.mockImplementation( async ( configFile ) => { + if ( configFile === '/test/gutenberg/.wp-env.json' ) { + return { + core: 'WordPress/WordPress#Test', + phpVersion: '1.0', + lifecycleScripts: { + afterStart: 'test', + }, + env: { + development: { + phpmyadminPort: 9001, + }, + }, + }; + } + } ); + + const parsed = await parseConfig( '/test/gutenberg', '/cache' ); + + const expected = { + development: { + ...DEFAULT_CONFIG.env.development, + phpmyadminPort: 9001, + }, + tests: DEFAULT_CONFIG.env.tests, + }; + expect( parsed.env ).toEqual( expected ); + } ); + + it( 'should ignore root-level configuration for phpmyadmin', async () => { + readRawConfigFile.mockImplementation( async ( configFile ) => { + if ( configFile === '/test/gutenberg/.wp-env.json' ) { + return { + core: 'WordPress/WordPress#Test', + phpVersion: '1.0', + lifecycleScripts: { + afterStart: 'test', + }, + phpmyadminPort: 9001, + }; + } + } ); + + const parsed = await parseConfig( '/test/gutenberg', '/cache' ); + + const expected = { + development: DEFAULT_CONFIG.env.development, + tests: DEFAULT_CONFIG.env.tests, + }; + expect( parsed.env ).toEqual( expected ); + } ); } ); diff --git a/packages/env/lib/validate-run-container.js b/packages/env/lib/validate-run-container.js index 77e68d2a3a4dc..fbb6670f6c150 100644 --- a/packages/env/lib/validate-run-container.js +++ b/packages/env/lib/validate-run-container.js @@ -10,6 +10,7 @@ const RUN_CONTAINERS = [ 'tests-wordpress', 'cli', 'tests-cli', + 'phpmyadmin', ]; /** diff --git a/schemas/json/wp-env.json b/schemas/json/wp-env.json index 491d1f8cf7301..8aa604ed41ed1 100644 --- a/schemas/json/wp-env.json +++ b/schemas/json/wp-env.json @@ -62,6 +62,10 @@ "description": "Mapping of WordPress directories to local directories to be mounted in the WordPress instance.", "type": "object", "default": {} + }, + "phpmyadminPort": { + "description": "The port number to access phpMyAdmin.", + "type": "integer" } } }, @@ -73,7 +77,8 @@ "themes", "port", "config", - "mappings" + "mappings", + "phpmyadminPort" ] } }, From ad0c1d444ae62e67d6a75ecaaeea8f62d23badba Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Mon, 9 Dec 2024 21:15:56 +0400 Subject: [PATCH 075/118] Replace remaining custom deep cloning with 'structuredClone' (#67707) * Replace remaining custom deep cloning with 'structuredClone' * Polyfill structuredClone for jsdom Co-authored-by: Mamaduka Co-authored-by: tyxla Co-authored-by: jsnajdr --- .../src/components/global-styles/use-global-styles-output.js | 2 +- packages/block-editor/src/hooks/style.js | 2 +- test/unit/config/global-mocks.js | 4 ++++ 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js index 7bdc95d222142..fabc65d143d1a 100644 --- a/packages/block-editor/src/components/global-styles/use-global-styles-output.js +++ b/packages/block-editor/src/components/global-styles/use-global-styles-output.js @@ -624,7 +624,7 @@ function pickStyleKeys( treeToPickFrom ) { // clone the style objects so that `getFeatureDeclarations` can remove consumed keys from it const clonedEntries = pickedEntries.map( ( [ key, style ] ) => [ key, - JSON.parse( JSON.stringify( style ) ), + structuredClone( style ), ] ); return Object.fromEntries( clonedEntries ); } diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js index db2acd01665b6..5be2b1b3fd40a 100644 --- a/packages/block-editor/src/hooks/style.js +++ b/packages/block-editor/src/hooks/style.js @@ -245,7 +245,7 @@ export function omitStyle( style, paths, preserveReference = false ) { let newStyle = style; if ( ! preserveReference ) { - newStyle = JSON.parse( JSON.stringify( style ) ); + newStyle = structuredClone( style ); } if ( ! Array.isArray( paths ) ) { diff --git a/test/unit/config/global-mocks.js b/test/unit/config/global-mocks.js index ce64f03b514be..8db2c180fadf3 100644 --- a/test/unit/config/global-mocks.js +++ b/test/unit/config/global-mocks.js @@ -3,6 +3,7 @@ */ import { TextDecoder, TextEncoder } from 'node:util'; import { Blob as BlobPolyfill, File as FilePolyfill } from 'node:buffer'; +import 'core-js/stable/structured-clone'; jest.mock( '@wordpress/compose', () => { return { @@ -49,3 +50,6 @@ if ( ! global.TextEncoder ) { // Override jsdom built-ins with native node implementation. global.Blob = BlobPolyfill; global.File = FilePolyfill; + +// Polyfill structuredClone for jsdom. +global.structuredClone = structuredClone; From 95cbcdf5daacccccd181dfa7850e706c5a1e009c Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Mon, 9 Dec 2024 11:34:42 -0600 Subject: [PATCH 076/118] Inserter: Should receive focus on open (#67754) * Set default tab to 'blocks' if none passed * Add tests for focusing blocks tab and closing inserter on keypresses --- .../src/components/inserter/menu.js | 2 + .../site-editor/site-editor-inserter.spec.js | 53 +++++++++++++------ 2 files changed, 38 insertions(+), 17 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index ef260beb85906..019a37bffdde2 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -82,6 +82,8 @@ function InserterMenu( if ( isZoomOutMode ) { return 'patterns'; } + + return 'blocks'; } const [ selectedTab, setSelectedTab ] = useState( getInitialTab() ); diff --git a/test/e2e/specs/site-editor/site-editor-inserter.spec.js b/test/e2e/specs/site-editor/site-editor-inserter.spec.js index a730367d841bf..2364657613108 100644 --- a/test/e2e/specs/site-editor/site-editor-inserter.spec.js +++ b/test/e2e/specs/site-editor/site-editor-inserter.spec.js @@ -28,32 +28,51 @@ test.describe( 'Site Editor Inserter', () => { }, } ); - // eslint-disable-next-line playwright/expect-expect test( 'inserter toggle button should toggle global inserter', async ( { InserterUtils, + page, + editor, } ) => { await InserterUtils.openBlockLibrary(); await InserterUtils.closeBlockLibrary(); - } ); - // A test for https://github.com/WordPress/gutenberg/issues/43090. - test( 'should close the inserter when clicking on the toggle button', async ( { - editor, - InserterUtils, - } ) => { - const beforeBlocks = await editor.getBlocks(); + await test.step( 'should open the inserter via enter keypress on toggle button', async () => { + await InserterUtils.inserterButton.focus(); + await page.keyboard.press( 'Enter' ); + await expect( InserterUtils.blockLibrary ).toBeVisible(); + } ); - await InserterUtils.openBlockLibrary(); - await InserterUtils.expectActiveTab( 'Blocks' ); - await InserterUtils.blockLibrary - .getByRole( 'option', { name: 'Buttons' } ) - .click(); + await test.step( 'should set focus to the blocks tab when opening the inserter', async () => { + await expect( + InserterUtils.getBlockLibraryTab( 'Blocks' ) + ).toBeFocused(); + } ); + + await test.step( 'should close the inserter via escape keypress', async () => { + await page.keyboard.press( 'Escape' ); + await expect( InserterUtils.blockLibrary ).toBeHidden(); + } ); - await expect - .poll( editor.getBlocks ) - .toMatchObject( [ ...beforeBlocks, { name: 'core/buttons' } ] ); + await test.step( 'should focus inserter toggle button after closing the inserter via escape keypress', async () => { + await expect( InserterUtils.inserterButton ).toBeFocused(); + } ); - await InserterUtils.closeBlockLibrary(); + // A test for https://github.com/WordPress/gutenberg/issues/43090. + await test.step( 'should close the inserter when clicking on the toggle button', async () => { + const beforeBlocks = await editor.getBlocks(); + + await InserterUtils.openBlockLibrary(); + await InserterUtils.expectActiveTab( 'Blocks' ); + await InserterUtils.blockLibrary + .getByRole( 'option', { name: 'Buttons' } ) + .click(); + + await expect + .poll( editor.getBlocks ) + .toMatchObject( [ ...beforeBlocks, { name: 'core/buttons' } ] ); + + await InserterUtils.closeBlockLibrary(); + } ); } ); test.describe( 'Inserter Zoom Level UX', () => { From f430cd73ff8eaf58aa9782d50891e8eb50a9ee54 Mon Sep 17 00:00:00 2001 From: Jorge Costa Date: Mon, 9 Dec 2024 18:24:42 +0000 Subject: [PATCH 077/118] Fix: Dataviews remove primary field concept from some classes. (#67689) Co-authored-by: jorgefilipecosta Co-authored-by: youknowriad --- packages/dataviews/src/dataviews-layouts/grid/index.tsx | 8 +++----- packages/dataviews/src/dataviews-layouts/grid/style.scss | 2 +- packages/dataviews/src/dataviews-layouts/list/style.scss | 8 ++++---- 3 files changed, 8 insertions(+), 10 deletions(-) diff --git a/packages/dataviews/src/dataviews-layouts/grid/index.tsx b/packages/dataviews/src/dataviews-layouts/grid/index.tsx index 4a01609570202..e10ae7b591af5 100644 --- a/packages/dataviews/src/dataviews-layouts/grid/index.tsx +++ b/packages/dataviews/src/dataviews-layouts/grid/index.tsx @@ -82,11 +82,11 @@ function GridItem< Item >( { className: 'dataviews-view-grid__media', } ); - const clickablePrimaryItemProps = getClickableItemProps( { + const clickableTitleItemProps = getClickableItemProps( { item, isItemClickable, onClickItem, - className: 'dataviews-view-grid__primary-field dataviews-title-field', + className: 'dataviews-view-grid__title-field dataviews-title-field', } ); return ( @@ -128,9 +128,7 @@ function GridItem< Item >( { justify="space-between" className="dataviews-view-grid__title-actions" > -
    - { renderedTitleField } -
    +
    { renderedTitleField }
    diff --git a/packages/dataviews/src/dataviews-layouts/grid/style.scss b/packages/dataviews/src/dataviews-layouts/grid/style.scss index 70c94653371d1..e9fcb472dc318 100644 --- a/packages/dataviews/src/dataviews-layouts/grid/style.scss +++ b/packages/dataviews/src/dataviews-layouts/grid/style.scss @@ -15,7 +15,7 @@ padding: $grid-unit-10 0 $grid-unit-05; } - .dataviews-view-grid__primary-field { + .dataviews-view-grid__title-field { min-height: $grid-unit-30; // Preserve layout when there is no ellipsis button display: flex; align-items: center; diff --git a/packages/dataviews/src/dataviews-layouts/list/style.scss b/packages/dataviews/src/dataviews-layouts/list/style.scss index 8fe048cab77b5..65c28a90608a6 100644 --- a/packages/dataviews/src/dataviews-layouts/list/style.scss +++ b/packages/dataviews/src/dataviews-layouts/list/style.scss @@ -50,7 +50,7 @@ ul.dataviews-view-list { } &:not(.is-selected) { - .dataviews-view-list__primary-field { + .dataviews-view-list__title-field { color: $gray-900; } &:hover, @@ -59,7 +59,7 @@ ul.dataviews-view-list { color: var(--wp-admin-theme-color); background-color: #f8f8f8; - .dataviews-view-list__primary-field, + .dataviews-view-list__title-field, .dataviews-view-list__fields { color: var(--wp-admin-theme-color); } @@ -74,7 +74,7 @@ ul.dataviews-view-list { background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04); color: $gray-900; - .dataviews-view-list__primary-field, + .dataviews-view-list__title-field, .dataviews-view-list__fields { color: var(--wp-admin-theme-color); } @@ -106,7 +106,7 @@ ul.dataviews-view-list { } } } - .dataviews-view-list__primary-field { + .dataviews-view-list__title-field { flex: 1; min-height: $grid-unit-30; line-height: $grid-unit-30; From 7159a7857fb9106c4ecaa299220de91f0fff23c8 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 10 Dec 2024 16:01:26 +1100 Subject: [PATCH 078/118] Add stylebook screen for classic themes (#66851) Unlinked contributors: acketon. Co-authored-by: tellthemachines Co-authored-by: youknowriad Co-authored-by: ramonjd Co-authored-by: t-hamano Co-authored-by: jasmussen Co-authored-by: annezazu Co-authored-by: mtias Co-authored-by: carlomanf Co-authored-by: daveloodts Co-authored-by: cbirdsong Co-authored-by: fabiankaegy Co-authored-by: mrwweb Co-authored-by: ltrihan Co-authored-by: masteradhoc --- backport-changelog/6.8/7865.md | 3 + lib/block-editor-settings.php | 13 ++ lib/compat/wordpress-6.8/site-editor.php | 26 ++- .../src/components/maybe-editor/index.js | 58 +++++++ .../src/components/resizable-frame/index.js | 11 +- .../sidebar-navigation-screen-main/index.js | 105 +++++++----- .../index.js | 7 - .../src/components/site-editor-routes/home.js | 4 +- .../components/site-editor-routes/index.js | 2 + .../site-editor-routes/stylebook.js | 28 ++++ .../site-editor-routes/template-item.js | 6 +- .../site-editor-routes/template-part-item.js | 6 +- .../src/components/style-book/examples.tsx | 4 +- .../src/components/style-book/index.js | 155 ++++++++++++++---- .../src/components/style-book/style.scss | 4 + test/e2e/specs/site-editor/navigation.spec.js | 16 +- test/e2e/specs/site-editor/style-book.spec.js | 24 +++ 17 files changed, 375 insertions(+), 97 deletions(-) create mode 100644 backport-changelog/6.8/7865.md create mode 100644 packages/edit-site/src/components/maybe-editor/index.js create mode 100644 packages/edit-site/src/components/site-editor-routes/stylebook.js diff --git a/backport-changelog/6.8/7865.md b/backport-changelog/6.8/7865.md new file mode 100644 index 0000000000000..f7b23c944dc32 --- /dev/null +++ b/backport-changelog/6.8/7865.md @@ -0,0 +1,3 @@ +https://github.com/WordPress/wordpress-develop/pull/7865 + +* https://github.com/WordPress/gutenberg/pull/66851 \ No newline at end of file diff --git a/lib/block-editor-settings.php b/lib/block-editor-settings.php index defd7cd391b16..6448eb2e52485 100644 --- a/lib/block-editor-settings.php +++ b/lib/block-editor-settings.php @@ -53,6 +53,13 @@ function gutenberg_get_block_editor_settings( $settings ) { $global_styles[] = $block_classes; } + // Get any additional css from the customizer and add it before global styles custom CSS. + $global_styles[] = array( + 'css' => wp_get_custom_css(), + '__unstableType' => 'user', + 'isGlobalStyles' => false, + ); + /* * Add the custom CSS as a separate stylesheet so any invalid CSS * entered by users does not break other global styles. @@ -74,6 +81,12 @@ function gutenberg_get_block_editor_settings( $settings ) { $block_classes['css'] = $actual_css; $global_styles[] = $block_classes; } + // Get any additional css from the customizer. + $global_styles[] = array( + 'css' => wp_get_custom_css(), + '__unstableType' => 'user', + 'isGlobalStyles' => false, + ); } $settings['styles'] = array_merge( $global_styles, get_block_editor_theme_styles() ); diff --git a/lib/compat/wordpress-6.8/site-editor.php b/lib/compat/wordpress-6.8/site-editor.php index cde108830b1d2..53d04c2e543f4 100644 --- a/lib/compat/wordpress-6.8/site-editor.php +++ b/lib/compat/wordpress-6.8/site-editor.php @@ -116,9 +116,33 @@ function gutenberg_redirect_site_editor_deprecated_urls() { * @return callable The default handler or a custom handler. */ function gutenberg_styles_wp_die_handler( $default_handler ) { - if ( ! wp_is_block_theme() && str_contains( $_SERVER['REQUEST_URI'], 'site-editor.php' ) && isset( $_GET['p'] ) ) { + if ( ! wp_is_block_theme() && str_contains( $_SERVER['REQUEST_URI'], 'site-editor.php' ) && current_user_can( 'edit_theme_options' ) ) { return '__return_false'; } return $default_handler; } add_filter( 'wp_die_handler', 'gutenberg_styles_wp_die_handler' ); + +/** + * Add a Styles submenu under the Appearance menu + * for Classic themes. + * + * @global array $submenu + */ +function gutenberg_add_styles_submenu_item() { + if ( ! wp_is_block_theme() && ( current_theme_supports( 'editor-styles' ) || wp_theme_has_theme_json() ) ) { + global $submenu; + + $styles_menu_item = array( + __( 'Design', 'gutenberg' ), + 'edit_theme_options', + 'site-editor.php', + ); + // If $submenu exists, insert the Styles submenu item at position 2. + if ( $submenu && isset( $submenu['themes.php'] ) ) { + // This might not work as expected if the submenu has already been modified. + array_splice( $submenu['themes.php'], 1, 1, array( $styles_menu_item ) ); + } + } +} +add_action( 'admin_init', 'gutenberg_add_styles_submenu_item' ); diff --git a/packages/edit-site/src/components/maybe-editor/index.js b/packages/edit-site/src/components/maybe-editor/index.js new file mode 100644 index 0000000000000..bee1c427c87b4 --- /dev/null +++ b/packages/edit-site/src/components/maybe-editor/index.js @@ -0,0 +1,58 @@ +/** + * WordPress dependencies + */ + +import { store as coreStore } from '@wordpress/core-data'; +import { useSelect } from '@wordpress/data'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ + +import Editor from '../editor'; + +export function MaybeEditor( { showEditor = true } ) { + const { isBlockBasedTheme, siteUrl } = useSelect( ( select ) => { + const { getEntityRecord, getCurrentTheme } = select( coreStore ); + const siteData = getEntityRecord( 'root', '__unstableBase' ); + + return { + isBlockBasedTheme: getCurrentTheme()?.is_block_theme, + siteUrl: siteData?.home, + }; + }, [] ); + + // If theme is block based, return the Editor, otherwise return the site preview. + return isBlockBasedTheme || showEditor ? ( + + ) : ( +