diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 2ec03cba722c6b..3e02267da7c512 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -13,7 +13,7 @@ /packages/data-controls @nerrad # Blocks -/packages/block-library @ajitbohra +/packages/block-library @ajitbohra @fabiankaegy /packages/block-library/src/gallery @geriux /packages/block-library/src/comment-template @michalczaplinski /packages/block-library/src/comments @michalczaplinski diff --git a/backport-changelog/6.8/7129.md b/backport-changelog/6.8/7129.md index 90c9168cdc6f8a..301f1abc45d0d7 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 348b95ba88da3c..7accc5d4c2129d 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 5c80422f6f8574..63a7a9031f72a7 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 00000000000000..14c1a4aa22472b --- /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 639e33b4e5ca51..be842d89b51519 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/font-appearance-control/index.js b/packages/block-editor/src/components/font-appearance-control/index.js index f9e8023f93ec69..62396c2dc7bd64 100644 --- a/packages/block-editor/src/components/font-appearance-control/index.js +++ b/packages/block-editor/src/components/font-appearance-control/index.js @@ -2,6 +2,7 @@ * WordPress dependencies */ import { CustomSelectControl } from '@wordpress/components'; +import deprecated from '@wordpress/deprecated'; import { useMemo } from '@wordpress/element'; import { __, sprintf } from '@wordpress/i18n'; @@ -147,6 +148,20 @@ export default function FontAppearanceControl( props ) { ); }; + if ( + ! __next40pxDefaultSize && + ( otherProps.size === undefined || otherProps.size === 'default' ) + ) { + deprecated( + `36px default size for wp.blockEditor.__experimentalFontAppearanceControl`, + { + since: '6.8', + version: '7.1', + hint: 'Set the `__next40pxDefaultSize` prop to true to start opting into the new default size, which will become the default in a future version.', + } + ); + } + return ( hasStylesOrWeights && ( { setFontFamily( newFontFamily ); } } __nextHasNoMarginBottom + __next40pxDefaultSize /> ); }; diff --git a/packages/block-editor/src/components/font-family/index.js b/packages/block-editor/src/components/font-family/index.js index e8d0d7ed2dd808..6a723bb24c48ec 100644 --- a/packages/block-editor/src/components/font-family/index.js +++ b/packages/block-editor/src/components/font-family/index.js @@ -58,6 +58,20 @@ export default function FontFamilyControl( { ); } + if ( + ! __next40pxDefaultSize && + ( props.size === undefined || props.size === 'default' ) + ) { + deprecated( + `36px default size for wp.blockEditor.__experimentalFontFamilyControl`, + { + since: '6.8', + version: '7.1', + hint: 'Set the `__next40pxDefaultSize` prop to true to start opting into the new default size, which will become the default in a future version.', + } + ); + } + return ( ( ); ``` diff --git a/packages/block-editor/src/components/line-height-control/index.js b/packages/block-editor/src/components/line-height-control/index.js index e6af602c2875ae..ea692ceb452e3a 100644 --- a/packages/block-editor/src/components/line-height-control/index.js +++ b/packages/block-editor/src/components/line-height-control/index.js @@ -3,6 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { __experimentalNumberControl as NumberControl } from '@wordpress/components'; +import deprecated from '@wordpress/deprecated'; /** * Internal dependencies @@ -89,6 +90,17 @@ const LineHeightControl = ( { onChange( `${ nextValue }` ); }; + if ( + ! __next40pxDefaultSize && + ( otherProps.size === undefined || otherProps.size === 'default' ) + ) { + deprecated( `36px default size for wp.blockEditor.LineHeightControl`, { + since: '6.8', + version: '7.1', + hint: 'Set the `__next40pxDefaultSize` prop to true to start opting into the new default size, which will become the default in a future version.', + } ); + } + return (
{ export const Default = Template.bind( {} ); Default.args = { + __next40pxDefaultSize: true, __unstableInputWidth: '100px', }; diff --git a/packages/block-editor/src/components/line-height-control/test/index.js b/packages/block-editor/src/components/line-height-control/test/index.js index b98bc93c48a83a..488d22b768114e 100644 --- a/packages/block-editor/src/components/line-height-control/test/index.js +++ b/packages/block-editor/src/components/line-height-control/test/index.js @@ -19,7 +19,13 @@ const SPIN = STEP * SPIN_FACTOR; const ControlledLineHeightControl = () => { const [ value, setValue ] = useState(); - return ; + return ( + + ); }; describe( 'LineHeightControl', () => { diff --git a/packages/block-library/src/archives/edit.js b/packages/block-library/src/archives/edit.js index 60b8715988ed94..b51bd9a4fe1e6b 100644 --- a/packages/block-library/src/archives/edit.js +++ b/packages/block-library/src/archives/edit.js @@ -2,10 +2,11 @@ * WordPress dependencies */ import { - PanelBody, ToggleControl, SelectControl, Disabled, + __experimentalToolsPanel as ToolsPanel, + __experimentalToolsPanelItem as ToolsPanelItem, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { InspectorControls, useBlockProps } from '@wordpress/block-editor'; @@ -17,55 +18,104 @@ export default function ArchivesEdit( { attributes, setAttributes } ) { return ( <> - - { + setAttributes( { + displayAsDropdown: false, + showLabel: false, + showPostCounts: false, + type: 'monthly', + } ); + } } + > + - setAttributes( { - displayAsDropdown: ! displayAsDropdown, - } ) + isShownByDefault + hasValue={ () => displayAsDropdown } + onDeselect={ () => + setAttributes( { displayAsDropdown: false } ) } - /> - { displayAsDropdown && ( + > setAttributes( { - showLabel: ! showLabel, + displayAsDropdown: ! displayAsDropdown, } ) } /> + + + { displayAsDropdown && ( + showLabel } + onDeselect={ () => + setAttributes( { showLabel: false } ) + } + > + + setAttributes( { + showLabel: ! showLabel, + } ) + } + /> + ) } - - setAttributes( { - showPostCounts: ! showPostCounts, - } ) + isShownByDefault + hasValue={ () => showPostCounts } + onDeselect={ () => + setAttributes( { showPostCounts: false } ) } - /> - + + setAttributes( { + showPostCounts: ! showPostCounts, + } ) + } + /> + + + - setAttributes( { type: value } ) + isShownByDefault + hasValue={ () => !! type } + onDeselect={ () => + setAttributes( { type: 'monthly' } ) } - /> - + > + + setAttributes( { type: value } ) + } + /> + +
diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js index 2106c2031491fe..9f2a9048af4c0b 100644 --- a/packages/block-library/src/button/edit.js +++ b/packages/block-library/src/button/edit.js @@ -18,10 +18,11 @@ import { useEffect, useState, useRef, useMemo } from '@wordpress/element'; import { Button, ButtonGroup, - PanelBody, TextControl, ToolbarButton, Popover, + __experimentalToolsPanel as ToolsPanel, + __experimentalToolsPanelItem as ToolsPanelItem, } from '@wordpress/components'; import { AlignmentControl, @@ -123,26 +124,39 @@ function WidthPanel( { selectedWidth, setAttributes } ) { } return ( - - - { [ 25, 50, 75, 100 ].map( ( widthValue ) => { - return ( - - ); - } ) } - - + { + handleChange( undefined ); + } } + > + !! selectedWidth } + onDeselect={ () => handleChange( undefined ) } + > + + { [ 25, 50, 75, 100 ].map( ( widthValue ) => { + return ( + + ); + } ) } + + + ); } diff --git a/packages/block-library/src/column/edit.js b/packages/block-library/src/column/edit.js index a0f3cdcf65393d..b88e72e8da6991 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 f8cf0297302ccd..3d5f298aef8358 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-date/edit.js b/packages/block-library/src/post-date/edit.js index 5057466c6af453..6ac39c0f14798d 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 }
diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js index f1cb3fa5d8b8ae..1d61bab0787e44 100644 --- a/packages/block-library/src/table/edit.js +++ b/packages/block-library/src/table/edit.js @@ -20,12 +20,13 @@ import { import { __ } from '@wordpress/i18n'; import { Button, - PanelBody, Placeholder, TextControl, ToggleControl, ToolbarDropdownMenu, __experimentalHasSplitBorders as hasSplitBorders, + __experimentalToolsPanel as ToolsPanel, + __experimentalToolsPanelItem as ToolsPanelItem, } from '@wordpress/components'; import { alignLeft, @@ -473,33 +474,66 @@ function TableEdit( { ) } - { + setAttributes( { + hasFixedLayout: true, + head: [], + foot: [], + } ); + } } > - hasFixedLayout !== true } label={ __( 'Fixed width table cells' ) } - checked={ !! hasFixedLayout } - onChange={ onChangeFixedLayout } - /> + onDeselect={ () => + setAttributes( { hasFixedLayout: true } ) + } + isShownByDefault + > + + { ! isEmpty && ( <> - head && head.length } label={ __( 'Header section' ) } - checked={ !! ( head && head.length ) } - onChange={ onToggleHeaderSection } - /> - + setAttributes( { head: [] } ) + } + isShownByDefault + > + + + foot && foot.length } label={ __( 'Footer section' ) } - checked={ !! ( foot && foot.length ) } - onChange={ onToggleFooterSection } - /> + onDeselect={ () => + setAttributes( { foot: [] } ) + } + isShownByDefault + > + + ) } - + { ! isEmpty && ( { setView( ( prevView ) => { - const layoutToApply = layout ?? LAYOUT_LIST; - if ( layoutToApply === prevView.type ) { + const newType = layout ?? LAYOUT_LIST; + if ( newType === prevView.type ) { return prevView; } + return { ...prevView, - type: layout ?? LAYOUT_LIST, + type: newType, + ...defaultLayouts[ newType ], }; } ); } ); @@ -168,6 +171,7 @@ function useView( postType ) { setView( { ...newView, type, + ...defaultLayouts[ type ], } ); } } ); diff --git a/packages/env/CHANGELOG.md b/packages/env/CHANGELOG.md index 0298e21c810009..252e1e65dae872 100644 --- a/packages/env/CHANGELOG.md +++ b/packages/env/CHANGELOG.md @@ -7,6 +7,7 @@ ### 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`. +- Add support for WordPress multisite installations. Enabled via the new `multisite` environment config. ### Internal diff --git a/packages/env/lib/config/parse-config.js b/packages/env/lib/config/parse-config.js index bddd7bc72aaee0..d5e06c5bb9beed 100644 --- a/packages/env/lib/config/parse-config.js +++ b/packages/env/lib/config/parse-config.js @@ -52,6 +52,7 @@ const mergeConfigs = require( './merge-configs' ); * @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 {boolean} multisite Whether to set up a multisite installation. * @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. @@ -89,6 +90,7 @@ const DEFAULT_ENVIRONMENT_CONFIG = { testsPort: 8889, mysqlPort: null, phpmyadminPort: null, + multisite: false, mappings: {}, config: { FS_METHOD: 'direct', @@ -466,6 +468,10 @@ async function parseEnvironmentConfig( parsedConfig.phpmyadminPort = config.phpmyadminPort; } + if ( config.multisite !== undefined ) { + parsedConfig.multisite = config.multisite; + } + 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 6b671a6bc858eb..833a8a54d7749a 100644 --- a/packages/env/lib/config/test/__snapshots__/config-integration.js.snap +++ b/packages/env/lib/config/test/__snapshots__/config-integration.js.snap @@ -29,6 +29,7 @@ exports[`Config Integration should load local and override configuration files 1 "url": "https://github.com/WordPress/WordPress.git", }, "mappings": {}, + "multisite": false, "mysqlPort": 23306, "phpVersion": null, "phpmyadminPort": null, @@ -59,6 +60,7 @@ exports[`Config Integration should load local and override configuration files 1 "url": "https://github.com/WordPress/WordPress.git", }, "mappings": {}, + "multisite": false, "mysqlPort": 23307, "phpVersion": null, "phpmyadminPort": null, @@ -106,6 +108,7 @@ exports[`Config Integration should load local configuration file 1`] = ` "url": "https://github.com/WordPress/WordPress.git", }, "mappings": {}, + "multisite": false, "mysqlPort": 13306, "phpVersion": null, "phpmyadminPort": null, @@ -136,6 +139,7 @@ exports[`Config Integration should load local configuration file 1`] = ` "url": "https://github.com/WordPress/WordPress.git", }, "mappings": {}, + "multisite": false, "mysqlPort": 23307, "phpVersion": null, "phpmyadminPort": null, @@ -183,6 +187,7 @@ exports[`Config Integration should use default configuration 1`] = ` "url": "https://github.com/WordPress/WordPress.git", }, "mappings": {}, + "multisite": false, "mysqlPort": null, "phpVersion": null, "phpmyadminPort": null, @@ -213,6 +218,7 @@ exports[`Config Integration should use default configuration 1`] = ` "url": "https://github.com/WordPress/WordPress.git", }, "mappings": {}, + "multisite": false, "mysqlPort": null, "phpVersion": null, "phpmyadminPort": null, @@ -260,6 +266,7 @@ exports[`Config Integration should use environment variables over local and over "url": "https://github.com/WordPress/WordPress.git", }, "mappings": {}, + "multisite": false, "mysqlPort": 23306, "phpVersion": null, "phpmyadminPort": null, @@ -291,6 +298,7 @@ exports[`Config Integration should use environment variables over local and over "url": "https://github.com/WordPress/WordPress.git", }, "mappings": {}, + "multisite": false, "mysqlPort": 23307, "phpVersion": null, "phpmyadminPort": null, diff --git a/packages/env/lib/config/test/parse-config.js b/packages/env/lib/config/test/parse-config.js index cc6e2c7a96bbc0..968c8b66a4ec15 100644 --- a/packages/env/lib/config/test/parse-config.js +++ b/packages/env/lib/config/test/parse-config.js @@ -23,6 +23,7 @@ const DEFAULT_CONFIG = { testsPort: 8889, mysqlPort: null, phpmyadminPort: null, + multisite: false, phpVersion: null, coreSource: { type: 'git', diff --git a/packages/env/lib/wordpress.js b/packages/env/lib/wordpress.js index bd3c4a23f8ff5d..8c08fb1f20ec78 100644 --- a/packages/env/lib/wordpress.js +++ b/packages/env/lib/wordpress.js @@ -86,11 +86,40 @@ async function configureWordPress( environment, config, spinner ) { // Ignore error. } - const installCommand = `wp core install --url="${ config.env[ environment ].config.WP_SITEURL }" --title="${ config.name }" --admin_user=admin --admin_password=password --admin_email=wordpress@example.com --skip-email`; + const isMultisite = config.env[ environment ].multisite; + + const installMethod = isMultisite ? 'multisite-install' : 'install'; + const installCommand = `wp core ${ installMethod } --url="${ config.env[ environment ].config.WP_SITEURL }" --title="${ config.name }" --admin_user=admin --admin_password=password --admin_email=wordpress@example.com --skip-email`; // -eo pipefail exits the command as soon as anything fails in bash. const setupCommands = [ 'set -eo pipefail', installCommand ]; + // Bootstrap .htaccess for multisite + if ( isMultisite ) { + // Using a subshell with `exec` was the best tradeoff I could come up + // with between readability of this source and compatibility with the + // way that all strings in `setupCommands` are later joined with '&&'. + setupCommands.push( + `( +exec > /var/www/html/.htaccess +echo 'RewriteEngine On' +echo 'RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]' +echo 'RewriteBase /' +echo 'RewriteRule ^index\.php$ - [L]' +echo '' +echo '# add a trailing slash to /wp-admin' +echo 'RewriteRule ^([_0-9a-zA-Z-]+/)?wp-admin$ $1wp-admin/ [R=301,L]' +echo '' +echo 'RewriteCond %{REQUEST_FILENAME} -f [OR]' +echo 'RewriteCond %{REQUEST_FILENAME} -d' +echo 'RewriteRule ^ - [L]' +echo 'RewriteRule ^([_0-9a-zA-Z-]+/)?(wp-(content|admin|includes).*) $2 [L]' +echo 'RewriteRule ^([_0-9a-zA-Z-]+/)?(.*\.php)$ $2 [L]' +echo 'RewriteRule . index.php [L]' +)` + ); + } + // WordPress versions below 5.1 didn't use proper spacing in wp-config. const configAnchor = wpVersion && isWPMajorMinorVersionLower( wpVersion, '5.1' ) diff --git a/schemas/json/wp-env.json b/schemas/json/wp-env.json index 8aa604ed41ed1f..3958818714e4e6 100644 --- a/schemas/json/wp-env.json +++ b/schemas/json/wp-env.json @@ -66,6 +66,10 @@ "phpmyadminPort": { "description": "The port number to access phpMyAdmin.", "type": "integer" + }, + "multisite": { + "description": "Whether to set up a multisite installation.", + "type": "boolean" } } }, @@ -78,7 +82,8 @@ "port", "config", "mappings", - "phpmyadminPort" + "phpmyadminPort", + "multisite" ] } }, diff --git a/storybook/stories/foundations/layout.mdx b/storybook/stories/foundations/layout.mdx index abc0c7c4f6947f..578f4e8b66e428 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. +