- { ! 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 7a5c2243cf0540..00000000000000
--- 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 2b5c6a3e3cea6e..00000000000000
--- 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 4a0e2d519f914b..1d01f84b5fd1fd 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 b72d86ef8e0f8f..b14514f934fb3e 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 d05be2f3977b9f..5dd30c338057e2 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 c3228980310656..28e0c2bd47b0ca 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 2bfc52118d7ace..57e48442b1070b 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 5ffd428b6dbdcf..b3788917cfbb95 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 ba5283aee9da84..e9e76b8018e1d3 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 c6327692ff02a3..15c2cd52b76aad 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 41b3acf1833fc0..b2c1fe88440235 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 ae7dd60bd0c5ba..d961f0d8fc93b9 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 1d37186e4ae98b..2f61a19be2b799 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 4104f5282ce3fb..9b0457333bd7d5 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 c0cf1286835649..3b159dc3534888 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 87c683849585e0..40c93063cafbb7 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 38469f4d295298..49c3ed6c872c73 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 7e163fec2ad161..73a700428674b2 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 b66d06e7884c4f..9b7665ae9c87d6 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 ae12b0cfbcf49d..ef1b6bd20a4cdd 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 99ca6390d2d3b1..656e9471a541b8 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 16594a79271e6c..ac652b91890319 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 9dae2564c1a32e..8a2dc5d0ecc484 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 0c4d314203483b..8b19151e950475 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 2b268bd66f404e..c75dbab26739d8 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 8c4521da0a34b8..e1529416aa7df7 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 48113f874af3a2..d71f6ba7ce142f 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 0bc1c865299d2d..16c7b6c63c0b18 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 00000000000000..7d1e40f4f696d7
--- /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 68ecab6b7adb47..af97e3ae0607cd 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 00000000000000..82ee28f4840c49
--- /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 0f97c2df3b02bb..e93f412c1f4721 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 deed41089fdc1d..d9389c6564338f 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 00000000000000..bcbfb353ac9e32
--- /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 2981319cfb3233..808914893de610 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 1d75c044f1e270..03726abbe754ee 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 9d922a8130692a..278aacb22914bb 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 473cdfedbf4f12..99309b81ea314f 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 9e5f3eedff5289..2ad7e028d6faf1 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 3dd090f0b05859..07c87a0c20f1bf 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 8bfcb7240b9ea4..570613e5378c10 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 ) => (