From aca81875746075aa8cb7c37814372bcf6f7afb9b Mon Sep 17 00:00:00 2001 From: Marin Atanasov <8436925+tyxla@users.noreply.github.com> Date: Fri, 13 Dec 2024 09:02:59 +0200 Subject: [PATCH 001/119] Storybook: Fix warnings in Layout document (#67865) Co-authored-by: tyxla Co-authored-by: jameskoster Co-authored-by: mirka <0mirka00@git.wordpress.org> --- storybook/stories/foundations/layout.mdx | 60 ++++++++++++------------ 1 file changed, 31 insertions(+), 29 deletions(-) diff --git a/storybook/stories/foundations/layout.mdx b/storybook/stories/foundations/layout.mdx index abc0c7c4f6947..578f4e8b66e42 100644 --- a/storybook/stories/foundations/layout.mdx +++ b/storybook/stories/foundations/layout.mdx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/addon-docs/blocks'; +import { Meta } from '@storybook/blocks'; import areas from './static/areas.svg'; import pageLayoutExample1 from './static/page-layout-example-1.svg'; import pageLayoutExample2 from './static/page-layout-example-2.svg'; @@ -27,32 +27,34 @@ At the highest level admin pages are comprised of _areas_, that can be arranged Areas can be combined in different ways depending on the use case. Here are some examples. - - - - - - - - + + + + + + + + + +
- #### Sidebar, Content Frame and Preview Frame - Diagram illustrating an example of the 'Sidebar, Content Frame and Preview Frame' arrangement - - A demonstration of this arrangement can be found in the Styles section of the Site Editor, and in the Pages and Templates sections when List layout is selected. - - #### Sidebar and Preview Frame - Diagram illustrating an example of the 'Sidebar and Preview Frame' arrangement - - A demonstration of this arrangement can be found in the Design section. -
- #### Sidebar and Content Frame - Diagram illustrating an example of the 'Sidebar and Content Frame' arrangement - - A demonstration of this arrangement can be found in the Patterns and Templates sections of the Site Editor, or in the Pages section when Table or Grid layout are selected. - - #### Sidebar and multiple Content Frames - Diagram illustrating an example of the 'Sidebar and multiple Content Frames' arrangement - - Multiple content frames can be utilised as required. -
+ #### Sidebar, Content Frame and Preview Frame + Diagram illustrating an example of the 'Sidebar, Content Frame and Preview Frame' arrangement + + A demonstration of this arrangement can be found in the Styles section of the Site Editor, and in the Pages and Templates sections when List layout is selected. + + #### Sidebar and Preview Frame + Diagram illustrating an example of the 'Sidebar and Preview Frame' arrangement + + A demonstration of this arrangement can be found in the Design section. +
+ #### Sidebar and Content Frame + Diagram illustrating an example of the 'Sidebar and Content Frame' arrangement + + A demonstration of this arrangement can be found in the Patterns and Templates sections of the Site Editor, or in the Pages section when Table or Grid layout are selected. + + #### Sidebar and multiple Content Frames + Diagram illustrating an example of the 'Sidebar and multiple Content Frames' arrangement + + Multiple content frames can be utilised as required. +
From cbe7ef4d597cc28f3ab0fc9c7593b9af8085aa36 Mon Sep 17 00:00:00 2001 From: Sukhendu Sekhar Guria Date: Fri, 13 Dec 2024 13:49:27 +0530 Subject: [PATCH 002/119] Refactor "Settings" panel of Date block to use ToolsPanel instead of PanelBody (#67906) Co-authored-by: Sukhendu2002 Co-authored-by: fabiankaegy --- packages/block-library/src/post-date/edit.js | 97 +++++++++++++++----- 1 file changed, 72 insertions(+), 25 deletions(-) diff --git a/packages/block-library/src/post-date/edit.js b/packages/block-library/src/post-date/edit.js index 5057466c6af45..6ac39c0f14798 100644 --- a/packages/block-library/src/post-date/edit.js +++ b/packages/block-library/src/post-date/edit.js @@ -26,7 +26,8 @@ import { ToolbarGroup, ToolbarButton, ToggleControl, - PanelBody, + __experimentalToolsPanel as ToolsPanel, + __experimentalToolsPanelItem as ToolsPanelItem, } from '@wordpress/components'; import { __, _x, sprintf } from '@wordpress/i18n'; import { edit } from '@wordpress/icons'; @@ -160,16 +161,36 @@ export default function PostDateEdit( { - - - setAttributes( { format: nextFormat } ) + { + setAttributes( { + format: undefined, + isLink: false, + displayType: 'date', + } ); + } } + > + + format !== undefined && format !== siteFormat + } + label={ __( 'Date Format' ) } + onDeselect={ () => + setAttributes( { format: undefined } ) } - /> - + + setAttributes( { format: nextFormat } ) + } + /> + + isLink !== false } label={ postType?.labels.singular_name ? sprintf( @@ -179,23 +200,49 @@ export default function PostDateEdit( { ) : __( 'Link to post' ) } - onChange={ () => setAttributes( { isLink: ! isLink } ) } - checked={ isLink } - /> - setAttributes( { isLink: false } ) } + isShownByDefault + > + + setAttributes( { isLink: ! isLink } ) + } + checked={ isLink } + /> + + displayType !== 'date' } label={ __( 'Display last modified date' ) } - onChange={ ( value ) => - setAttributes( { - displayType: value ? 'modified' : 'date', - } ) + onDeselect={ () => + setAttributes( { displayType: 'date' } ) } - checked={ displayType === 'modified' } - help={ __( - 'Only shows if the post has been modified' - ) } - /> - + isShownByDefault + > + + setAttributes( { + displayType: value ? 'modified' : 'date', + } ) + } + checked={ displayType === 'modified' } + help={ __( + 'Only shows if the post has been modified' + ) } + /> + +
{ postDate }
From 7050a44afb90ee187e2ed401ee1d99b8de2ad34f Mon Sep 17 00:00:00 2001 From: Jorge Costa Date: Fri, 13 Dec 2024 08:55:35 +0000 Subject: [PATCH 003/119] Fix: Fix link to minimal-block example plugin code. (#67888) Co-authored-by: jorgefilipecosta Co-authored-by: shail-mehta --- docs/getting-started/fundamentals/registration-of-a-block.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/getting-started/fundamentals/registration-of-a-block.md b/docs/getting-started/fundamentals/registration-of-a-block.md index 5c80422f6f857..63a7a9031f72a 100644 --- a/docs/getting-started/fundamentals/registration-of-a-block.md +++ b/docs/getting-started/fundamentals/registration-of-a-block.md @@ -42,7 +42,7 @@ function minimal_block_ca6eda___register_block() { add_action( 'init', 'minimal_block_ca6eda___register_block' ); ``` -_See the [full block example](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/minimal-block-ca6eda) of the [code above](https://github.com/WordPress/block-development-examples/blob/trunk/plugins/minimal-block-ca6eda/index.php)_ +_See the [full block example](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/minimal-block-ca6eda) of the [code above](https://github.com/WordPress/block-development-examples/blob/trunk/plugins/minimal-block-ca6eda/plugin.php)_ ## Registering a block with JavaScript (client-side) From 7e85993a0be6830a398515513b8c42366cbcd2b4 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Fri, 13 Dec 2024 13:18:26 +0400 Subject: [PATCH 004/119] Plugin: Fix eligibility check for post types' default rendering mode (#67879) * Plugin: Fix eligibility check for post types' default rendering mode * Add backport changelog entry Unlinked contributors: CreativeDive. Co-authored-by: Mamaduka Co-authored-by: fabiankaegy --- backport-changelog/6.8/7129.md | 1 + lib/compat/wordpress-6.8/post.php | 9 ++++++--- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/backport-changelog/6.8/7129.md b/backport-changelog/6.8/7129.md index 90c9168cdc6f8..301f1abc45d0d 100644 --- a/backport-changelog/6.8/7129.md +++ b/backport-changelog/6.8/7129.md @@ -1,3 +1,4 @@ https://github.com/WordPress/wordpress-develop/pull/7129 * https://github.com/WordPress/gutenberg/pull/62304 +* https://github.com/WordPress/gutenberg/pull/67879 diff --git a/lib/compat/wordpress-6.8/post.php b/lib/compat/wordpress-6.8/post.php index 639e33b4e5ca5..be842d89b5151 100644 --- a/lib/compat/wordpress-6.8/post.php +++ b/lib/compat/wordpress-6.8/post.php @@ -32,15 +32,18 @@ function gutenberg_post_type_rendering_modes() { * @return array Updated array of post type arguments. */ function gutenberg_post_type_default_rendering_mode( $args, $post_type ) { - $rendering_mode = 'page' === $post_type ? 'template-locked' : 'post-only'; - $rendering_modes = gutenberg_post_type_rendering_modes(); + if ( ! wp_is_block_theme() || ! current_theme_supports( 'block-templates' ) ) { + return $args; + } // Make sure the post type supports the block editor. if ( - wp_is_block_theme() && ( isset( $args['show_in_rest'] ) && $args['show_in_rest'] ) && ( ! empty( $args['supports'] ) && in_array( 'editor', $args['supports'], true ) ) ) { + $rendering_mode = 'page' === $post_type ? 'template-locked' : 'post-only'; + $rendering_modes = gutenberg_post_type_rendering_modes(); + // Validate the supplied rendering mode. if ( isset( $args['default_rendering_mode'] ) && From 25e9753bfb4884ddcf02855f47cef3eb418eaea9 Mon Sep 17 00:00:00 2001 From: Jorge Costa Date: Fri, 13 Dec 2024 10:01:50 +0000 Subject: [PATCH 005/119] [Docs] Fix: Two broken links to the packages reference API and to blocks docs (#67889) Co-authored-by: jorgefilipecosta Co-authored-by: shail-mehta --- .../fundamentals/javascript-in-the-block-editor.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/getting-started/fundamentals/javascript-in-the-block-editor.md b/docs/getting-started/fundamentals/javascript-in-the-block-editor.md index 348b95ba88da3..7accc5d4c2129 100644 --- a/docs/getting-started/fundamentals/javascript-in-the-block-editor.md +++ b/docs/getting-started/fundamentals/javascript-in-the-block-editor.md @@ -38,9 +38,9 @@ The `wp-scripts` package also facilitates the use of JavaScript modules, allowin Integrating JavaScript into your WordPress projects without a build process can be the most straightforward approach in specific scenarios. This is particularly true for projects that don't leverage JSX or other advanced JavaScript features requiring compilation. -When you opt out of a build process, you interact directly with WordPress's [JavaScript APIs](/docs/reference-guides/packages/) through the global `wp` object. This means that all the methods and packages provided by WordPress are readily available, but with one caveat: you must manually manage script dependencies. This is done by adding [the handle](/docs/contributors/code/scripts.md) of each corresponding package to the dependency array of your enqueued JavaScript file. +When you opt out of a build process, you interact directly with WordPress's [JavaScript APIs](/docs/reference-guides/packages.md) through the global `wp` object. This means that all the methods and packages provided by WordPress are readily available, but with one caveat: you must manually manage script dependencies. This is done by adding [the handle](/docs/contributors/code/scripts.md) of each corresponding package to the dependency array of your enqueued JavaScript file. -For example, suppose you're creating a script that registers a new block [variation](/docs/reference-guides/block-api/block-variations.md) using the `registerBlockVariation` function from the [`blocks`](/docs/reference-guides/packages/packages-blocks.md) package. You must include `wp-blocks` in your script's dependency array. This guarantees that the `wp.blocks.registerBlockVariation` method is available and defined by the time your script executes. +For example, suppose you're creating a script that registers a new block [variation](/docs/reference-guides/block-api/block-variations.md) using the `registerBlockVariation` function from the [`blocks`](/packages/blocks/README.md) package. You must include `wp-blocks` in your script's dependency array. This guarantees that the `wp.blocks.registerBlockVariation` method is available and defined by the time your script executes. In the following example, the `wp-blocks` dependency is defined when enqueuing the `variations.js` file. From 20f41746aebc0a4c736879419ea9cb7229de08f9 Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Fri, 13 Dec 2024 11:26:54 +0100 Subject: [PATCH 006/119] Create a catalog list of private APIs (#66558) * Create a catalog list of private APIs * Document some private components * Rewrite the introduction * Rewrite the introduction again --- docs/private-apis.md | 340 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 340 insertions(+) create mode 100644 docs/private-apis.md diff --git a/docs/private-apis.md b/docs/private-apis.md new file mode 100644 index 0000000000000..14c1a4aa22472 --- /dev/null +++ b/docs/private-apis.md @@ -0,0 +1,340 @@ +# Gutenberg Private APIs + +This is an overview of private APIs exposed by Gutenberg packages. These APIs are used to implement parts of the Gutenberg editor (Post Editor, Site Editor, Core blocks and others) but are not exposed publicly to plugin and theme authors or authors of custom Gutenberg integrations. + +The purpose of this document is to present a picture of how many private APIs we have and how they are used to build the Gutenberg editor apps with the libraries and frameworks provided by the family of `@wordpress/*` packages. + +## data + +The registry has two private methods: +- `privateActionsOf` +- `privateSelectorsOf` + +Every store has a private API for registering private selectors/actions: +- `privateActions` +- `registerPrivateActions` +- `privateSelectors` +- `registerPrivateSelectors` + +## blocks + +### `core/blocks` store + +Private actions: +- `addBlockBindingsSource` +- `removeBlockBindingsSource` +- `addBootstrappedBlockType` +- `addUnprocessedBlockType` + +Private selectors: +- `getAllBlockBindingsSources` +- `getBlockBindingsSource` +- `getBootstrappedBlockType` +- `getSupportedStyles` +- `getUnprocessedBlockTypes` +- `hasContentRoleAttribute` + +## components + +Private exports: +- `__experimentalPopoverLegacyPositionToPlacement` +- `ComponentsContext` +- `Tabs` +- `Theme` +- `Menu` +- `kebabCase` + +## commands + +Private exports: +- `useCommandContext` (added May 2023 in #50543) + +### `core/commands` store + +Private actions: +- `setContext` (added together with `useCommandContext`) + +## preferences + +Private exports: (added in Jan 2024 in #57639) +- `PreferenceBaseOption` +- `PreferenceToggleControl` +- `PreferencesModal` +- `PreferencesModalSection` +- `PreferencesModalTabs` + +There is only one publicly exported component! +- `PreferenceToggleMenuItem` + +## block-editor + +Private exports: +- `AdvancedPanel` +- `BackgroundPanel` +- `BorderPanel` +- `ColorPanel` +- `DimensionsPanel` +- `FiltersPanel` +- `GlobalStylesContext` +- `ImageSettingsPanel` +- `TypographyPanel` +- `areGlobalStyleConfigsEqual` +- `getBlockCSSSelector` +- `getBlockSelectors` +- `getGlobalStylesChanges` +- `getLayoutStyles` +- `toStyles` +- `useGlobalSetting` +- `useGlobalStyle` +- `useGlobalStylesOutput` +- `useGlobalStylesOutputWithConfig` +- `useGlobalStylesReset` +- `useHasBackgroundPanel` +- `useHasBorderPanel` +- `useHasBorderPanelControls` +- `useHasColorPanel` +- `useHasDimensionsPanel` +- `useHasFiltersPanel` +- `useHasImageSettingsPanel` +- `useHasTypographyPanel` +- `useSettingsForBlockElement` +- `ExperimentalBlockCanvas`: version of public `BlockCanvas` that has several extra props: `contentRef`, `shouldIframe`, `iframeProps`. +- `ExperimentalBlockEditorProvider`: version of public `BlockEditorProvider` that filters out several private/experimental settings. See also `__experimentalUpdateSettings`. +- `getDuotoneFilter` +- `getRichTextValues` +- `PrivateQuickInserter` +- `extractWords` +- `getNormalizedSearchTerms` +- `normalizeString` +- `PrivateListView` +- `ResizableBoxPopover` +- `BlockInfo` +- `useHasBlockToolbar` +- `cleanEmptyObject` +- `BlockQuickNavigation` +- `LayoutStyle` +- `BlockRemovalWarningModal` +- `useLayoutClasses` +- `useLayoutStyles` +- `DimensionsTool` +- `ResolutionTool` +- `TabbedSidebar` +- `TextAlignmentControl` +- `usesContextKey` +- `useFlashEditableBlocks` +- `useZoomOut` +- `globalStylesDataKey` +- `globalStylesLinksDataKey` +- `selectBlockPatternsKey` +- `requiresWrapperOnCopy` +- `PrivateRichText`: has an extra prop `readOnly` added in #58916 and #60327 (Feb and Mar 2024). +- `PrivateInserterLibrary`: has an extra prop `onPatternCategorySelection` added in #62130 (May 2024). +- `reusableBlocksSelectKey` +- `PrivateBlockPopover`: has two extra props, `__unstableContentRef` and `__unstablePopoverSlot`. +- `PrivatePublishDateTimePicker`: version of public `PublishDateTimePicker` that has two extra props: `isCompact` and `showPopoverHeaderActions`. +- `useSpacingSizes` +- `useBlockDisplayTitle` +- `__unstableBlockStyleVariationOverridesWithConfig` +- `setBackgroundStyleDefaults` +- `sectionRootClientIdKey` +- `__unstableCommentIconFill` +- `__unstableCommentIconToolbarFill` + +### `core/block-editor` store + +Private actions: +- `__experimentalUpdateSettings`: version of public `updateSettings` action that filters out some private/experimental settings. +- `clearBlockRemovalPrompt` +- `deleteStyleOverride` +- `ensureDefaultBlock` +- `expandBlock` +- `hideBlockInterface` +- `modifyContentLockBlock` +- `privateRemoveBlocks` +- `resetZoomLevel` +- `setBlockRemovalRules` +- `setInsertionPoint` +- `setLastFocus` +- `setOpenedBlockSettingsMenu` +- `setStyleOverride` +- `setZoomLevel` +- `showBlockInterface` +- `startDragging` +- `stopDragging` +- `stopEditingAsBlocks` + +Private selectors: +- `getAllPatterns` +- `getBlockRemovalRules` +- `getBlockSettings` +- `getBlockStyles` +- `getBlockWithoutAttributes` +- `getClosestAllowedInsertionPoint` +- `getClosestAllowedInsertionPointForPattern` +- `getContentLockingParent` +- `getEnabledBlockParents` +- `getEnabledClientIdsTree` +- `getExpandedBlock` +- `getInserterMediaCategories` +- `getInsertionPoint` +- `getLastFocus` +- `getLastInsertedBlocksClientIds` +- `getOpenedBlockSettingsMenu` +- `getParentSectionBlock` +- `getPatternBySlug` +- `getRegisteredInserterMediaCategories` +- `getRemovalPromptData` +- `getReusableBlocks` +- `getSectionRootClientId` +- `getStyleOverrides` +- `getTemporarilyEditingAsBlocks` +- `getTemporarilyEditingFocusModeToRevert` +- `getZoomLevel` +- `hasAllowedPatterns` +- `isBlockInterfaceHidden` +- `isBlockSubtreeDisabled` +- `isDragging` +- `isResolvingPatterns` +- `isSectionBlock` +- `isZoomOut` + +## core-data + +Private exports: +- `useEntityRecordsWithPermissions` + +### `core` store + +Private actions: +- `receiveRegisteredPostMeta` + +Private selectors: +- `getBlockPatternsForPostType` +- `getEntityRecordPermissions` +- `getEntityRecordsPermissions` +- `getNavigationFallbackId` +- `getRegisteredPostMeta` +- `getUndoManager` + +## patterns (package created in Aug 2023 and has no public exports, everything is private) + +Private exports: +- `OverridesPanel` +- `CreatePatternModal` +- `CreatePatternModalContents` +- `DuplicatePatternModal` +- `isOverridableBlock` +- `hasOverridableBlocks` +- `useDuplicatePatternProps` +- `RenamePatternModal` +- `PatternsMenuItems` +- `RenamePatternCategoryModal` +- `PatternOverridesControls` +- `ResetOverridesControl` +- `PatternOverridesBlockControls` +- `useAddPatternCategory` +- `PATTERN_TYPES` +- `PATTERN_DEFAULT_CATEGORY` +- `PATTERN_USER_CATEGORY` +- `EXCLUDED_PATTERN_SOURCES` +- `PATTERN_SYNC_TYPES` +- `PARTIAL_SYNCING_SUPPORTED_BLOCKS` + +### `core/patterns` store + +Private actions: +- `convertSyncedPatternToStatic` +- `createPattern` +- `createPatternFromFile` +- `setEditingPattern` + +Private selectors: +- `isEditingPattern` + +## block-library + +Private exports: +- `BlockKeyboardShortcuts` + +## router (private exports only) + +Private exports: +- `useHistory` +- `useLocation` +- `RouterProvider` + +## core-commands (private exports only) + +Private exports: +- `useCommands` + +## editor + +Private exports: +- `CreateTemplatePartModal` +- `BackButton` +- `EntitiesSavedStatesExtensible` +- `Editor` +- `EditorContentSlotFill` +- `GlobalStylesProvider` +- `mergeBaseAndUserConfigs` +- `PluginPostExcerpt` +- `PostCardPanel` +- `PreferencesModal` +- `usePostActions` +- `ToolsMoreMenuGroup` +- `ViewMoreMenuGroup` +- `ResizableEditor` +- `registerCoreBlockBindingsSources` +- `interfaceStore` +- `ActionItem` +- `ComplementaryArea` +- `ComplementaryAreaMoreMenuItem` +- `FullscreenMode` +- `InterfaceSkeleton` +- `NavigableRegion` +- `PinnedItems` + +### `core/editor` store + +Private actions: +- `createTemplate` +- `hideBlockTypes` +- `registerEntityAction` +- `registerPostTypeActions` +- `removeTemplates` +- `revertTemplate` +- `saveDirtyEntities` +- `setCurrentTemplateId` +- `setIsReady` +- `showBlockTypes` +- `unregisterEntityAction` + +Private selectors: +- `getEntityActions` +- `getInserter` +- `getInserterSidebarToggleRef` +- `getListViewToggleRef` +- `getPostBlocksByName` +- `getPostIcon` +- `hasPostMetaChanges` +- `isEntityReady` + +## edit-post + +### `core/edit-post` store + +Private selectors: +- `getEditedPostTemplateId` + +## edit-site + +### `core/edit-site` store + +Private actions: +- `registerRoute` +- `setEditorCanvasContainerView` + +Private selectors: +- `getRoutes` +- `getEditorCanvasContainerView` From d988d2817c5971775a2e340afea5a3b53c17ced0 Mon Sep 17 00:00:00 2001 From: Prasad Karmalkar Date: Fri, 13 Dec 2024 15:58:40 +0530 Subject: [PATCH 007/119] Refactor "Settings" panel of Columns block to use ToolsPanel instead of PanelBody (#67910) Co-authored-by: prasadkarmalkar Co-authored-by: fabiankaegy --- packages/block-library/src/columns/edit.js | 47 +++++++++++++++++----- 1 file changed, 36 insertions(+), 11 deletions(-) diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js index f8cf0297302cc..3d5f298aef835 100644 --- a/packages/block-library/src/columns/edit.js +++ b/packages/block-library/src/columns/edit.js @@ -9,9 +9,10 @@ import clsx from 'clsx'; import { __ } from '@wordpress/i18n'; import { Notice, - PanelBody, RangeControl, ToggleControl, + __experimentalToolsPanel as ToolsPanel, + __experimentalToolsPanelItem as ToolsPanelItem, } from '@wordpress/components'; import { @@ -149,9 +150,22 @@ function ColumnInspectorControls( { } return ( - + { + updateColumns( count, minCount ); + setAttributes( { + isStackedOnMobile: true, + } ); + } } + > { canInsertColumnBlock && ( - <> + count } + onDeselect={ () => updateColumns( count, minCount ) } + > ) } - + ) } - + isShownByDefault + hasValue={ () => isStackedOnMobile !== true } + onDeselect={ () => setAttributes( { - isStackedOnMobile: ! isStackedOnMobile, + isStackedOnMobile: true, } ) } - /> - + > + + setAttributes( { + isStackedOnMobile: ! isStackedOnMobile, + } ) + } + /> + + ); } From d90fbad61cf2abd35f242b5d45dad4f0e4116c5a Mon Sep 17 00:00:00 2001 From: Prasad Karmalkar Date: Fri, 13 Dec 2024 16:01:03 +0530 Subject: [PATCH 008/119] Refactor "Settings" panel of Column block to use ToolsPanel instead of PanelBody (#67913) Co-authored-by: prasadkarmalkar Co-authored-by: fabiankaegy --- packages/block-library/src/column/edit.js | 40 +++++++++++++++-------- 1 file changed, 27 insertions(+), 13 deletions(-) diff --git a/packages/block-library/src/column/edit.js b/packages/block-library/src/column/edit.js index a0f3cdcf65393..b88e72e8da699 100644 --- a/packages/block-library/src/column/edit.js +++ b/packages/block-library/src/column/edit.js @@ -18,8 +18,9 @@ import { } from '@wordpress/block-editor'; import { __experimentalUseCustomUnits as useCustomUnits, - PanelBody, __experimentalUnitControl as UnitControl, + __experimentalToolsPanel as ToolsPanel, + __experimentalToolsPanelItem as ToolsPanelItem, } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; import { sprintf, __ } from '@wordpress/i18n'; @@ -30,19 +31,32 @@ function ColumnInspectorControls( { width, setAttributes } ) { availableUnits: availableUnits || [ '%', 'px', 'em', 'rem', 'vw' ], } ); return ( - - { + setAttributes( { width: undefined } ); + } } + > + width !== undefined } label={ __( 'Width' ) } - __unstableInputWidth="calc(50% - 8px)" - __next40pxDefaultSize - value={ width || '' } - onChange={ ( nextWidth ) => { - nextWidth = 0 > parseFloat( nextWidth ) ? '0' : nextWidth; - setAttributes( { width: nextWidth } ); - } } - units={ units } - /> - + onDeselect={ () => setAttributes( { width: undefined } ) } + isShownByDefault + > + { + nextWidth = + 0 > parseFloat( nextWidth ) ? '0' : nextWidth; + setAttributes( { width: nextWidth } ); + } } + units={ units } + /> + + ); } From 662455d9a5e40327e58c6f71190f254969f71081 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Fri, 13 Dec 2024 13:45:33 +0100 Subject: [PATCH 009/119] Make sure the sidebar navigation item focus style is fully visible. (#67817) Co-authored-by: afercia Co-authored-by: oandregal --- .../src/components/sidebar-navigation-item/style.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/edit-site/src/components/sidebar-navigation-item/style.scss b/packages/edit-site/src/components/sidebar-navigation-item/style.scss index ac1cf8b730861..230967c4c7e0e 100644 --- a/packages/edit-site/src/components/sidebar-navigation-item/style.scss +++ b/packages/edit-site/src/components/sidebar-navigation-item/style.scss @@ -20,6 +20,11 @@ color: $white; } + // Make sure the focus style is drawn on top of the current item background. + &:focus-visible { + transform: translateZ(0); + } + .edit-site-sidebar-navigation-item__drilldown-indicator { fill: $gray-600; } From 673f80d43810fe7d596cef0e4d3543677d85798d Mon Sep 17 00:00:00 2001 From: Manzoor Wani Date: Fri, 13 Dec 2024 04:57:54 -0800 Subject: [PATCH 010/119] Fix dataviews commonjs export (#67962) Co-authored-by: manzoorwanijk Co-authored-by: youknowriad Co-authored-by: anomiex --- packages/dataviews/CHANGELOG.md | 18 +++++++++++------- packages/dataviews/package.json | 3 ++- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md index 0468a277ba292..887c279714ec0 100644 --- a/packages/dataviews/CHANGELOG.md +++ b/packages/dataviews/CHANGELOG.md @@ -2,21 +2,25 @@ ## Unreleased +### Bug Fixes + +- Fixed commonjs export ([#67962](https://github.com/WordPress/gutenberg/pull/67962)) + ## 4.10.0 (2024-12-11) ## Breaking Changes - Support showing or hiding title, media and description fields ([#67477](https://github.com/WordPress/gutenberg/pull/67477)). -- Unify the `title`, `media` and `description` fields for the different layouts. So instead of the previous `view.layout.mediaField`, `view.layout.primaryField` and `view.layout.columnFields`, all the layouts now support these three fields with the following config ([#67477](https://github.com/WordPress/gutenberg/pull/67477)): +- Unify the `title`, `media` and `description` fields for the different layouts. So instead of the previous `view.layout.mediaField`, `view.layout.primaryField` and `view.layout.columnFields`, all the layouts now support these three fields with the following config ([#67477](https://github.com/WordPress/gutenberg/pull/67477)): ```js const view = { - type: 'table', - titleField: 'title', - mediaField: 'media', - descriptionField: 'description', - fields: [ 'author', 'date' ], -} + type: 'table', + titleField: 'title', + mediaField: 'media', + descriptionField: 'description', + fields: [ 'author', 'date' ], +}; ``` ## Internal diff --git a/packages/dataviews/package.json b/packages/dataviews/package.json index c307085bbea07..7f6d96745acab 100644 --- a/packages/dataviews/package.json +++ b/packages/dataviews/package.json @@ -27,7 +27,8 @@ "exports": { ".": { "types": "./build-types/index.d.ts", - "import": "./build-module/index.js" + "import": "./build-module/index.js", + "default": "./build/index.js" }, "./wp": { "types": "./build-types/index.d.ts", From 750c8e46e2847cbb780278bd3815a4fdf76098a1 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Fri, 13 Dec 2024 17:03:57 +0400 Subject: [PATCH 011/119] Editor: Remove the 'content-only' check from 'TemplatePartConverterMenuItem' (#67961) Co-authored-by: Mamaduka --- .../components/template-part-menu-items/index.js | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) diff --git a/packages/editor/src/components/template-part-menu-items/index.js b/packages/editor/src/components/template-part-menu-items/index.js index 0e126644d4993..52c50f91b3933 100644 --- a/packages/editor/src/components/template-part-menu-items/index.js +++ b/packages/editor/src/components/template-part-menu-items/index.js @@ -27,25 +27,16 @@ export default function TemplatePartMenuItems() { } function TemplatePartConverterMenuItem( { clientIds, onClose } ) { - const { isContentOnly, blocks } = useSelect( + const { blocks } = useSelect( ( select ) => { - const { getBlocksByClientId, getBlockEditingMode } = - select( blockEditorStore ); + const { getBlocksByClientId } = select( blockEditorStore ); return { blocks: getBlocksByClientId( clientIds ), - isContentOnly: - clientIds.length === 1 && - getBlockEditingMode( clientIds[ 0 ] ) === 'contentOnly', }; }, [ clientIds ] ); - // Do not show the convert button if the block is in content-only mode. - if ( isContentOnly ) { - return null; - } - // Allow converting a single template part to standard blocks. if ( blocks.length === 1 && blocks[ 0 ]?.name === 'core/template-part' ) { return ( From 0b1a6b6631ce033f0fa751c2238ba14bf9e3cfce Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Fri, 13 Dec 2024 14:43:22 +0100 Subject: [PATCH 012/119] Improve logic to show entities saved panel description. (#67971) * Improve logic to show entities saved panel description. * Apply CR suggestion --------- Co-authored-by: afercia Co-authored-by: Mamaduka Co-authored-by: t-hamano --- .../editor/src/components/entities-saved-states/index.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/editor/src/components/entities-saved-states/index.js b/packages/editor/src/components/entities-saved-states/index.js index ad584b0df7557..200473cccff70 100644 --- a/packages/editor/src/components/entities-saved-states/index.js +++ b/packages/editor/src/components/entities-saved-states/index.js @@ -115,6 +115,10 @@ export function EntitiesSavedStatesExtensible( { 'description' ); + const selectItemsToSaveDescription = !! dirtyEntityRecords.length + ? __( 'Select the items you want to save.' ) + : undefined; + return (
} ) - : __( 'Select the items you want to save.' ) } + : selectItemsToSaveDescription }

From 629123201f2f513717fab82b43231c681382da5b Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Fri, 13 Dec 2024 22:55:30 +0900 Subject: [PATCH 013/119] Customizer Widgets: Fix inserter button size and animation (#67880) Co-authored-by: t-hamano Co-authored-by: tyxla Co-authored-by: jameskoster --- .../src/components/header/style.scss | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/customize-widgets/src/components/header/style.scss b/packages/customize-widgets/src/components/header/style.scss index 5c3f37a0bf0d4..73789282108af 100644 --- a/packages/customize-widgets/src/components/header/style.scss +++ b/packages/customize-widgets/src/components/header/style.scss @@ -33,16 +33,25 @@ border-radius: $radius-small; color: $white; padding: 0; - min-width: $grid-unit-30; - height: $grid-unit-30; + min-width: $grid-unit-40; + height: $grid-unit-40; margin: $grid-unit-15 0 $grid-unit-15 auto; &::before { content: none; } + svg { + transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s; + @include reduce-motion("transition"); + } + &.is-pressed { background: $gray-900; + + svg { + transform: rotate(45deg); + } } } From 67557edac8a22538ca3ff9cd9594cf821c5153e9 Mon Sep 17 00:00:00 2001 From: Himanshu Pathak Date: Fri, 13 Dec 2024 19:34:52 +0530 Subject: [PATCH 014/119] Storybook: Add stories for the TextAlignmentControl component (#67371) * Storybook: Add stories for the text-alignment-control component * Storybook: Update TextAlignmentControl story to follow best practices and simplify the structure * Storybook: Simplify TextAlignmentControl story * Storybook: Simplify the documentation for TextAlignmentControl story Co-authored-by: himanshupathak95 Co-authored-by: t-hamano --- .../stories/index.story.js | 73 ++++++++++++++----- 1 file changed, 55 insertions(+), 18 deletions(-) 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 3744f3fa012a7..fd97f9b60e6a9 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 @@ -8,32 +8,69 @@ import { useState } from '@wordpress/element'; */ import TextAlignmentControl from '../'; -export default { +const meta = { title: 'BlockEditor/TextAlignmentControl', component: TextAlignmentControl, + parameters: { + docs: { + canvas: { sourceState: 'shown' }, + description: { + component: 'Control to facilitate text alignment selections.', + }, + }, + }, argTypes: { - onChange: { action: 'onChange' }, - className: { control: 'text' }, + value: { + control: { type: null }, + description: 'Currently selected text alignment value.', + table: { + type: { + summary: 'string', + }, + }, + }, + onChange: { + action: 'onChange', + control: { type: null }, + description: 'Handles change in text alignment selection.', + table: { + type: { + summary: 'function', + }, + }, + }, options: { control: 'check', + description: 'Array of text alignment options to display.', options: [ 'left', 'center', 'right', 'justify' ], + table: { + type: { summary: 'array' }, + }, + }, + className: { + control: 'text', + description: 'Class name to add to the control.', + table: { + type: { summary: 'string' }, + }, }, - value: { control: false }, }, }; -const Template = ( { onChange, ...args } ) => { - const [ value, setValue ] = useState(); - return ( - { - onChange( ...changeArgs ); - setValue( ...changeArgs ); - } } - value={ value } - /> - ); -}; +export default meta; -export const Default = Template.bind( {} ); +export const Default = { + render: function Template( { onChange, ...args } ) { + const [ value, setValue ] = useState(); + return ( + { + onChange( ...changeArgs ); + setValue( ...changeArgs ); + } } + value={ value } + /> + ); + }, +}; From 3d17c61018b2e5d37755f690e35e7a0e6eadf5ff Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Fri, 13 Dec 2024 23:05:33 +0900 Subject: [PATCH 015/119] TreeSelect: Deprecate 36px default size (#67855) * TreeSelect: Deprecate 36px default size * Fix types * Auto-generate readme * Add changelog * Fixup readme Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: tyxla --- packages/components/CHANGELOG.md | 1 + .../components/src/input-control/types.ts | 6 +- packages/components/src/tree-select/README.md | 171 +++++++++++++++--- .../src/tree-select/docs-manifest.json | 5 + packages/components/src/tree-select/index.tsx | 12 +- .../src/tree-select/stories/index.story.tsx | 1 + packages/components/src/tree-select/types.ts | 9 +- 7 files changed, 172 insertions(+), 33 deletions(-) create mode 100644 packages/components/src/tree-select/docs-manifest.json diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 49cc196b1f7e6..af71c4104b4d9 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -8,6 +8,7 @@ ### Deprecations +- `TreeSelect`: Deprecate 36px default size ([#67855](https://github.com/WordPress/gutenberg/pull/67855)). - `SelectControl`: Deprecate 36px default size ([#66898](https://github.com/WordPress/gutenberg/pull/66898)). - `InputControl`: Deprecate 36px default size ([#66897](https://github.com/WordPress/gutenberg/pull/66897)). diff --git a/packages/components/src/input-control/types.ts b/packages/components/src/input-control/types.ts index 99c5b1aea92c3..edb69def61905 100644 --- a/packages/components/src/input-control/types.ts +++ b/packages/components/src/input-control/types.ts @@ -136,7 +136,7 @@ export interface InputBaseProps extends BaseProps, FlexProps { * If you want to apply standard padding in accordance with the size variant, wrap the element in * the provided `` component. * - * @example + * ```jsx * import { * __experimentalInputControl as InputControl, * __experimentalInputControlPrefixWrapper as InputControlPrefixWrapper, @@ -145,6 +145,7 @@ export interface InputBaseProps extends BaseProps, FlexProps { * @} * /> + * ``` */ prefix?: ReactNode; /** @@ -154,7 +155,7 @@ export interface InputBaseProps extends BaseProps, FlexProps { * If you want to apply standard padding in accordance with the size variant, wrap the element in * the provided `` component. * - * @example + * ```jsx * import { * __experimentalInputControl as InputControl, * __experimentalInputControlSuffixWrapper as InputControlSuffixWrapper, @@ -163,6 +164,7 @@ export interface InputBaseProps extends BaseProps, FlexProps { * %} * /> + * ``` */ suffix?: ReactNode; /** diff --git a/packages/components/src/tree-select/README.md b/packages/components/src/tree-select/README.md index 3d26488478bd0..493c83bf993b0 100644 --- a/packages/components/src/tree-select/README.md +++ b/packages/components/src/tree-select/README.md @@ -1,10 +1,10 @@ # TreeSelect -TreeSelect component is used to generate select input fields. + -## Usage +

See the WordPress Storybook for more detailed, interactive documentation.

-Render a user interface to select the parent page in a hierarchy of pages: +Generates a hierarchical select input. ```jsx import { useState } from 'react'; @@ -15,7 +15,8 @@ const MyTreeSelect = () => { return ( setPage( newPage ) } @@ -50,51 +51,165 @@ const MyTreeSelect = () => { ); } ``` - ## Props -The set of props accepted by the component will be specified below. -Props not included in this set will be applied to the SelectControl component being used. +### `__next40pxDefaultSize` + +Start opting into the larger default height that will become the default size in a future version. + + - Type: `boolean` + - Required: No + - Default: `false` + +### `__nextHasNoMarginBottom` + +Start opting into the new margin-free styles that will become the default in a future version. + + - Type: `boolean` + - Required: No + - Default: `false` + +### `children` + +As an alternative to the `options` prop, `optgroup`s and `options` can be +passed in as `children` for more customizability. + + - Type: `ReactNode` + - Required: No + +### `disabled` -### label +If true, the `input` will be disabled. + + - Type: `boolean` + - Required: No + - Default: `false` + +### `hideLabelFromVision` + +If true, the label will only be visible to screen readers. + + - Type: `boolean` + - Required: No + - Default: `false` + +### `help` + +Additional description for the control. + +Only use for meaningful description or instructions for the control. An element containing the description will be programmatically associated to the BaseControl by the means of an `aria-describedby` attribute. + + - Type: `ReactNode` + - Required: No + +### `label` If this property is added, a label will be generated using label property as the content. -- Type: `String` -- Required: No + - Type: `ReactNode` + - Required: No + +### `labelPosition` + +The position of the label. -### noOptionLabel + - Type: `"top" | "bottom" | "side" | "edge"` + - Required: No + - Default: `'top'` + +### `noOptionLabel` If this property is added, an option will be added with this label to represent empty selection. -- Type: `String` -- Required: No + - Type: `string` + - Required: No + +### `onChange` + +A function that receives the value of the new option that is being selected as input. + + - Type: `(value: string, extra?: { event?: ChangeEvent; }) => void` + - Required: No + +### `options` + +An array of option property objects to be rendered, +each with a `label` and `value` property, as well as any other +`