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/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. 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) 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` 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'] ) && 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 } + /> + ); + }, +}; diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js index 9f2a9048af4c0..520da26ef9671 100644 --- a/packages/block-library/src/button/edit.js +++ b/packages/block-library/src/button/edit.js @@ -16,13 +16,13 @@ import removeAnchorTag from '../utils/remove-anchor-tag'; import { __ } from '@wordpress/i18n'; import { useEffect, useState, useRef, useMemo } from '@wordpress/element'; import { - Button, - ButtonGroup, TextControl, ToolbarButton, Popover, __experimentalToolsPanel as ToolsPanel, __experimentalToolsPanelItem as ToolsPanelItem, + __experimentalToggleGroupControl as ToggleGroupControl, + __experimentalToggleGroupControlOption as ToggleGroupControlOption, } from '@wordpress/components'; import { AlignmentControl, @@ -115,46 +115,38 @@ function useEnter( props ) { } function WidthPanel( { selectedWidth, setAttributes } ) { - function handleChange( newWidth ) { - // Check if we are toggling the width off - const width = selectedWidth === newWidth ? undefined : newWidth; - - // Update attributes. - setAttributes( { width } ); - } - return ( { - handleChange( undefined ); - } } + resetAll={ () => setAttributes( { width: undefined } ) } > !! selectedWidth } - onDeselect={ () => handleChange( undefined ) } + onDeselect={ () => setAttributes( { width: undefined } ) } + __nextHasNoMarginBottom > - + + setAttributes( { width: newWidth } ) + } + isBlock + __next40pxDefaultSize + __nextHasNoMarginBottom + > { [ 25, 50, 75, 100 ].map( ( widthValue ) => { return ( - + value={ widthValue } + label={ `${ widthValue }%` } + /> ); } ) } - + ); 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 } + /> + + ); } 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, + } ) + } + /> + + ); } diff --git a/packages/block-library/src/post-excerpt/edit.js b/packages/block-library/src/post-excerpt/edit.js index 05aaf543b5919..ad2b6300e79e4 100644 --- a/packages/block-library/src/post-excerpt/edit.js +++ b/packages/block-library/src/post-excerpt/edit.js @@ -16,7 +16,12 @@ import { Warning, useBlockProps, } from '@wordpress/block-editor'; -import { PanelBody, ToggleControl, RangeControl } from '@wordpress/components'; +import { + ToggleControl, + RangeControl, + __experimentalToolsPanel as ToolsPanel, + __experimentalToolsPanelItem as ToolsPanelItem, +} from '@wordpress/components'; import { __, _x } from '@wordpress/i18n'; import { useSelect } from '@wordpress/data'; @@ -219,29 +224,55 @@ export default function PostExcerptEditor( { /> - - { + setAttributes( { + showMoreOnNewLine: true, + excerptLength: 55, + } ); + } } + > + showMoreOnNewLine !== true } label={ __( 'Show link on new line' ) } - checked={ showMoreOnNewLine } - onChange={ ( newShowMoreOnNewLine ) => - setAttributes( { - showMoreOnNewLine: newShowMoreOnNewLine, - } ) + onDeselect={ () => + setAttributes( { showMoreOnNewLine: true } ) } - /> - + + setAttributes( { + showMoreOnNewLine: newShowMoreOnNewLine, + } ) + } + /> + + excerptLength !== 55 } label={ __( 'Max number of words' ) } - value={ excerptLength } - onChange={ ( value ) => { - setAttributes( { excerptLength: value } ); - } } - min="10" - max="100" - /> - + onDeselect={ () => + setAttributes( { excerptLength: 55 } ) + } + isShownByDefault + > + { + setAttributes( { excerptLength: value } ); + } } + min="10" + max="100" + /> + +
{ excerptContent } diff --git a/packages/block-library/src/site-title/edit.js b/packages/block-library/src/site-title/edit.js index 82e3c1d7f7bb4..644629a96fe4e 100644 --- a/packages/block-library/src/site-title/edit.js +++ b/packages/block-library/src/site-title/edit.js @@ -17,7 +17,11 @@ import { useBlockProps, HeadingLevelDropdown, } from '@wordpress/block-editor'; -import { ToggleControl, PanelBody } from '@wordpress/components'; +import { + ToggleControl, + __experimentalToolsPanel as ToolsPanel, + __experimentalToolsPanelItem as ToolsPanelItem, +} from '@wordpress/components'; import { createBlock, getDefaultBlockName } from '@wordpress/blocks'; import { decodeEntities } from '@wordpress/html-entities'; @@ -109,26 +113,52 @@ export default function SiteTitleEdit( { /> - - { + setAttributes( { + isLink: false, + linkTarget: '_self', + } ); + } } + > + isLink !== false } label={ __( 'Make title link to home' ) } - onChange={ () => setAttributes( { isLink: ! isLink } ) } - checked={ isLink } - /> - { isLink && ( + onDeselect={ () => setAttributes( { isLink: false } ) } + isShownByDefault + > - setAttributes( { - linkTarget: value ? '_blank' : '_self', - } ) + label={ __( 'Make title link to home' ) } + onChange={ () => + setAttributes( { isLink: ! isLink } ) } - checked={ linkTarget === '_blank' } + checked={ isLink } /> + + { isLink && ( + linkTarget !== '_self' } + label={ __( 'Open in new tab' ) } + onDeselect={ () => + setAttributes( { linkTarget: '_self' } ) + } + isShownByDefault + > + + setAttributes( { + linkTarget: value ? '_blank' : '_self', + } ) + } + checked={ linkTarget === '_blank' } + /> + ) } - + { siteTitleContent } 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 +`