- { ! isMultiToolbar && isLargeViewport && (
+ { showParentSelector && ! isMultiToolbar && isLargeViewport && (
) }
{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
@@ -205,6 +210,14 @@ export function PrivateBlockToolbar( {
{ ! hasContentOnlyLocking &&
shouldShowVisualToolbar &&
isMultiToolbar &&
}
+ { showShuffleButton && (
+
+
+
+ ) }
{ shouldShowVisualToolbar && (
<>
) }
- { showZoomOutToolbar && (
-
- ) }
-
{ /* Used for the inline rich text toolbar. Until this toolbar is combined into BlockToolbar, someone implementing their own BlockToolbar will also need to use this to see the image caption toolbar. */ }
{ ! isZoomOutMode && ! hasFixedToolbar && (
{
const {
getSettings,
- getInsertionPoint,
getBlockOrder,
getSelectionStart,
getSelectedBlockClientId,
getSectionRootClientId,
- isBlockInsertionPointVisible,
} = unlock( select( blockEditorStore ) );
const root = getSectionRootClientId();
return {
hasSelection: !! getSelectionStart().clientId,
- insertionPoint: getInsertionPoint(),
blockOrder: getBlockOrder( root ),
- blockInsertionPointVisible: isBlockInsertionPointVisible(),
sectionRootClientId: root,
setInserterIsOpened:
getSettings().__experimentalSetIsInserterOpened,
@@ -64,41 +58,32 @@ function ZoomOutModeInserters() {
return null;
}
- return [ undefined, ...blockOrder ].map( ( clientId, index ) => {
- const shouldRenderInsertionPoint =
- blockInsertionPointVisible && insertionPoint?.index === index;
+ const previousClientId = selectedBlockClientId;
+ const index = blockOrder.findIndex(
+ ( clientId ) => selectedBlockClientId === clientId
+ );
+ const nextClientId = blockOrder[ index + 1 ];
- const previousClientId = clientId;
- const nextClientId = blockOrder[ index ];
-
- const isSelected =
- selectedBlockClientId === previousClientId ||
- selectedBlockClientId === nextClientId;
-
- return (
-
- { ! shouldRenderInsertionPoint && isSelected && (
- {
- setInserterIsOpened( {
- rootClientId: sectionRootClientId,
- insertionIndex: index,
- tab: 'patterns',
- category: 'all',
- } );
- showInsertionPoint( sectionRootClientId, index, {
- operation: 'insert',
- } );
- } }
- />
- ) }
-
- );
- } );
+ return (
+
+ {
+ setInserterIsOpened( {
+ rootClientId: sectionRootClientId,
+ insertionIndex: index + 1,
+ tab: 'patterns',
+ category: 'all',
+ } );
+ showInsertionPoint( sectionRootClientId, index + 1, {
+ operation: 'insert',
+ } );
+ } }
+ />
+
+ );
}
export default ZoomOutModeInserters;
diff --git a/packages/block-editor/src/components/block-tools/zoom-out-popover.js b/packages/block-editor/src/components/block-tools/zoom-out-popover.js
deleted file mode 100644
index 7a5c2243cf054..0000000000000
--- a/packages/block-editor/src/components/block-tools/zoom-out-popover.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-/**
- * Internal dependencies
- */
-import { PrivateBlockPopover as BlockPopover } from '../block-popover';
-import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
-import useSelectedBlockToolProps from './use-selected-block-tool-props';
-import ZoomOutToolbar from './zoom-out-toolbar';
-
-export default function ZoomOutPopover( { clientId, __unstableContentRef } ) {
- const { capturingClientId, isInsertionPointVisible, lastClientId } =
- useSelectedBlockToolProps( clientId );
-
- const popoverProps = useBlockToolbarPopoverProps( {
- contentElement: __unstableContentRef?.current,
- clientId,
- } );
-
- // Override some of the popover props for the zoom-out toolbar.
- const props = {
- ...popoverProps,
- placement: 'left-start',
- flip: false,
- shift: true,
- };
-
- return (
-
-
-
- );
-}
diff --git a/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js b/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js
deleted file mode 100644
index 2b5c6a3e3cea6..0000000000000
--- a/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js
+++ /dev/null
@@ -1,135 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { dragHandle, trash } from '@wordpress/icons';
-import { Button, ToolbarButton } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { store as blocksStore } from '@wordpress/blocks';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../store';
-import BlockDraggable from '../block-draggable';
-import BlockMover from '../block-mover';
-import Shuffle from '../block-toolbar/shuffle';
-import NavigableToolbar from '../navigable-toolbar';
-
-export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) {
- const selected = useSelect(
- ( select ) => {
- const {
- getBlock,
- getNextBlockClientId,
- getPreviousBlockClientId,
- canRemoveBlock,
- canMoveBlock,
- getSettings,
- } = select( blockEditorStore );
-
- const { __experimentalSetIsInserterOpened: setIsInserterOpened } =
- getSettings();
-
- const { getBlockType } = select( blocksStore );
- const { name } = getBlock( clientId );
- const blockType = getBlockType( name );
- const isBlockTemplatePart =
- blockType?.name === 'core/template-part';
-
- let isNextBlockTemplatePart = false;
- const nextClientId = getNextBlockClientId();
- if ( nextClientId ) {
- const { name: nextName } = getBlock( nextClientId );
- const nextBlockType = getBlockType( nextName );
- isNextBlockTemplatePart =
- nextBlockType?.name === 'core/template-part';
- }
-
- let isPrevBlockTemplatePart = false;
- const prevClientId = getPreviousBlockClientId();
- if ( prevClientId ) {
- const { name: prevName } = getBlock( prevClientId );
- const prevBlockType = getBlockType( prevName );
- isPrevBlockTemplatePart =
- prevBlockType?.name === 'core/template-part';
- }
-
- return {
- isBlockTemplatePart,
- isNextBlockTemplatePart,
- isPrevBlockTemplatePart,
- canRemove: canRemoveBlock( clientId ),
- canMove: canMoveBlock( clientId ),
- setIsInserterOpened,
- };
- },
- [ clientId ]
- );
-
- const {
- isBlockTemplatePart,
- isNextBlockTemplatePart,
- isPrevBlockTemplatePart,
- canRemove,
- canMove,
- } = selected;
-
- const { removeBlock } = useDispatch( blockEditorStore );
-
- const showBlockDraggable = canMove && ! isBlockTemplatePart;
-
- return (
-
- { showBlockDraggable && (
-
- { ( draggableProps ) => (
-
- ) }
-
- ) }
- { ! isBlockTemplatePart && (
-
- ) }
- { canMove && canRemove && (
-
- ) }
-
- { canRemove && ! isBlockTemplatePart && (
- {
- removeBlock( clientId );
- __unstableContentRef.current?.focus();
- } }
- />
- ) }
-
- );
-}
diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss
index 4a0e2d519f914..1d01f84b5fd1f 100644
--- a/packages/block-editor/src/components/iframe/content.scss
+++ b/packages/block-editor/src/components/iframe/content.scss
@@ -5,20 +5,16 @@
.block-editor-iframe__html {
transform-origin: top center;
- // 400ms should match the animation speed used in iframe/index.js
- $zoomOutAnimation: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96);
-
// We don't want to animate the transform of the translateX because it is used
// to "center" the canvas. Leaving it on causes the canvas to slide around in
// odd ways.
- transition: $zoomOutAnimation, transform 0s scale 0s;
- @include reduce-motion("transition");
+ @include editor-canvas-resize-animation(transform 0s, scale 0s, padding 0s);
&.zoom-out-animation {
// we only want to animate the scaling when entering zoom out. When sidebars
// are toggled, the resizing of the iframe handles scaling the canvas as well,
// and the doubled animations cause very odd animations.
- transition: $zoomOutAnimation, transform 0s;
+ @include editor-canvas-resize-animation(transform 0s);
}
}
@@ -27,10 +23,10 @@
$frame-size: var(--wp-block-editor-iframe-zoom-out-frame-size);
$inner-height: var(--wp-block-editor-iframe-zoom-out-inner-height);
$content-height: var(--wp-block-editor-iframe-zoom-out-content-height);
- $outer-container-width: var(--wp-block-editor-iframe-zoom-out-outer-container-width);
+ $scale-container-width: var(--wp-block-editor-iframe-zoom-out-scale-container-width);
$container-width: var(--wp-block-editor-iframe-zoom-out-container-width, 100vw);
// Apply an X translation to center the scaled content within the available space.
- transform: translateX(calc(( #{$outer-container-width} - #{ $container-width }) / 2 / #{$scale}));
+ transform: translateX(calc((#{$scale-container-width} - #{$container-width}) / 2 / #{$scale}));
scale: #{$scale};
background-color: $gray-300;
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index b72d86ef8e0f8..b14514f934fb3 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -122,7 +122,7 @@ function Iframe( {
}, [] );
const { styles = '', scripts = '' } = resolvedAssets;
const [ iframeDocument, setIframeDocument ] = useState();
- const initialContainerWidth = useRef();
+ const initialContainerWidth = useRef( 0 );
const [ bodyClasses, setBodyClasses ] = useState( [] );
const clearerRef = useBlockSelectionClearer();
const [ before, writingFlowRef, after ] = useWritingFlow();
@@ -247,6 +247,11 @@ function Iframe( {
}
}, [ containerWidth, isZoomedOut ] );
+ const scaleContainerWidth = Math.max(
+ initialContainerWidth.current,
+ containerWidth
+ );
+
const disabledRef = useDisabled( { isDisabled: ! readonly } );
const bodyRef = useMergeRefs( [
useBubbleEvents( iframeDocument ),
@@ -299,17 +304,6 @@ function Iframe( {
useEffect( () => cleanup, [ cleanup ] );
const zoomOutAnimationClassnameRef = useRef( null );
- const handleZoomOutAnimationClassname = () => {
- clearTimeout( zoomOutAnimationClassnameRef.current );
-
- iframeDocument.documentElement.classList.add( 'zoom-out-animation' );
-
- zoomOutAnimationClassnameRef.current = setTimeout( () => {
- iframeDocument.documentElement.classList.remove(
- 'zoom-out-animation'
- );
- }, 400 ); // 400ms should match the animation speed used in components/iframe/content.scss
- };
// Toggle zoom out CSS Classes only when zoom out mode changes. We could add these into the useEffect
// that controls settings the CSS variables, but then we would need to do more work to ensure we're
@@ -320,6 +314,20 @@ function Iframe( {
return;
}
+ const handleZoomOutAnimationClassname = () => {
+ clearTimeout( zoomOutAnimationClassnameRef.current );
+
+ iframeDocument.documentElement.classList.add(
+ 'zoom-out-animation'
+ );
+
+ zoomOutAnimationClassnameRef.current = setTimeout( () => {
+ iframeDocument.documentElement.classList.remove(
+ 'zoom-out-animation'
+ );
+ }, 400 ); // 400ms should match the animation speed used in components/iframe/content.scss
+ };
+
handleZoomOutAnimationClassname();
iframeDocument.documentElement.classList.add( 'is-zoomed-out' );
@@ -349,10 +357,7 @@ function Iframe( {
scale === 'default'
? ( Math.min( containerWidth, maxWidth ) -
parseInt( frameSize ) * 2 ) /
- Math.max(
- initialContainerWidth.current,
- containerWidth
- )
+ scaleContainerWidth
: scale
);
@@ -374,15 +379,10 @@ function Iframe( {
`${ containerWidth }px`
);
iframeDocument.documentElement.style.setProperty(
- '--wp-block-editor-iframe-zoom-out-outer-container-width',
- `${ Math.max( initialContainerWidth.current, containerWidth ) }px`
+ '--wp-block-editor-iframe-zoom-out-scale-container-width',
+ `${ scaleContainerWidth }px`
);
- // iframeDocument.documentElement.style.setProperty(
- // '--wp-block-editor-iframe-zoom-out-outer-container-width',
- // `${ Math.max( initialContainerWidth.current, containerWidth ) }px`
- // );
-
return () => {
iframeDocument.documentElement.style.removeProperty(
'--wp-block-editor-iframe-zoom-out-scale'
@@ -400,7 +400,7 @@ function Iframe( {
'--wp-block-editor-iframe-zoom-out-container-width'
);
iframeDocument.documentElement.style.removeProperty(
- '--wp-block-editor-iframe-zoom-out-outer-container-width'
+ '--wp-block-editor-iframe-zoom-out-scale-container-width'
);
};
}, [
@@ -412,6 +412,7 @@ function Iframe( {
containerWidth,
windowInnerWidth,
isZoomedOut,
+ scaleContainerWidth,
] );
// Make sure to not render the before and after focusable div elements in view
@@ -501,12 +502,8 @@ function Iframe( {
isZoomedOut && 'is-zoomed-out'
) }
style={ {
- '--wp-block-editor-iframe-zoom-out-outer-container-width':
- isZoomedOut &&
- `${ Math.max(
- initialContainerWidth.current,
- containerWidth
- ) }px`,
+ '--wp-block-editor-iframe-zoom-out-scale-container-width':
+ isZoomedOut && `${ scaleContainerWidth }px`,
} }
>
{ iframe }
diff --git a/packages/block-editor/src/components/iframe/style.scss b/packages/block-editor/src/components/iframe/style.scss
index d05be2f3977b9..5dd30c338057e 100644
--- a/packages/block-editor/src/components/iframe/style.scss
+++ b/packages/block-editor/src/components/iframe/style.scss
@@ -9,8 +9,8 @@
}
.block-editor-iframe__scale-container.is-zoomed-out {
- $outer-container-width: var(--wp-block-editor-iframe-zoom-out-outer-container-width, 100vw);
- width: $outer-container-width;
+ $scale-container-width: var(--wp-block-editor-iframe-zoom-out-scale-container-width, 100vw);
+ width: $scale-container-width;
// Position the iframe so that it is always aligned with the right side so that
// the scrollbar is always visible on the right side
position: absolute;
diff --git a/packages/block-editor/src/store/private-selectors.js b/packages/block-editor/src/store/private-selectors.js
index c322898031065..28e0c2bd47b0c 100644
--- a/packages/block-editor/src/store/private-selectors.js
+++ b/packages/block-editor/src/store/private-selectors.js
@@ -17,6 +17,7 @@ import {
getClientIdsWithDescendants,
isNavigationMode,
getBlockRootClientId,
+ __unstableGetEditorMode,
} from './selectors';
import {
checkAllowListRecursive,
@@ -579,7 +580,7 @@ export const getBlockStyles = createSelector(
* @return {boolean} Is zoom out mode enabled.
*/
export function isZoomOutMode( state ) {
- return state.editorMode === 'zoom-out';
+ return __unstableGetEditorMode( state ) === 'zoom-out';
}
/**
diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
index 2bfc52118d7ac..57e48442b1070 100644
--- a/packages/block-editor/src/store/selectors.js
+++ b/packages/block-editor/src/store/selectors.js
@@ -1552,12 +1552,18 @@ export function getTemplateLock( state, rootClientId ) {
* @param {string|Object} blockNameOrType The block type object, e.g., the response
* from the block directory; or a string name of
* an installed block type, e.g.' core/paragraph'.
+ * @param {Set} checkedBlocks Set of block names that have already been checked.
*
* @return {boolean} Whether the given block type is allowed to be inserted.
*/
-const isBlockVisibleInTheInserter = ( state, blockNameOrType ) => {
+const isBlockVisibleInTheInserter = (
+ state,
+ blockNameOrType,
+ checkedBlocks = new Set()
+) => {
let blockType;
let blockName;
+
if ( blockNameOrType && 'object' === typeof blockNameOrType ) {
blockType = blockNameOrType;
blockName = blockNameOrType.name;
@@ -1565,6 +1571,7 @@ const isBlockVisibleInTheInserter = ( state, blockNameOrType ) => {
blockType = getBlockType( blockNameOrType );
blockName = blockNameOrType;
}
+
if ( ! blockType ) {
return false;
}
@@ -1580,11 +1587,22 @@ const isBlockVisibleInTheInserter = ( state, blockNameOrType ) => {
return false;
}
+ if ( checkedBlocks.has( blockName ) ) {
+ return false;
+ }
+
+ checkedBlocks.add( blockName );
+
// If parent blocks are not visible, child blocks should be hidden too.
if ( !! blockType.parent?.length ) {
return blockType.parent.some(
( name ) =>
- isBlockVisibleInTheInserter( state, name ) ||
+ ( blockName !== name &&
+ isBlockVisibleInTheInserter(
+ state,
+ name,
+ checkedBlocks
+ ) ) ||
// Exception for blocks with post-content parent,
// the root level is often consider as "core/post-content".
// This exception should only apply to the post editor ideally though.
diff --git a/packages/block-library/CHANGELOG.md b/packages/block-library/CHANGELOG.md
index 5ffd428b6dbdc..b3788917cfbb9 100644
--- a/packages/block-library/CHANGELOG.md
+++ b/packages/block-library/CHANGELOG.md
@@ -2,6 +2,8 @@
## Unreleased
+## 9.10.0 (2024-10-16)
+
## 9.9.0 (2024-10-03)
## 9.8.0 (2024-09-19)
diff --git a/packages/block-library/package.json b/packages/block-library/package.json
index ba5283aee9da8..e9e76b8018e1d 100644
--- a/packages/block-library/package.json
+++ b/packages/block-library/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/block-library",
- "version": "9.9.0",
+ "version": "9.10.0",
"description": "Block library for the WordPress editor.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/block-library/src/common.scss b/packages/block-library/src/common.scss
index c6327692ff02a..15c2cd52b76aa 100644
--- a/packages/block-library/src/common.scss
+++ b/packages/block-library/src/common.scss
@@ -75,8 +75,6 @@
.screen-reader-text {
border: 0;
- clip: rect(1px, 1px, 1px, 1px);
- -webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
@@ -89,7 +87,6 @@
.screen-reader-text:focus {
background-color: $gray-300;
- clip: auto !important;
clip-path: none;
color: #444;
display: block;
diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss
index 41b3acf1833fc..b2c1fe8844023 100644
--- a/packages/block-library/src/cover/style.scss
+++ b/packages/block-library/src/cover/style.scss
@@ -100,6 +100,12 @@
color: inherit;
// Reset the fixed LTR direction at the root of the block in RTL languages.
/*rtl:raw: direction: rtl; */
+
+ // Reset the z-index to auto when the body has a modal open. So when the
+ // modal is inside the cover, it doesn't create a stacking context.
+ @at-root .has-modal-open & {
+ z-index: auto;
+ }
}
// Position: Top
diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
index ae7dd60bd0c5b..d961f0d8fc93b 100644
--- a/packages/block-library/src/navigation/edit/index.js
+++ b/packages/block-library/src/navigation/edit/index.js
@@ -73,6 +73,33 @@ import AccessibleDescription from './accessible-description';
import AccessibleMenuDescription from './accessible-menu-description';
import { unlock } from '../../lock-unlock';
+function useResponsiveMenu( navRef ) {
+ const [ isResponsiveMenuOpen, setResponsiveMenuVisibility ] =
+ useState( false );
+
+ useEffect( () => {
+ if ( ! navRef.current ) {
+ return;
+ }
+
+ const htmlElement = navRef.current.ownerDocument.documentElement;
+
+ // Add a `has-modal-open` class to the when the responsive
+ // menu is open. This reproduces the same behavior of the frontend.
+ if ( isResponsiveMenuOpen ) {
+ htmlElement.classList.add( 'has-modal-open' );
+ } else {
+ htmlElement.classList.remove( 'has-modal-open' );
+ }
+
+ return () => {
+ htmlElement?.classList.remove( 'has-modal-open' );
+ };
+ }, [ navRef, isResponsiveMenuOpen ] );
+
+ return [ isResponsiveMenuOpen, setResponsiveMenuVisibility ];
+}
+
function ColorTools( {
textColor,
setTextColor,
@@ -284,8 +311,10 @@ function Navigation( {
__unstableMarkNextChangeAsNotPersistent,
} = useDispatch( blockEditorStore );
+ const navRef = useRef();
+
const [ isResponsiveMenuOpen, setResponsiveMenuVisibility ] =
- useState( false );
+ useResponsiveMenu( navRef );
const [ overlayMenuPreview, setOverlayMenuPreview ] = useState( false );
@@ -367,8 +396,6 @@ function Navigation( {
__unstableMarkNextChangeAsNotPersistent,
] );
- const navRef = useRef();
-
// The standard HTML5 tag for the block wrapper.
const TagName = 'nav';
diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
index 1d37186e4ae98..2f61a19be2b79 100644
--- a/packages/block-library/src/navigation/editor.scss
+++ b/packages/block-library/src/navigation/editor.scss
@@ -203,6 +203,7 @@ $color-control-label-height: 20px;
.wp-block-navigation .wp-block + .block-list-appender .block-editor-button-block-appender {
background-color: $gray-900;
color: $white;
+ height: $button-size-small;
// This needs specificity to override an inherited padding.
// That source padding in turn has high specificity to protect
diff --git a/packages/block-serialization-default-parser/CHANGELOG.md b/packages/block-serialization-default-parser/CHANGELOG.md
index 4104f5282ce3f..9b0457333bd7d 100644
--- a/packages/block-serialization-default-parser/CHANGELOG.md
+++ b/packages/block-serialization-default-parser/CHANGELOG.md
@@ -2,6 +2,8 @@
## Unreleased
+## 5.10.0 (2024-10-16)
+
## 5.9.0 (2024-10-03)
## 5.8.0 (2024-09-19)
diff --git a/packages/block-serialization-default-parser/package.json b/packages/block-serialization-default-parser/package.json
index c0cf128683564..3b159dc353488 100644
--- a/packages/block-serialization-default-parser/package.json
+++ b/packages/block-serialization-default-parser/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/block-serialization-default-parser",
- "version": "5.9.0",
+ "version": "5.10.0",
"description": "Block serialization specification parser for WordPress posts.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/block-serialization-spec-parser/CHANGELOG.md b/packages/block-serialization-spec-parser/CHANGELOG.md
index 87c683849585e..40c93063cafbb 100644
--- a/packages/block-serialization-spec-parser/CHANGELOG.md
+++ b/packages/block-serialization-spec-parser/CHANGELOG.md
@@ -2,6 +2,8 @@
## Unreleased
+## 5.10.0 (2024-10-16)
+
## 5.9.0 (2024-10-03)
## 5.8.0 (2024-09-19)
diff --git a/packages/block-serialization-spec-parser/package.json b/packages/block-serialization-spec-parser/package.json
index 38469f4d29529..49c3ed6c872c7 100644
--- a/packages/block-serialization-spec-parser/package.json
+++ b/packages/block-serialization-spec-parser/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/block-serialization-spec-parser",
- "version": "5.9.0",
+ "version": "5.10.0",
"description": "Block serialization specification parser for WordPress posts.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/blocks/CHANGELOG.md b/packages/blocks/CHANGELOG.md
index 7e163fec2ad16..73a700428674b 100644
--- a/packages/blocks/CHANGELOG.md
+++ b/packages/blocks/CHANGELOG.md
@@ -2,6 +2,8 @@
## Unreleased
+## 13.10.0 (2024-10-16)
+
## 13.9.0 (2024-10-03)
## 13.8.0 (2024-09-19)
diff --git a/packages/blocks/package.json b/packages/blocks/package.json
index b66d06e7884c4..9b7665ae9c87d 100644
--- a/packages/blocks/package.json
+++ b/packages/blocks/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/blocks",
- "version": "13.9.0",
+ "version": "13.10.0",
"description": "Block API for WordPress.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/blocks/src/api/registration.js b/packages/blocks/src/api/registration.js
index ae12b0cfbcf49..ef1b6bd20a4cd 100644
--- a/packages/blocks/src/api/registration.js
+++ b/packages/blocks/src/api/registration.js
@@ -232,6 +232,15 @@ export function registerBlockType( blockNameOrMetadata, settings ) {
return;
}
+ if ( 1 === settings?.parent?.length && name === settings.parent[ 0 ] ) {
+ warning(
+ 'Block "' +
+ name +
+ '" cannot be a parent of itself. Please remove the block name from the parent list.'
+ );
+ return;
+ }
+
if ( ! /^[a-z][a-z0-9-]*\/[a-z][a-z0-9-]*$/.test( name ) ) {
warning(
'Block names must contain a namespace prefix, include only lowercase alphanumeric characters or dashes, and start with a letter. Example: my-plugin/my-custom-block'
@@ -854,14 +863,6 @@ export const registerBlockBindingsSource = ( source ) => {
}
// Check the `label` property is correct.
- if ( label && existingSource?.label ) {
- warning(
- 'Block bindings "' +
- name +
- '" source label is already defined in the server.'
- );
- return;
- }
if ( ! label && ! existingSource?.label ) {
warning( 'Block bindings source must contain a label.' );
@@ -873,6 +874,10 @@ export const registerBlockBindingsSource = ( source ) => {
return;
}
+ if ( label && existingSource?.label && label !== existingSource?.label ) {
+ warning( 'Block bindings "' + name + '" source label was overriden.' );
+ }
+
// Check the `usesContext` property is correct.
if ( usesContext && ! Array.isArray( usesContext ) ) {
warning( 'Block bindings source usesContext must be an array.' );
diff --git a/packages/blocks/src/api/test/registration.js b/packages/blocks/src/api/test/registration.js
index 99ca6390d2d3b..656e9471a541b 100644
--- a/packages/blocks/src/api/test/registration.js
+++ b/packages/blocks/src/api/test/registration.js
@@ -104,6 +104,17 @@ describe( 'blocks', () => {
expect( block ).toBeUndefined();
} );
+ it( 'Should reject blocks with the block name itself as the only parent attribute value', () => {
+ const block = registerBlockType( 'core/test-block', {
+ ...defaultBlockSettings,
+ parent: [ 'core/test-block' ],
+ } );
+ expect( console ).toHaveWarnedWith(
+ 'Block "core/test-block" cannot be a parent of itself. Please remove the block name from the parent list.'
+ );
+ expect( block ).toBeUndefined();
+ } );
+
it( 'should reject blocks with uppercase characters', () => {
const block = registerBlockType( 'Core/Paragraph' );
expect( console ).toHaveWarnedWith(
@@ -1512,20 +1523,38 @@ describe( 'blocks', () => {
expect( getBlockBindingsSource( 'core/testing' ) ).toBeUndefined();
} );
- it( 'should not override label from the server', () => {
+ it( 'should override label from the server', () => {
// Simulate bootstrap source from the server.
registerBlockBindingsSource( {
- name: 'core/server',
+ name: 'core/testing',
label: 'Server label',
} );
// Override the source with a different label in the client.
registerBlockBindingsSource( {
- name: 'core/server',
+ name: 'core/testing',
label: 'Client label',
} );
expect( console ).toHaveWarnedWith(
- 'Block bindings "core/server" source label is already defined in the server.'
+ 'Block bindings "core/testing" source label was overriden.'
);
+ const source = getBlockBindingsSource( 'core/testing' );
+ unregisterBlockBindingsSource( 'core/testing' );
+ expect( source.label ).toEqual( 'Client label' );
+ } );
+
+ it( 'should keep label from the server when not defined in the client', () => {
+ // Simulate bootstrap source from the server.
+ registerBlockBindingsSource( {
+ name: 'core/testing',
+ label: 'Server label',
+ } );
+ // Override the source with a different label in the client.
+ registerBlockBindingsSource( {
+ name: 'core/testing',
+ } );
+ const source = getBlockBindingsSource( 'core/testing' );
+ unregisterBlockBindingsSource( 'core/testing' );
+ expect( source.label ).toEqual( 'Server label' );
} );
// Check the `usesContext` array is correct.
diff --git a/packages/blocks/src/store/reducer.js b/packages/blocks/src/store/reducer.js
index 16594a79271e6..ac652b9189031 100644
--- a/packages/blocks/src/store/reducer.js
+++ b/packages/blocks/src/store/reducer.js
@@ -403,8 +403,7 @@ export function blockBindingsSources( state = {}, action ) {
return {
...state,
[ action.name ]: {
- // Don't override the label if it's already set.
- label: state[ action.name ]?.label || action.label,
+ label: action.label || state[ action.name ]?.label,
usesContext: getMergedUsesContext(
state[ action.name ]?.usesContext,
action.usesContext
diff --git a/packages/browserslist-config/CHANGELOG.md b/packages/browserslist-config/CHANGELOG.md
index 9dae2564c1a32..8a2dc5d0ecc48 100644
--- a/packages/browserslist-config/CHANGELOG.md
+++ b/packages/browserslist-config/CHANGELOG.md
@@ -2,6 +2,8 @@
## Unreleased
+## 6.10.0 (2024-10-16)
+
## 6.9.0 (2024-10-03)
## 6.8.0 (2024-09-19)
diff --git a/packages/browserslist-config/package.json b/packages/browserslist-config/package.json
index 0c4d314203483..8b19151e95047 100644
--- a/packages/browserslist-config/package.json
+++ b/packages/browserslist-config/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/browserslist-config",
- "version": "6.9.0",
+ "version": "6.10.0",
"description": "WordPress Browserslist shared configuration.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/commands/CHANGELOG.md b/packages/commands/CHANGELOG.md
index 2b268bd66f404..c75dbab26739d 100644
--- a/packages/commands/CHANGELOG.md
+++ b/packages/commands/CHANGELOG.md
@@ -2,6 +2,8 @@
## Unreleased
+## 1.10.0 (2024-10-16)
+
## 1.9.0 (2024-10-03)
## 1.8.0 (2024-09-19)
diff --git a/packages/commands/package.json b/packages/commands/package.json
index 8c4521da0a34b..e1529416aa7df 100644
--- a/packages/commands/package.json
+++ b/packages/commands/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/commands",
- "version": "1.9.0",
+ "version": "1.10.0",
"description": "Handles the commands menu.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 48113f874af3a..d71f6ba7ce142 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -4,12 +4,23 @@
### Bug Fixes
+- `ColorPalette`: prevent overflow of custom color button background ([#66152](https://github.com/WordPress/gutenberg/pull/66152)).
+
+### Enhancements
+
+- `PaletteEdit`: use `Item` internally instead of custom styles ([#66164](https://github.com/WordPress/gutenberg/pull/66164)).
+
+## 28.10.0 (2024-10-16)
+
+### Bug Fixes
+
- `Tooltip`: add `aria-describedby` to the anchor only if not redundant ([#65989](https://github.com/WordPress/gutenberg/pull/65989)).
- `PaletteEdit`: dedupe palette element slugs ([#65772](https://github.com/WordPress/gutenberg/pull/65772)).
- `RangeControl`: do not tooltip contents to the DOM when not shown ([#65875](https://github.com/WordPress/gutenberg/pull/65875)).
- `Tabs`: fix skipping indication animation glitch ([#65878](https://github.com/WordPress/gutenberg/pull/65878)).
- `ToggleGroupControl`: Don't autoselect option on first group focus ([#65892](https://github.com/WordPress/gutenberg/pull/65892)).
- `Button`: fix `box-shadow` transition for secondary variation ([#66045](https://github.com/WordPress/gutenberg/pull/66045)).
+- `ToggleGroupControl`: Don't set value on focus after a reset ([#66151](https://github.com/WordPress/gutenberg/pull/66151)).
### Deprecations
diff --git a/packages/components/package.json b/packages/components/package.json
index 0bc1c865299d2..16c7b6c63c0b1 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/components",
- "version": "28.9.0",
+ "version": "28.10.0",
"description": "UI components for WordPress.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/components/schemas/docs-manifest.json b/packages/components/schemas/docs-manifest.json
new file mode 100644
index 0000000000000..7d1e40f4f696d
--- /dev/null
+++ b/packages/components/schemas/docs-manifest.json
@@ -0,0 +1,38 @@
+{
+ "title": "JSON schema for @wordpress/components README manifests",
+ "$schema": "http://json-schema.org/draft-07/schema#",
+ "type": "object",
+ "properties": {
+ "displayName": {
+ "type": "string",
+ "description": "The `displayName` of the component, as determined in code. Used to identify the component in the specified source file."
+ },
+ "filePath": {
+ "type": "string",
+ "description": "The file path where the component is located."
+ },
+ "subcomponents": {
+ "type": "array",
+ "description": "List of subcomponents related to the component.",
+ "items": {
+ "type": "object",
+ "properties": {
+ "displayName": {
+ "type": "string",
+ "description": "The `displayName` of the subcomponent, as determined in code. Used to identify the component in the specified source file."
+ },
+ "preferredDisplayName": {
+ "type": "string",
+ "description": "The display name to use in the README, if it is different from the `displayName` as determined in code."
+ },
+ "filePath": {
+ "type": "string",
+ "description": "The file path where the subcomponent is located."
+ }
+ },
+ "required": [ "displayName", "filePath" ]
+ }
+ }
+ },
+ "required": [ "displayName", "filePath" ]
+}
diff --git a/packages/components/src/alignment-matrix-control/README.md b/packages/components/src/alignment-matrix-control/README.md
index 68ecab6b7adb4..af97e3ae0607c 100644
--- a/packages/components/src/alignment-matrix-control/README.md
+++ b/packages/components/src/alignment-matrix-control/README.md
@@ -1,12 +1,14 @@
# AlignmentMatrixControl
-AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.
+
+
+See the WordPress Storybook for more detailed, interactive documentation.
-## Usage
+AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.
```jsx
-import { useState } from 'react';
import { AlignmentMatrixControl } from '@wordpress/components';
+import { useState } from '@wordpress/element';
const Example = () => {
const [ alignment, setAlignment ] = useState( 'center center' );
@@ -14,63 +16,70 @@ const Example = () => {
return (
setAlignment( newAlignment ) }
+ onChange={ setAlignment }
/>
);
};
```
-
## Props
-The component accepts the following props:
+### `defaultValue`
-### className
+If provided, sets the default alignment value.
-The class that will be added to the classes of the underlying `grid` widget.
-- Type: `string`
-- Required: No
+ - Type: `"center" | "top left" | "top center" | "top right" | "center left" | "center center" | "center right" | "bottom left" | "bottom center" | "bottom right"`
+ - Required: No
+ - Default: `'center center'`
-### id
+### `label`
-Unique ID for the component.
+Accessible label. If provided, sets the `aria-label` attribute of the
+underlying `grid` widget.
-- Type: `string`
-- Required: No
+ - Type: `string`
+ - Required: No
+ - Default: `'Alignment Matrix Control'`
-### label
+### `onChange`
-Accessible label. If provided, sets the `aria-label` attribute of the underlying `grid` widget.
+A function that receives the updated alignment value.
-- Type: `string`
-- Required: No
-- Default: `Alignment Matrix Control`
+ - Type: `(newValue: AlignmentMatrixControlValue) => void`
+ - Required: No
-### defaultValue
+### `value`
-If provided, sets the default alignment value.
+The current alignment value.
-- Type: `AlignmentMatrixControlValue`
-- Required: No
-- Default: `center center`
+ - Type: `"center" | "top left" | "top center" | "top right" | "center left" | "center center" | "center right" | "bottom left" | "bottom center" | "bottom right"`
+ - Required: No
-### value
+### `width`
-The current alignment value.
+If provided, sets the width of the control.
-- Type: `AlignmentMatrixControlValue`
-- Required: No
+ - Type: `number`
+ - Required: No
+ - Default: `92`
-### onChange
+## Subcomponents
-A function that receives the updated alignment value.
+### AlignmentMatrixControl.Icon
-- Type: `( newValue: AlignmentMatrixControlValue ) => void`
-- Required: No
+#### Props
-### width
+##### `disablePointerEvents`
-If provided, sets the width of the control.
+If `true`, disables pointer events on the icon.
- - Type: `number`
+ - Type: `boolean`
- Required: No
- - Default: `92`
+ - Default: `true`
+
+##### `value`
+
+The current alignment value.
+
+ - Type: `"center" | "top left" | "top center" | "top right" | "center left" | "center center" | "center right" | "bottom left" | "bottom center" | "bottom right"`
+ - Required: No
+ - Default: `center`
diff --git a/packages/components/src/alignment-matrix-control/docs-manifest.json b/packages/components/src/alignment-matrix-control/docs-manifest.json
new file mode 100644
index 0000000000000..82ee28f4840c4
--- /dev/null
+++ b/packages/components/src/alignment-matrix-control/docs-manifest.json
@@ -0,0 +1,12 @@
+{
+ "$schema": "../../schemas/docs-manifest.json",
+ "displayName": "AlignmentMatrixControl",
+ "filePath": "./index.tsx",
+ "subcomponents": [
+ {
+ "displayName": "AlignmentMatrixControlIcon",
+ "preferredDisplayName": "AlignmentMatrixControl.Icon",
+ "filePath": "./icon.tsx"
+ }
+ ]
+}
diff --git a/packages/components/src/alignment-matrix-control/types.ts b/packages/components/src/alignment-matrix-control/types.ts
index 0f97c2df3b02b..e93f412c1f472 100644
--- a/packages/components/src/alignment-matrix-control/types.ts
+++ b/packages/components/src/alignment-matrix-control/types.ts
@@ -54,6 +54,8 @@ export type AlignmentMatrixControlIconProps = Pick<
* component instead_
*
* The size of the icon.
+ *
+ * @deprecated
* @ignore
* @default 24
*/
diff --git a/packages/components/src/angle-picker-control/README.md b/packages/components/src/angle-picker-control/README.md
index deed41089fdc1..d9389c6564338 100644
--- a/packages/components/src/angle-picker-control/README.md
+++ b/packages/components/src/angle-picker-control/README.md
@@ -1,44 +1,56 @@
# AnglePickerControl
-`AnglePickerControl` is a React component to render a UI that allows users to pick an angle.
-Users can choose an angle in a visual UI with the mouse by dragging an angle indicator inside a circle or by directly inserting the desired angle in a text field.
+
-## Usage
+See the WordPress Storybook for more detailed, interactive documentation.
+
+`AnglePickerControl` is a React component to render a UI that allows users to
+pick an angle. Users can choose an angle in a visual UI with the mouse by
+dragging an angle indicator inside a circle or by directly inserting the
+desired angle in a text field.
```jsx
-import { useState } from 'react';
+import { useState } from '@wordpress/element';
import { AnglePickerControl } from '@wordpress/components';
function Example() {
- const [ angle, setAngle ] = useState( 0 );
- return (
-
- );
-};
+ const [ angle, setAngle ] = useState( 0 );
+ return (
+
+ );
+}
```
-
## Props
-The component accepts the following props.
+### `as`
+
+The HTML element or React component to render the component as.
-### `label`: `string`
+ - Type: `"symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | ...`
+ - Required: No
+
+### `label`
Label to use for the angle picker.
-- Required: No
-- Default: `__( 'Angle' )`
+ - Type: `string`
+ - Required: No
+ - Default: `__( 'Angle' )`
-### `value`: `number | string`
+### `onChange`
-The current value of the input. The value represents an angle in degrees and should be a value between 0 and 360.
+A function that receives the new value of the input.
-- Required: Yes
+ - Type: `(value: number) => void`
+ - Required: Yes
-### `onChange`: `( value: number ) => void`
+### `value`
-A function that receives the new value of the input.
+The current value of the input. The value represents an angle in degrees
+and should be a value between 0 and 360.
-- Required: Yes
+ - Type: `string | number`
+ - Required: Yes
diff --git a/packages/components/src/angle-picker-control/docs-manifest.json b/packages/components/src/angle-picker-control/docs-manifest.json
new file mode 100644
index 0000000000000..bcbfb353ac9e3
--- /dev/null
+++ b/packages/components/src/angle-picker-control/docs-manifest.json
@@ -0,0 +1,5 @@
+{
+ "$schema": "../../schemas/docs-manifest.json",
+ "displayName": "AnglePickerControl",
+ "filePath": "./index.tsx"
+}
diff --git a/packages/components/src/button/stories/index.story.tsx b/packages/components/src/button/stories/index.story.tsx
index 2981319cfb323..808914893de61 100644
--- a/packages/components/src/button/stories/index.story.tsx
+++ b/packages/components/src/button/stories/index.story.tsx
@@ -22,7 +22,8 @@ import './style.css';
import Button from '..';
const meta: Meta< typeof Button > = {
- title: 'Components/Button',
+ title: 'Components/Actions/Button',
+ id: 'components-button',
component: Button,
argTypes: {
// Overrides a limitation of the docgen interpreting our TS types for this as required.
diff --git a/packages/components/src/card/stories/index.story.tsx b/packages/components/src/card/stories/index.story.tsx
index 1d75c044f1e27..03726abbe754e 100644
--- a/packages/components/src/card/stories/index.story.tsx
+++ b/packages/components/src/card/stories/index.story.tsx
@@ -22,7 +22,8 @@ const meta: Meta< typeof Card > = {
component: Card,
// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
subcomponents: { CardHeader, CardBody, CardDivider, CardMedia, CardFooter },
- title: 'Components/Card',
+ title: 'Components/Containers/Card',
+ id: 'components-card',
argTypes: {
as: {
control: { type: null },
diff --git a/packages/components/src/color-palette/style.scss b/packages/components/src/color-palette/style.scss
index 9d922a8130692..278aacb22914b 100644
--- a/packages/components/src/color-palette/style.scss
+++ b/packages/components/src/color-palette/style.scss
@@ -26,10 +26,7 @@ $border-as-box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
&::after {
content: "";
position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
+ inset: $border-width;
z-index: -1;
// The background image creates a checkerboard pattern. Ignore rtlcss to
// make it work both in LTR and RTL.
@@ -41,6 +38,7 @@ $border-as-box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
background-position: 0 0, 24px 24px;
/*rtl:end:ignore*/
background-size: calc(2 * 24px) calc(2 * 24px);
+ border-radius: $radius-medium - $border-width $radius-medium - $border-width 0 0;
}
}
diff --git a/packages/components/src/item-group/stories/index.story.tsx b/packages/components/src/item-group/stories/index.story.tsx
index 473cdfedbf4f1..99309b81ea314 100644
--- a/packages/components/src/item-group/stories/index.story.tsx
+++ b/packages/components/src/item-group/stories/index.story.tsx
@@ -37,6 +37,8 @@ const Template: StoryFn< typeof ItemGroup > = ( props ) => (
export const Default: StoryFn< typeof ItemGroup > = Template.bind( {} );
Default.args = {
+ isBordered: true,
+ isSeparated: true,
children: (
[
{
@@ -67,6 +69,7 @@ export const NonClickableItems: StoryFn< typeof ItemGroup > = Template.bind(
{}
);
NonClickableItems.args = {
+ ...Default.args,
children: (
[
{
@@ -83,6 +86,7 @@ NonClickableItems.args = {
export const CustomItemSize: StoryFn< typeof ItemGroup > = Template.bind( {} );
CustomItemSize.args = {
+ ...Default.args,
children: (
[
{
@@ -98,9 +102,9 @@ CustomItemSize.args = {
).map( mapPropsToItem ),
};
-export const WithBorder: StoryFn< typeof ItemGroup > = Template.bind( {} );
-WithBorder.args = {
+export const WithoutBorder: StoryFn< typeof ItemGroup > = Template.bind( {} );
+WithoutBorder.args = {
...Default.args,
- isBordered: true,
- isSeparated: true,
+ isBordered: false,
+ isSeparated: false,
};
diff --git a/packages/components/src/navigable-container/stories/navigable-menu.story.tsx b/packages/components/src/navigable-container/stories/navigable-menu.story.tsx
index 9e5f3eedff528..2ad7e028d6faf 100644
--- a/packages/components/src/navigable-container/stories/navigable-menu.story.tsx
+++ b/packages/components/src/navigable-container/stories/navigable-menu.story.tsx
@@ -9,7 +9,8 @@ import type { Meta, StoryFn } from '@storybook/react';
import { NavigableMenu } from '..';
const meta: Meta< typeof NavigableMenu > = {
- title: 'Components/NavigableMenu',
+ title: 'Components/Containers/NavigableMenu',
+ id: 'components-navigablemenu',
component: NavigableMenu,
argTypes: {
children: { control: { type: null } },
diff --git a/packages/components/src/navigable-container/stories/tabbable-container.story.tsx b/packages/components/src/navigable-container/stories/tabbable-container.story.tsx
index 3dd090f0b0585..07c87a0c20f1b 100644
--- a/packages/components/src/navigable-container/stories/tabbable-container.story.tsx
+++ b/packages/components/src/navigable-container/stories/tabbable-container.story.tsx
@@ -9,7 +9,8 @@ import type { Meta, StoryFn } from '@storybook/react';
import { TabbableContainer } from '..';
const meta: Meta< typeof TabbableContainer > = {
- title: 'Components/TabbableContainer',
+ title: 'Components/Containers/TabbableContainer',
+ id: 'components-tabbablecontainer',
component: TabbableContainer,
argTypes: {
children: { control: { type: null } },
diff --git a/packages/components/src/palette-edit/index.tsx b/packages/components/src/palette-edit/index.tsx
index 8bfcb7240b9ea..570613e5378c1 100644
--- a/packages/components/src/palette-edit/index.tsx
+++ b/packages/components/src/palette-edit/index.tsx
@@ -24,7 +24,7 @@ import Button from '../button';
import { ColorPicker } from '../color-picker';
import { FlexItem } from '../flex';
import { HStack } from '../h-stack';
-import { ItemGroup } from '../item-group';
+import { Item, ItemGroup } from '../item-group';
import { VStack } from '../v-stack';
import GradientPicker from '../gradient-picker';
import ColorPalette from '../color-palette';
@@ -35,7 +35,6 @@ import {
PaletteEditStyles,
PaletteHeading,
IndicatorStyled,
- PaletteItem,
NameContainer,
NameInputControl,
DoneButton,
@@ -213,7 +212,7 @@ function Option< T extends PaletteElement >( {
);
return (
-
+ -
+
);
}
@@ -309,7 +308,7 @@ function PaletteEditListView< T extends PaletteElement >( {
return (
-
+
{ elements.map( ( element, index ) => (