type === 'core/link'
- );
-
- const linkFormatAtEnd = formats[ value.end - 1 ]?.find(
- ( { type } ) => type === 'core/link'
- );
-
- if (
- ! linkFormatAtStart ||
- ! linkFormatAtEnd ||
- linkFormatAtStart !== linkFormatAtEnd
- ) {
- isActive = false;
- }
- }
-
return (
{
@@ -84,6 +84,7 @@ function ColumnsEditContainer( {
allowedBlocks: ALLOWED_BLOCKS,
orientation: 'horizontal',
renderAppender: false,
+ templateLock,
} );
return (
diff --git a/packages/block-library/src/comments/index.php b/packages/block-library/src/comments/index.php
index a5e51cfbf4e793..807c0c3ead2b8f 100644
--- a/packages/block-library/src/comments/index.php
+++ b/packages/block-library/src/comments/index.php
@@ -212,6 +212,7 @@ function register_legacy_post_comments_block() {
* like `_wp_multiple_block_styles`, which is required in this case because
* the block has multiple styles.
*/
+ /** This filter is documented in wp-includes/blocks.php */
$metadata = apply_filters( 'block_type_metadata', $metadata );
register_block_type( 'core/post-comments', $metadata );
diff --git a/packages/block-library/src/cover/test/__snapshots__/transforms.native.js.snap b/packages/block-library/src/cover/test/__snapshots__/transforms.native.js.snap
index 252edf24172231..dc4ba0fbb2b1f8 100644
--- a/packages/block-library/src/cover/test/__snapshots__/transforms.native.js.snap
+++ b/packages/block-library/src/cover/test/__snapshots__/transforms.native.js.snap
@@ -30,7 +30,7 @@ exports[`Cover block transformations with Image to Image block 1`] = `
exports[`Cover block transformations with Image to Media & Text block 1`] = `
"
-
+
Cool cover
+
Cool cover
+
+ );
+
+ if ( href ) {
+ image = (
+
+ { image }
+
+ );
+ }
+
+ const mediaTypeRenders = {
+ image: () => image,
+ video: () => ,
+ };
+ const className = classnames( {
+ 'has-media-on-the-right': 'right' === mediaPosition,
+ 'is-stacked-on-mobile': isStackedOnMobile,
+ [ `is-vertically-aligned-${ verticalAlignment }` ]:
+ verticalAlignment,
+ 'is-image-fill': imageFill,
+ } );
+ const backgroundStyles = imageFill
+ ? v6ImageFillStyles( mediaUrl, focalPoint )
+ : {};
+
+ let gridTemplateColumns;
+ if ( mediaWidth !== DEFAULT_MEDIA_WIDTH ) {
+ gridTemplateColumns =
+ 'right' === mediaPosition
+ ? `auto ${ mediaWidth }%`
+ : `${ mediaWidth }% auto`;
+ }
+ const style = {
+ gridTemplateColumns,
+ };
+
+ if ( 'right' === mediaPosition ) {
+ return (
+
);
},
+ migrate: migrateDefaultAlign,
};
// Version with CSS grid
+// See: https://github.com/WordPress/gutenberg/pull/40806
const v4 = {
attributes: v4ToV5BlockAttributes,
supports: v4ToV5Supports,
@@ -348,8 +572,11 @@ const v4 = {
+
+
+ { ( mediaTypeRenders[ mediaType ] || noop )() }
+
+
+ );
+ }
+ return (
+
+
+ { ( mediaTypeRenders[ mediaType ] || noop )() }
+
+
+
+ );
+ },
+ migrate: migrateDefaultAlign,
+ isEligible( attributes, innerBlocks, { block } ) {
+ const { attributes: finalizedAttributes } = block;
+ // When the align attribute defaults to none, valid block markup should
+ // not contain any alignment CSS class. Unfortunately, this
+ // deprecation's version of the block won't be invalidated due to the
+ // alignwide class still being in the markup. That is because the custom
+ // CSS classname support picks it up and adds it to the className
+ // attribute. At the time of parsing, the className attribute won't
+ // contain the alignwide class, hence the need to check the finalized
+ // block attributes.
+ return (
+ attributes.align === undefined &&
+ !! finalizedAttributes.className?.includes( 'alignwide' )
+ );
+ },
+};
+
+// Version with non-rounded background position attribute for focal point.
+// See: https://github.com/WordPress/gutenberg/pull/33915
const v5 = {
attributes: v4ToV5BlockAttributes,
supports: v4ToV5Supports,
@@ -252,9 +474,11 @@ const v5 = {
-
+
Mountain
+
Mountain
-
+
Cloudup
+
Cloudup
+°;
+ const [ prefixedUnitText, suffixedUnitText ] = isRTL()
+ ? [ unitText, null ]
+ : [ null, unitText ];
+
return (
- °
-
- }
+ prefix={ prefixedUnitText }
+ suffix={ suffixedUnitText }
/>
-
+
-
+
);
}
diff --git a/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.tsx b/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.tsx
index 7d97903adf5c92..f08756f33bccf8 100644
--- a/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.tsx
+++ b/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.tsx
@@ -10,12 +10,13 @@ import styled from '@emotion/styled';
import { Flex } from '../../flex';
import { COLORS } from '../../utils';
import { space } from '../../ui/utils/space';
+import { Text } from '../../text';
import CONFIG from '../../utils/config-values';
import type { AnglePickerControlProps } from '../types';
const CIRCLE_SIZE = 32;
-const INNER_CIRCLE_SIZE = 3;
+const INNER_CIRCLE_SIZE = 6;
const deprecatedBottomMargin = ( {
__nextHasNoMarginBottom,
@@ -39,6 +40,10 @@ export const CircleRoot = styled.div`
height: ${ CIRCLE_SIZE }px;
overflow: hidden;
width: ${ CIRCLE_SIZE }px;
+
+ :active {
+ cursor: grabbing;
+ }
`;
export const CircleIndicatorWrapper = styled.div`
@@ -55,15 +60,17 @@ export const CircleIndicatorWrapper = styled.div`
export const CircleIndicator = styled.div`
background: ${ COLORS.ui.theme };
border-radius: 50%;
- border: ${ INNER_CIRCLE_SIZE }px solid ${ COLORS.ui.theme };
- bottom: 0;
box-sizing: border-box;
display: block;
- height: 0px;
- left: 0;
- margin: auto;
+ left: 50%;
+ top: 4px;
+ transform: translateX( -50% );
position: absolute;
- right: 0;
- top: -${ CIRCLE_SIZE / 2 }px;
- width: 0px;
+ width: ${ INNER_CIRCLE_SIZE }px;
+ height: ${ INNER_CIRCLE_SIZE }px;
+`;
+
+export const UnitText = styled( Text )`
+ color: ${ COLORS.ui.theme };
+ margin-right: ${ space( 3 ) };
`;
diff --git a/packages/components/src/custom-gradient-picker/constants.js b/packages/components/src/custom-gradient-picker/constants.ts
similarity index 96%
rename from packages/components/src/custom-gradient-picker/constants.js
rename to packages/components/src/custom-gradient-picker/constants.ts
index 9924ff2b3d6860..842aea9dcb638d 100644
--- a/packages/components/src/custom-gradient-picker/constants.js
+++ b/packages/components/src/custom-gradient-picker/constants.ts
@@ -10,8 +10,8 @@ export const DEFAULT_LINEAR_GRADIENT_ANGLE = 180;
export const HORIZONTAL_GRADIENT_ORIENTATION = {
type: 'angular',
- value: 90,
-};
+ value: '90',
+} as const;
export const GRADIENT_OPTIONS = [
{ value: 'linear-gradient', label: __( 'Linear' ) },
diff --git a/packages/components/src/custom-gradient-picker/gradient-bar/constants.js b/packages/components/src/custom-gradient-picker/gradient-bar/constants.ts
similarity index 100%
rename from packages/components/src/custom-gradient-picker/gradient-bar/constants.js
rename to packages/components/src/custom-gradient-picker/gradient-bar/constants.ts
diff --git a/packages/components/src/custom-gradient-picker/gradient-bar/control-points.js b/packages/components/src/custom-gradient-picker/gradient-bar/control-points.tsx
similarity index 56%
rename from packages/components/src/custom-gradient-picker/gradient-bar/control-points.js
rename to packages/components/src/custom-gradient-picker/gradient-bar/control-points.tsx
index 6b964d047b2a59..e761df24823b99 100644
--- a/packages/components/src/custom-gradient-picker/gradient-bar/control-points.js
+++ b/packages/components/src/custom-gradient-picker/gradient-bar/control-points.tsx
@@ -1,5 +1,3 @@
-// @ts-nocheck
-
/**
* External dependencies
*/
@@ -36,8 +34,21 @@ import {
MINIMUM_SIGNIFICANT_MOVE,
KEYBOARD_CONTROL_POINT_VARIATION,
} from './constants';
+import type { WordPressComponentProps } from '../../ui/context';
+import type {
+ ControlPointButtonProps,
+ ControlPointMoveState,
+ ControlPointsProps,
+ InsertPointProps,
+} from '../types';
+import type { CustomColorPickerDropdownProps } from '../../color-palette/types';
-function ControlPointButton( { isOpen, position, color, ...additionalProps } ) {
+function ControlPointButton( {
+ isOpen,
+ position,
+ color,
+ ...additionalProps
+}: WordPressComponentProps< ControlPointButtonProps, 'button', true > ) {
const instanceId = useInstanceId( ControlPointButton );
const descriptionId = `components-custom-gradient-picker__control-point-button-description-${ instanceId }`;
return (
@@ -75,13 +86,14 @@ function GradientColorPickerDropdown( {
isRenderedInSidebar,
className,
...props
-} ) {
+}: CustomColorPickerDropdownProps ) {
// Open the popover below the gradient control/insertion point
const popoverProps = useMemo(
- () => ( {
- placement: 'bottom',
- offset: 8,
- } ),
+ () =>
+ ( {
+ placement: 'bottom',
+ offset: 8,
+ } as const ),
[]
);
@@ -110,16 +122,25 @@ function ControlPoints( {
onStartControlPointChange,
onStopControlPointChange,
__experimentalIsRenderedInSidebar,
-} ) {
- const controlPointMoveState = useRef();
+}: ControlPointsProps ) {
+ const controlPointMoveState = useRef< ControlPointMoveState >();
+
+ const onMouseMove = ( event: MouseEvent ) => {
+ if (
+ controlPointMoveState.current === undefined ||
+ gradientPickerDomRef.current === null
+ ) {
+ return;
+ }
- const onMouseMove = ( event ) => {
const relativePosition = getHorizontalRelativeGradientPosition(
event.clientX,
gradientPickerDomRef.current
);
+
const { initialPosition, index, significantMoveHappened } =
controlPointMoveState.current;
+
if (
! significantMoveHappened &&
Math.abs( initialPosition - relativePosition ) >=
@@ -150,142 +171,158 @@ function ControlPoints( {
// Adding `cleanEventListeners` to the dependency array below requires the function itself to be wrapped in a `useCallback`
// This memoization would prevent the event listeners from being properly cleaned.
// Instead, we'll pass a ref to the function in our `useEffect` so `cleanEventListeners` itself is no longer a dependency.
- const cleanEventListenersRef = useRef();
+ const cleanEventListenersRef = useRef< () => void >();
cleanEventListenersRef.current = cleanEventListeners;
useEffect( () => {
return () => {
- cleanEventListenersRef.current();
+ cleanEventListenersRef.current?.();
};
}, [] );
- return controlPoints.map( ( point, index ) => {
- const initialPosition = point?.position;
- return (
- ignoreMarkerPosition !== initialPosition && (
- (
-
+ { controlPoints.map( ( point, index ) => {
+ const initialPosition = point?.position;
+ return (
+ ignoreMarkerPosition !== initialPosition && (
+ {
- if (
- controlPointMoveState.current &&
- controlPointMoveState.current
- .significantMoveHappened
- ) {
- return;
- }
- if ( isOpen ) {
- onStopControlPointChange();
- } else {
- onStartControlPointChange();
- }
- onToggle();
- } }
- onMouseDown={ () => {
- if ( window && window.addEventListener ) {
- controlPointMoveState.current = {
- initialPosition,
- index,
- significantMoveHappened: false,
- listenersActivated: true,
- };
- onStartControlPointChange();
- window.addEventListener(
- 'mousemove',
- onMouseMove
- );
- window.addEventListener(
- 'mouseup',
- cleanEventListeners
- );
- }
- } }
- onKeyDown={ ( event ) => {
- if ( event.code === 'ArrowLeft' ) {
- // Stop propagation of the key press event to avoid focus moving
- // to another editor area.
- event.stopPropagation();
- onChange(
- updateControlPointPosition(
- controlPoints,
- index,
- clampPercent(
- point.position -
- KEYBOARD_CONTROL_POINT_VARIATION
- )
- )
- );
- } else if ( event.code === 'ArrowRight' ) {
- // Stop propagation of the key press event to avoid focus moving
- // to another editor area.
- event.stopPropagation();
- onChange(
- updateControlPointPosition(
- controlPoints,
- index,
- clampPercent(
- point.position +
- KEYBOARD_CONTROL_POINT_VARIATION
- )
- )
- );
- }
- } }
- isOpen={ isOpen }
- position={ point.position }
- color={ point.color }
- />
- ) }
- renderContent={ ( { onClose } ) => (
- <>
- {
- onChange(
- updateControlPointColor(
- controlPoints,
- index,
- colord( color ).toRgbString()
- )
- );
- } }
- />
- { ! disableRemove && controlPoints.length > 2 && (
-
-
-
+ />
+ { ! disableRemove &&
+ controlPoints.length > 2 && (
+
+
+
+ ) }
+
) }
-
- ) }
- style={ {
- left: `${ point.position }%`,
- transform: 'translateX( -50% )',
- } }
- />
- )
- );
- } );
+ style={ {
+ left: `${ point.position }%`,
+ transform: 'translateX( -50% )',
+ } }
+ />
+ )
+ );
+ } ) }
+
+ );
}
function InsertPoint( {
@@ -296,7 +333,7 @@ function InsertPoint( {
insertPosition,
disableAlpha,
__experimentalIsRenderedInSidebar,
-} ) {
+}: InsertPointProps ) {
const [ alreadyInsertedPoint, setAlreadyInsertedPoint ] = useState( false );
return (
{
switch ( action.type ) {
case 'MOVE_INSERTER':
if ( state.id === 'IDLE' || state.id === 'MOVING_INSERTER' ) {
@@ -65,8 +73,10 @@ function customGradientBarReducer( state, action ) {
break;
}
return state;
-}
-const customGradientBarReducerInitialState = { id: 'IDLE' };
+};
+const customGradientBarReducerInitialState: CustomGradientBarIdleState = {
+ id: 'IDLE',
+};
export default function CustomGradientBar( {
background,
@@ -75,15 +85,21 @@ export default function CustomGradientBar( {
onChange,
disableInserter = false,
disableAlpha = false,
- __experimentalIsRenderedInSidebar,
-} ) {
- const gradientMarkersContainerDomRef = useRef();
+ __experimentalIsRenderedInSidebar = false,
+}: CustomGradientBarProps ) {
+ const gradientMarkersContainerDomRef = useRef< HTMLDivElement >( null );
const [ gradientBarState, gradientBarStateDispatch ] = useReducer(
customGradientBarReducer,
customGradientBarReducerInitialState
);
- const onMouseEnterAndMove = ( event ) => {
+ const onMouseEnterAndMove: MouseEventHandler< HTMLDivElement > = (
+ event
+ ) => {
+ if ( ! gradientMarkersContainerDomRef.current ) {
+ return;
+ }
+
const insertPosition = getHorizontalRelativeGradientPosition(
event.clientX,
gradientMarkersContainerDomRef.current
@@ -123,9 +139,15 @@ export default function CustomGradientBar( {
) }
onMouseEnter={ onMouseEnterAndMove }
onMouseMove={ onMouseEnterAndMove }
- style={ { background } }
onMouseLeave={ onMouseLeave }
>
+
{
it( 'should return relative percentage position', () => {
- const containerElement = {
- getBoundingClientRect: () => ( {
- x: 0,
- width: 1000,
- } ),
- };
+ jest.spyOn(
+ window.HTMLElement.prototype,
+ 'getBoundingClientRect'
+ ).mockImplementationOnce(
+ () =>
+ ( {
+ x: 0,
+ width: 1000,
+ } as DOMRect )
+ );
+ const containerElement = document.createElement( 'div' );
expect(
getHorizontalRelativeGradientPosition( 500, containerElement )
).toBe( 50 );
} );
it( 'should subtract the x position of the container from the mouse position', () => {
- const containerElement = {
- getBoundingClientRect: () => ( {
- x: 50,
- width: 1000,
- } ),
- };
+ jest.spyOn(
+ window.HTMLElement.prototype,
+ 'getBoundingClientRect'
+ ).mockImplementationOnce(
+ () =>
+ ( {
+ x: 50,
+ width: 1000,
+ } as DOMRect )
+ );
+ const containerElement = document.createElement( 'div' );
expect(
getHorizontalRelativeGradientPosition( 550, containerElement )
).toBe( 50 );
} );
it( 'should clamp to a whole percentage number', () => {
- const containerElement = {
- getBoundingClientRect: () => ( {
- x: 0,
- width: 1000,
- } ),
- };
+ jest.spyOn(
+ window.HTMLElement.prototype,
+ 'getBoundingClientRect'
+ ).mockImplementationOnce(
+ () =>
+ ( {
+ x: 0,
+ width: 1000,
+ } as DOMRect )
+ );
+
+ const containerElement = document.createElement( 'div' );
expect(
getHorizontalRelativeGradientPosition( 333, containerElement )
@@ -44,12 +60,17 @@ describe( 'getHorizontalRelativeGradientPosition', () => {
} );
it( 'should clamp to zero when mouse position is less the x position', () => {
- const containerElement = {
- getBoundingClientRect: () => ( {
- x: 50,
- width: 1000,
- } ),
- };
+ jest.spyOn(
+ window.HTMLElement.prototype,
+ 'getBoundingClientRect'
+ ).mockImplementationOnce(
+ () =>
+ ( {
+ x: 50,
+ width: 1000,
+ } as DOMRect )
+ );
+ const containerElement = document.createElement( 'div' );
expect(
getHorizontalRelativeGradientPosition( 2, containerElement )
@@ -57,12 +78,18 @@ describe( 'getHorizontalRelativeGradientPosition', () => {
} );
it( 'should clamp to 100 when mouse position is greater than width', () => {
- const containerElement = {
- getBoundingClientRect: () => ( {
- x: 0,
- width: 1000,
- } ),
- };
+ jest.spyOn(
+ window.HTMLElement.prototype,
+ 'getBoundingClientRect'
+ ).mockImplementationOnce(
+ () =>
+ ( {
+ x: 50,
+ width: 1000,
+ } as DOMRect )
+ );
+
+ const containerElement = document.createElement( 'div' );
expect(
getHorizontalRelativeGradientPosition( 1500, containerElement )
@@ -70,7 +97,7 @@ describe( 'getHorizontalRelativeGradientPosition', () => {
} );
it( 'should return undefined if no containerElement is provided', () => {
- const containerElement = undefined;
+ const containerElement = null;
expect(
getHorizontalRelativeGradientPosition( 1500, containerElement )
diff --git a/packages/components/src/custom-gradient-picker/gradient-bar/utils.js b/packages/components/src/custom-gradient-picker/gradient-bar/utils.js
deleted file mode 100644
index 24b552e0c149fd..00000000000000
--- a/packages/components/src/custom-gradient-picker/gradient-bar/utils.js
+++ /dev/null
@@ -1,189 +0,0 @@
-// @ts-nocheck
-
-/**
- * Internal dependencies
- */
-import { MINIMUM_DISTANCE_BETWEEN_POINTS } from './constants';
-
-/**
- * Control point for the gradient bar.
- *
- * @typedef {Object} ControlPoint
- * @property {string} color Color of the control point.
- * @property {number} position Integer position of the control point as a percentage.
- */
-
-/**
- * Color as parsed from the gradient by gradient-parser.
- *
- * @typedef {Object} Color
- * @property {string} r Red component.
- * @property {string} g Green component.
- * @property {string} b Green component.
- * @property {string} [a] Optional alpha component.
- */
-
-/**
- * Clamps a number between 0 and 100.
- *
- * @param {number} value Value to clamp.
- *
- * @return {number} Value clamped between 0 and 100.
- */
-export function clampPercent( value ) {
- return Math.max( 0, Math.min( 100, value ) );
-}
-
-/**
- * Check if a control point is overlapping with another.
- *
- * @param {ControlPoint[]} value Array of control points.
- * @param {number} initialIndex Index of the position to test.
- * @param {number} newPosition New position of the control point.
- * @param {number} minDistance Distance considered to be overlapping.
- *
- * @return {boolean} True if the point is overlapping.
- */
-export function isOverlapping(
- value,
- initialIndex,
- newPosition,
- minDistance = MINIMUM_DISTANCE_BETWEEN_POINTS
-) {
- const initialPosition = value[ initialIndex ].position;
- const minPosition = Math.min( initialPosition, newPosition );
- const maxPosition = Math.max( initialPosition, newPosition );
-
- return value.some( ( { position }, index ) => {
- return (
- index !== initialIndex &&
- ( Math.abs( position - newPosition ) < minDistance ||
- ( minPosition < position && position < maxPosition ) )
- );
- } );
-}
-
-/**
- * Adds a control point from an array and returns the new array.
- *
- * @param {ControlPoint[]} points Array of control points.
- * @param {number} position Position to insert the new point.
- * @param {Color} color Color to update the control point at index.
- *
- * @return {ControlPoint[]} New array of control points.
- */
-export function addControlPoint( points, position, color ) {
- const nextIndex = points.findIndex(
- ( point ) => point.position > position
- );
- const newPoint = { color, position };
- const newPoints = points.slice();
- newPoints.splice( nextIndex - 1, 0, newPoint );
- return newPoints;
-}
-
-/**
- * Removes a control point from an array and returns the new array.
- *
- * @param {ControlPoint[]} points Array of control points.
- * @param {number} index Index to remove.
- *
- * @return {ControlPoint[]} New array of control points.
- */
-export function removeControlPoint( points, index ) {
- return points.filter( ( point, pointIndex ) => {
- return pointIndex !== index;
- } );
-}
-
-/**
- * Updates a control point from an array and returns the new array.
- *
- * @param {ControlPoint[]} points Array of control points.
- * @param {number} index Index to update.
- * @param {ControlPoint[]} newPoint New control point to replace the index.
- *
- * @return {ControlPoint[]} New array of control points.
- */
-export function updateControlPoint( points, index, newPoint ) {
- const newValue = points.slice();
- newValue[ index ] = newPoint;
- return newValue;
-}
-
-/**
- * Updates the position of a control point from an array and returns the new array.
- *
- * @param {ControlPoint[]} points Array of control points.
- * @param {number} index Index to update.
- * @param {number} newPosition Position to move the control point at index.
- *
- * @return {ControlPoint[]} New array of control points.
- */
-export function updateControlPointPosition( points, index, newPosition ) {
- if ( isOverlapping( points, index, newPosition ) ) {
- return points;
- }
- const newPoint = {
- ...points[ index ],
- position: newPosition,
- };
- return updateControlPoint( points, index, newPoint );
-}
-
-/**
- * Updates the position of a control point from an array and returns the new array.
- *
- * @param {ControlPoint[]} points Array of control points.
- * @param {number} index Index to update.
- * @param {Color} newColor Color to update the control point at index.
- *
- * @return {ControlPoint[]} New array of control points.
- */
-export function updateControlPointColor( points, index, newColor ) {
- const newPoint = {
- ...points[ index ],
- color: newColor,
- };
- return updateControlPoint( points, index, newPoint );
-}
-
-/**
- * Updates the position of a control point from an array and returns the new array.
- *
- * @param {ControlPoint[]} points Array of control points.
- * @param {number} position Position of the color stop.
- * @param {string} newColor Color to update the control point at index.
- *
- * @return {ControlPoint[]} New array of control points.
- */
-export function updateControlPointColorByPosition(
- points,
- position,
- newColor
-) {
- const index = points.findIndex( ( point ) => point.position === position );
- return updateControlPointColor( points, index, newColor );
-}
-
-/**
- * Gets the horizontal coordinate when dragging a control point with the mouse.
- *
- * @param {number} mouseXCoordinate Horizontal coordinate of the mouse position.
- * @param {Element} containerElement Container for the gradient picker.
- *
- * @return {number | undefined} Whole number percentage from the left.
- */
-export function getHorizontalRelativeGradientPosition(
- mouseXCoordinate,
- containerElement
-) {
- if ( ! containerElement ) {
- return;
- }
- const { x, width } = containerElement.getBoundingClientRect();
- const absolutePositionValue = mouseXCoordinate - x;
- return Math.round(
- clampPercent( ( absolutePositionValue * 100 ) / width )
- );
-}
diff --git a/packages/components/src/custom-gradient-picker/gradient-bar/utils.ts b/packages/components/src/custom-gradient-picker/gradient-bar/utils.ts
new file mode 100644
index 00000000000000..88daf2b2c19d6c
--- /dev/null
+++ b/packages/components/src/custom-gradient-picker/gradient-bar/utils.ts
@@ -0,0 +1,193 @@
+/**
+ * Internal dependencies
+ */
+import { MINIMUM_DISTANCE_BETWEEN_POINTS } from './constants';
+import type { ControlPoint } from '../types';
+
+/**
+ * Clamps a number between 0 and 100.
+ *
+ * @param value Value to clamp.
+ *
+ * @return Value clamped between 0 and 100.
+ */
+export function clampPercent( value: number ) {
+ return Math.max( 0, Math.min( 100, value ) );
+}
+
+/**
+ * Check if a control point is overlapping with another.
+ *
+ * @param value Array of control points.
+ * @param initialIndex Index of the position to test.
+ * @param newPosition New position of the control point.
+ * @param minDistance Distance considered to be overlapping.
+ *
+ * @return True if the point is overlapping.
+ */
+export function isOverlapping(
+ value: ControlPoint[],
+ initialIndex: number,
+ newPosition: number,
+ minDistance: number = MINIMUM_DISTANCE_BETWEEN_POINTS
+) {
+ const initialPosition = value[ initialIndex ].position;
+ const minPosition = Math.min( initialPosition, newPosition );
+ const maxPosition = Math.max( initialPosition, newPosition );
+
+ return value.some( ( { position }, index ) => {
+ return (
+ index !== initialIndex &&
+ ( Math.abs( position - newPosition ) < minDistance ||
+ ( minPosition < position && position < maxPosition ) )
+ );
+ } );
+}
+
+/**
+ * Adds a control point from an array and returns the new array.
+ *
+ * @param points Array of control points.
+ * @param position Position to insert the new point.
+ * @param color Color to update the control point at index.
+ *
+ * @return New array of control points.
+ */
+export function addControlPoint(
+ points: ControlPoint[],
+ position: number,
+ color: ControlPoint[ 'color' ]
+) {
+ const nextIndex = points.findIndex(
+ ( point ) => point.position > position
+ );
+ const newPoint = { color, position };
+ const newPoints = points.slice();
+ newPoints.splice( nextIndex - 1, 0, newPoint );
+ return newPoints;
+}
+
+/**
+ * Removes a control point from an array and returns the new array.
+ *
+ * @param points Array of control points.
+ * @param index Index to remove.
+ *
+ * @return New array of control points.
+ */
+export function removeControlPoint( points: ControlPoint[], index: number ) {
+ return points.filter( ( _point, pointIndex ) => {
+ return pointIndex !== index;
+ } );
+}
+/**
+ * Updates a control point from an array and returns the new array.
+ *
+ * @param points Array of control points.
+ * @param index Index to update.
+ * @param newPoint New control point to replace the index.
+ *
+ * @return New array of control points.
+ */
+export function updateControlPoint(
+ points: ControlPoint[],
+ index: number,
+ newPoint: ControlPoint
+) {
+ const newValue = points.slice();
+ newValue[ index ] = newPoint;
+ return newValue;
+}
+
+/**
+ * Updates the position of a control point from an array and returns the new array.
+ *
+ * @param points Array of control points.
+ * @param index Index to update.
+ * @param newPosition Position to move the control point at index.
+ *
+ * @return New array of control points.
+ */
+export function updateControlPointPosition(
+ points: ControlPoint[],
+ index: number,
+ newPosition: ControlPoint[ 'position' ]
+) {
+ if ( isOverlapping( points, index, newPosition ) ) {
+ return points;
+ }
+ const newPoint = {
+ ...points[ index ],
+ position: newPosition,
+ };
+ return updateControlPoint( points, index, newPoint );
+}
+
+/**
+ * Updates the position of a control point from an array and returns the new array.
+ *
+ * @param points Array of control points.
+ * @param index Index to update.
+ * @param newColor Color to update the control point at index.
+ *
+ * @return New array of control points.
+ */
+export function updateControlPointColor(
+ points: ControlPoint[],
+ index: number,
+ newColor: ControlPoint[ 'color' ]
+) {
+ const newPoint = {
+ ...points[ index ],
+ color: newColor,
+ };
+ return updateControlPoint( points, index, newPoint );
+}
+
+/**
+ * Updates the position of a control point from an array and returns the new array.
+ *
+ * @param points Array of control points.
+ * @param position Position of the color stop.
+ * @param newColor Color to update the control point at index.
+ *
+ * @return New array of control points.
+ */
+export function updateControlPointColorByPosition(
+ points: ControlPoint[],
+ position: ControlPoint[ 'position' ],
+ newColor: ControlPoint[ 'color' ]
+) {
+ const index = points.findIndex( ( point ) => point.position === position );
+ return updateControlPointColor( points, index, newColor );
+}
+
+/**
+ * Gets the horizontal coordinate when dragging a control point with the mouse.
+ *
+ * @param mouseXcoordinate Horizontal coordinate of the mouse position.
+ * @param containerElement Container for the gradient picker.
+ *
+ * @return Whole number percentage from the left.
+ */
+export function getHorizontalRelativeGradientPosition(
+ mouseXcoordinate: number,
+ containerElement: HTMLDivElement
+): number;
+export function getHorizontalRelativeGradientPosition(
+ mouseXcoordinate: number,
+ containerElement: null
+): undefined;
+export function getHorizontalRelativeGradientPosition(
+ mouseXCoordinate: number,
+ containerElement: HTMLDivElement | null
+) {
+ if ( ! containerElement ) {
+ return;
+ }
+ const { x, width } = containerElement.getBoundingClientRect();
+ const absolutePositionValue = mouseXCoordinate - x;
+ return Math.round(
+ clampPercent( ( absolutePositionValue * 100 ) / width )
+ );
+}
diff --git a/packages/components/src/custom-gradient-picker/index.js b/packages/components/src/custom-gradient-picker/index.tsx
similarity index 69%
rename from packages/components/src/custom-gradient-picker/index.js
rename to packages/components/src/custom-gradient-picker/index.tsx
index db47f25c88d948..19cfd8f740df7d 100644
--- a/packages/components/src/custom-gradient-picker/index.js
+++ b/packages/components/src/custom-gradient-picker/index.tsx
@@ -1,9 +1,8 @@
-// @ts-nocheck
-
/**
* External dependencies
*/
import classnames from 'classnames';
+import type gradientParser from 'gradient-parser';
/**
* WordPress dependencies
@@ -30,23 +29,31 @@ import {
DEFAULT_LINEAR_GRADIENT_ANGLE,
HORIZONTAL_GRADIENT_ORIENTATION,
GRADIENT_OPTIONS,
- DEFAULT_GRADIENT,
} from './constants';
import {
AccessoryWrapper,
SelectWrapper,
} from './styles/custom-gradient-picker-styles';
+import type {
+ CustomGradientPickerProps,
+ GradientAnglePickerProps,
+ GradientTypePickerProps,
+} from './types';
-const GradientAnglePicker = ( { gradientAST, hasGradient, onChange } ) => {
+const GradientAnglePicker = ( {
+ gradientAST,
+ hasGradient,
+ onChange,
+}: GradientAnglePickerProps ) => {
const angle =
gradientAST?.orientation?.value ?? DEFAULT_LINEAR_GRADIENT_ANGLE;
- const onAngleChange = ( newAngle ) => {
+ const onAngleChange = ( newAngle: number ) => {
onChange(
serializeGradient( {
...gradientAST,
orientation: {
type: 'angular',
- value: newAngle,
+ value: `${ newAngle }`,
},
} )
);
@@ -60,17 +67,22 @@ const GradientAnglePicker = ( { gradientAST, hasGradient, onChange } ) => {
);
};
-const GradientTypePicker = ( { gradientAST, hasGradient, onChange } ) => {
+const GradientTypePicker = ( {
+ gradientAST,
+ hasGradient,
+ onChange,
+}: GradientTypePickerProps ) => {
const { type } = gradientAST;
+
const onSetLinearGradient = () => {
onChange(
serializeGradient( {
...gradientAST,
- ...( gradientAST.orientation
- ? {}
- : { orientation: HORIZONTAL_GRADIENT_ORIENTATION } ),
+ orientation: gradientAST.orientation
+ ? undefined
+ : HORIZONTAL_GRADIENT_ORIENTATION,
type: 'linear-gradient',
- } )
+ } as gradientParser.LinearGradientNode )
);
};
@@ -84,7 +96,7 @@ const GradientTypePicker = ( { gradientAST, hasGradient, onChange } ) => {
);
};
- const handleOnChange = ( next ) => {
+ const handleOnChange = ( next: string ) => {
if ( next === 'linear-gradient' ) {
onSetLinearGradient();
}
@@ -102,30 +114,57 @@ const GradientTypePicker = ( { gradientAST, hasGradient, onChange } ) => {
onChange={ handleOnChange }
options={ GRADIENT_OPTIONS }
size="__unstable-large"
- value={ hasGradient && type }
+ value={ hasGradient ? type : undefined }
/>
);
};
-export default function CustomGradientPicker( {
+/**
+ * CustomGradientPicker is a React component that renders a UI for specifying
+ * linear or radial gradients. Radial gradients are displayed in the picker as
+ * a slice of the gradient from the center to the outside.
+ *
+ * ```jsx
+ * import { CustomGradientPicker } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyCustomGradientPicker = () => {
+ * const [ gradient, setGradient ] = useState();
+ *
+ * return (
+ * {
+ setGradient( newGradient );
+ onChange( newGradient );
+ } }
+ />
+ );
+};
+
+export const Default = CustomGradientPickerWithState.bind( {} );
+Default.args = {
+ __nextHasNoMargin: true,
+};
diff --git a/packages/components/src/custom-gradient-picker/style.scss b/packages/components/src/custom-gradient-picker/style.scss
index c3c236f2367058..a5ee7831296d87 100644
--- a/packages/components/src/custom-gradient-picker/style.scss
+++ b/packages/components/src/custom-gradient-picker/style.scss
@@ -7,14 +7,30 @@ $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 1
}
}
-.components-custom-gradient-picker__gradient-bar:not(.has-gradient) {
- opacity: 0.4;
-}
-
.components-custom-gradient-picker__gradient-bar {
border-radius: $radius-block-ui;
width: 100%;
height: $grid-unit-60;
+ position: relative;
+ z-index: 1;
+
+ &.has-gradient {
+ // The background image creates a checkerboard pattern. Ignore rtlcss to
+ // make it work both in LTR and RTL.
+ // See https://github.com/WordPress/gutenberg/pull/42510
+ /*rtl:begin:ignore*/
+ background-image:
+ repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200),
+ repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200);
+ background-position: 0 0, 12px 12px;
+ /*rtl:end:ignore*/
+ background-size: calc(2 * 12px) calc(2 * 12px);
+ }
+
+ .components-custom-gradient-picker__gradient-bar-background {
+ position: absolute;
+ inset: 0;
+ }
.components-custom-gradient-picker__markers-container {
position: relative;
@@ -109,3 +125,8 @@ $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 1
}
}
}
+
+.components-custom-gradient-picker__ui-line {
+ position: relative;
+ z-index: 0;
+}
diff --git a/packages/components/src/custom-gradient-picker/styles/custom-gradient-picker-styles.js b/packages/components/src/custom-gradient-picker/styles/custom-gradient-picker-styles.tsx
similarity index 100%
rename from packages/components/src/custom-gradient-picker/styles/custom-gradient-picker-styles.js
rename to packages/components/src/custom-gradient-picker/styles/custom-gradient-picker-styles.tsx
diff --git a/packages/components/src/custom-gradient-picker/test/serializer.js b/packages/components/src/custom-gradient-picker/test/serializer.ts
similarity index 56%
rename from packages/components/src/custom-gradient-picker/test/serializer.js
rename to packages/components/src/custom-gradient-picker/test/serializer.ts
index 3b11e41f7c91d3..3c14194fc7279f 100644
--- a/packages/components/src/custom-gradient-picker/test/serializer.js
+++ b/packages/components/src/custom-gradient-picker/test/serializer.ts
@@ -12,24 +12,30 @@ import {
describe( 'It should serialize a gradient', () => {
test( 'serializeGradientColor', () => {
expect(
- serializeGradientColor( { type: 'rgba', value: [ 1, 2, 3, 0.5 ] } )
+ serializeGradientColor( {
+ type: 'rgba',
+ value: [ '1', '2', '3', '0.5' ],
+ } )
).toBe( 'rgba(1,2,3,0.5)' );
expect(
- serializeGradientColor( { type: 'rgb', value: [ 255, 0, 0 ] } )
+ serializeGradientColor( {
+ type: 'rgb',
+ value: [ '255', '0', '0' ],
+ } )
).toBe( 'rgb(255,0,0)' );
} );
test( 'serializeGradientPosition', () => {
- expect( serializeGradientPosition( { type: '%', value: 70 } ) ).toBe(
+ expect( serializeGradientPosition( { type: '%', value: '70' } ) ).toBe(
'70%'
);
- expect( serializeGradientPosition( { type: '%', value: 0 } ) ).toBe(
+ expect( serializeGradientPosition( { type: '%', value: '0' } ) ).toBe(
'0%'
);
- expect( serializeGradientPosition( { type: 'px', value: 4 } ) ).toBe(
+ expect( serializeGradientPosition( { type: 'px', value: '4' } ) ).toBe(
'4px'
);
} );
@@ -38,35 +44,35 @@ describe( 'It should serialize a gradient', () => {
expect(
serializeGradientColorStop( {
type: 'rgba',
- value: [ 1, 2, 3, 0.5 ],
- length: { type: '%', value: 70 },
+ value: [ '1', '2', '3', '0.5' ],
+ length: { type: '%', value: '70' },
} )
).toBe( 'rgba(1,2,3,0.5) 70%' );
expect(
serializeGradientColorStop( {
type: 'rgb',
- value: [ 255, 0, 0 ],
- length: { type: '%', value: 0 },
+ value: [ '255', '0', '0' ],
+ length: { type: '%', value: '0' },
} )
).toBe( 'rgb(255,0,0) 0%' );
expect(
serializeGradientColorStop( {
type: 'rgba',
- value: [ 1, 2, 3, 0.5 ],
- length: { type: 'px', value: 100 },
+ value: [ '1', '2', '3', '0.5' ],
+ length: { type: 'px', value: '100' },
} )
).toBe( 'rgba(1,2,3,0.5) 100px' );
} );
test( 'serializeGradientOrientation', () => {
expect(
- serializeGradientOrientation( { type: 'angular', value: 40 } )
+ serializeGradientOrientation( { type: 'angular', value: '40' } )
).toBe( '40deg' );
expect(
- serializeGradientOrientation( { type: 'angular', value: 0 } )
+ serializeGradientOrientation( { type: 'angular', value: '0' } )
).toBe( '0deg' );
} );
@@ -74,17 +80,17 @@ describe( 'It should serialize a gradient', () => {
expect(
serializeGradient( {
type: 'linear-gradient',
- orientation: { type: 'angular', value: 40 },
+ orientation: { type: 'angular', value: '40' },
colorStops: [
{
type: 'rgba',
- value: [ 1, 2, 3, 0.5 ],
- length: { type: '%', value: 70 },
+ value: [ '1', '2', '3', '0.5' ],
+ length: { type: '%', value: '70' },
},
{
type: 'rgba',
- value: [ 255, 1, 1, 0.9 ],
- length: { type: '%', value: 40 },
+ value: [ '255', '1', '1', '0.9' ],
+ length: { type: '%', value: '40' },
},
],
} )
@@ -98,13 +104,13 @@ describe( 'It should serialize a gradient', () => {
colorStops: [
{
type: 'rgba',
- value: [ 1, 2, 3, 0.5 ],
- length: { type: '%', value: 70 },
+ value: [ '1', '2', '3', '0.5' ],
+ length: { type: '%', value: '70' },
},
{
type: 'rgba',
- value: [ 255, 1, 1, 0.9 ],
- length: { type: '%', value: 40 },
+ value: [ '255', '1', '1', '0.9' ],
+ length: { type: '%', value: '40' },
},
],
} )
@@ -117,12 +123,12 @@ describe( 'It should serialize a gradient', () => {
{
type: 'hex',
value: '000',
- length: { type: '%', value: 70 },
+ length: { type: '%', value: '70' },
},
{
type: 'hex',
value: 'fff',
- length: { type: '%', value: 40 },
+ length: { type: '%', value: '40' },
},
],
} )
@@ -131,27 +137,27 @@ describe( 'It should serialize a gradient', () => {
expect(
serializeGradient( {
type: 'linear-gradient',
- orientation: { type: 'angular', value: 0 },
+ orientation: { type: 'angular', value: '0' },
colorStops: [
{
type: 'rgba',
- value: [ 1, 2, 3, 0.5 ],
- length: { type: '%', value: 0 },
+ value: [ '1', '2', '3', '0.5' ],
+ length: { type: '%', value: '0' },
},
{
type: 'rgba',
- value: [ 255, 1, 1, 0.9 ],
- length: { type: '%', value: 40 },
+ value: [ '255', '1', '1', '0.9' ],
+ length: { type: '%', value: '40' },
},
{
type: 'rgba',
- value: [ 1, 2, 3, 0.5 ],
- length: { type: '%', value: 100 },
+ value: [ '1', '2', '3', '0.5' ],
+ length: { type: '%', value: '100' },
},
{
type: 'rgba',
- value: [ 10, 20, 30, 0.5 ],
- length: { type: '%', value: 20 },
+ value: [ '10', '20', '30', '0.5' ],
+ length: { type: '%', value: '20' },
},
],
} )
diff --git a/packages/components/src/custom-gradient-picker/types.ts b/packages/components/src/custom-gradient-picker/types.ts
new file mode 100644
index 00000000000000..93407fd77ddcf8
--- /dev/null
+++ b/packages/components/src/custom-gradient-picker/types.ts
@@ -0,0 +1,137 @@
+/**
+ * External dependencies
+ */
+import type gradientParser from 'gradient-parser';
+
+export type CustomGradientPickerProps = {
+ /**
+ * Start opting in to the new margin-free styles that will become the default
+ * in a future version, currently scheduled to be WordPress 6.4. (The prop
+ * can be safely removed once this happens.)
+ *
+ * @default false
+ */
+ __nextHasNoMargin?: boolean;
+ /**
+ * The current value of the gradient. Pass a css gradient string (See default value for example).
+ * Optionally pass in a `null` value to specify no gradient is currently selected.
+ *
+ * @default 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)'
+ */
+ value?: string | null;
+ /**
+ * The function called when a new gradient has been defined. It is passed to
+ * the `currentGradient` as an argument.
+ */
+ onChange: ( currentGradient: string ) => void;
+ /**
+ * Whether this is rendered in the sidebar.
+ *
+ * @default false
+ */
+ __experimentalIsRenderedInSidebar?: boolean;
+};
+
+export type GradientAnglePickerProps = {
+ gradientAST:
+ | gradientParser.LinearGradientNode
+ | gradientParser.RepeatingLinearGradientNode;
+ hasGradient: boolean;
+ onChange: ( gradient: string ) => void;
+};
+
+export type GradientTypePickerProps = {
+ gradientAST: gradientParser.GradientNode;
+ hasGradient: boolean;
+ onChange: ( gradient: string ) => void;
+};
+
+export type ControlPoint = { color: string; position: number };
+
+// When dealing with unions of objects, using `Pick` will result
+// in a new type where each desired prop is a union of the values for that prop
+// across all of the original union members. This does not maintain the specific
+// combinations of props present in the original union.
+// To avoid this, the `DistributivePick` type will
+// "distribute" the `Pick` across the union. This allows the `Pick`
+// to act on each member individually, maintaining the relationships between the
+// resulting props.
+// https://stackoverflow.com/questions/57103834/typescript-omit-a-property-from-all-interfaces-in-a-union-but-keep-the-union-s
+type DistributivePick< T, K extends keyof T > = T extends any
+ ? Pick< T, K >
+ : never;
+
+export type ColorStopTypeAndValue = DistributivePick<
+ gradientParser.ColorStop,
+ 'type' | 'value'
+>;
+
+export type CustomGradientBarProps = {
+ background: React.CSSProperties[ 'background' ];
+ hasGradient: boolean;
+ value: ControlPoint[];
+ onChange: ( newControlPoints: ControlPoint[] ) => void;
+ disableInserter?: boolean;
+ disableAlpha?: boolean;
+ __experimentalIsRenderedInSidebar?: boolean;
+};
+
+export type CustomGradientBarIdleState = { id: 'IDLE' };
+type CustomGradientBarMovingInserterState = {
+ id: 'MOVING_INSERTER';
+ insertPosition: number;
+};
+type CustomGradientBarInsertingControlPointState = {
+ id: 'INSERTING_CONTROL_POINT';
+ insertPosition: number;
+};
+type CustomGradientBarMovingControlPointState = { id: 'MOVING_CONTROL_POINT' };
+
+export type CustomGradientBarReducerState =
+ | CustomGradientBarIdleState
+ | CustomGradientBarMovingInserterState
+ | CustomGradientBarInsertingControlPointState
+ | CustomGradientBarMovingControlPointState;
+
+export type CustomGradientBarReducerAction =
+ | { type: 'MOVE_INSERTER'; insertPosition: number }
+ | { type: 'STOP_INSERTER_MOVE' }
+ | { type: 'OPEN_INSERTER' }
+ | { type: 'CLOSE_INSERTER' }
+ | { type: 'START_CONTROL_CHANGE' }
+ | { type: 'STOP_CONTROL_CHANGE' };
+
+export type ControlPointButtonProps = {
+ isOpen: boolean;
+ position: ControlPoint[ 'position' ];
+ color: string;
+};
+
+export type ControlPointsProps = {
+ disableRemove: boolean;
+ disableAlpha: boolean;
+ gradientPickerDomRef: React.RefObject< HTMLDivElement >;
+ ignoreMarkerPosition?: number;
+ value: ControlPoint[];
+ onChange: ( controlPoints: ControlPoint[] ) => void;
+ onStartControlPointChange: () => void;
+ onStopControlPointChange: () => void;
+ __experimentalIsRenderedInSidebar: boolean;
+};
+
+export type ControlPointMoveState = {
+ initialPosition: number;
+ index: number;
+ significantMoveHappened: boolean;
+ listenersActivated: boolean;
+};
+
+export type InsertPointProps = {
+ value: ControlPoint[];
+ onChange: ( controlPoints: ControlPoint[] ) => void;
+ onOpenInserter: () => void;
+ onCloseInserter: () => void;
+ insertPosition: number;
+ disableAlpha: boolean;
+ __experimentalIsRenderedInSidebar: boolean;
+};
diff --git a/packages/components/src/custom-gradient-picker/utils.js b/packages/components/src/custom-gradient-picker/utils.ts
similarity index 60%
rename from packages/components/src/custom-gradient-picker/utils.js
rename to packages/components/src/custom-gradient-picker/utils.ts
index 69d8223fbdb877..e52c5220a6e759 100644
--- a/packages/components/src/custom-gradient-picker/utils.js
+++ b/packages/components/src/custom-gradient-picker/utils.ts
@@ -1,5 +1,3 @@
-// @ts-nocheck
-
/**
* External dependencies
*/
@@ -16,10 +14,13 @@ import {
DIRECTIONAL_ORIENTATION_ANGLE_MAP,
} from './constants';
import { serializeGradient } from './serializer';
+import type { ControlPoint } from './types';
extend( [ namesPlugin ] );
-export function getLinearGradientRepresentation( gradientAST ) {
+export function getLinearGradientRepresentation(
+ gradientAST: gradientParser.GradientNode
+) {
return serializeGradient( {
type: 'linear-gradient',
orientation: HORIZONTAL_GRADIENT_ORIENTATION,
@@ -27,29 +28,41 @@ export function getLinearGradientRepresentation( gradientAST ) {
} );
}
-function hasUnsupportedLength( item ) {
+function hasUnsupportedLength( item: gradientParser.ColorStop ) {
return item.length === undefined || item.length.type !== '%';
}
-export function getGradientAstWithDefault( value ) {
+export function getGradientAstWithDefault( value?: string | null ) {
// gradientAST will contain the gradient AST as parsed by gradient-parser npm module.
// More information of its structure available at https://www.npmjs.com/package/gradient-parser#ast.
- let gradientAST;
+ let gradientAST: gradientParser.GradientNode | undefined;
+ let hasGradient = !! value;
+
+ const valueToParse = value ?? DEFAULT_GRADIENT;
try {
- gradientAST = gradientParser.parse( value )[ 0 ];
- gradientAST.value = value;
+ gradientAST = gradientParser.parse( valueToParse )[ 0 ];
} catch ( error ) {
+ // eslint-disable-next-line no-console
+ console.warn(
+ 'wp.components.CustomGradientPicker failed to parse the gradient with error',
+ error
+ );
+
gradientAST = gradientParser.parse( DEFAULT_GRADIENT )[ 0 ];
- gradientAST.value = DEFAULT_GRADIENT;
+ hasGradient = false;
}
- if ( gradientAST.orientation?.type === 'directional' ) {
- gradientAST.orientation.type = 'angular';
- gradientAST.orientation.value =
- DIRECTIONAL_ORIENTATION_ANGLE_MAP[
+ if (
+ ! Array.isArray( gradientAST.orientation ) &&
+ gradientAST.orientation?.type === 'directional'
+ ) {
+ gradientAST.orientation = {
+ type: 'angular',
+ value: DIRECTIONAL_ORIENTATION_ANGLE_MAP[
gradientAST.orientation.value
- ].toString();
+ ].toString(),
+ };
}
if ( gradientAST.colorStops.some( hasUnsupportedLength ) ) {
@@ -57,19 +70,18 @@ export function getGradientAstWithDefault( value ) {
const step = 100 / ( colorStops.length - 1 );
colorStops.forEach( ( stop, index ) => {
stop.length = {
- value: step * index,
+ value: `${ step * index }`,
type: '%',
};
} );
- gradientAST.value = serializeGradient( gradientAST );
}
- return gradientAST;
+ return { gradientAST, hasGradient };
}
export function getGradientAstWithControlPoints(
- gradientAST,
- newControlPoints
+ gradientAST: gradientParser.GradientNode,
+ newControlPoints: ControlPoint[]
) {
return {
...gradientAST,
@@ -81,13 +93,16 @@ export function getGradientAstWithControlPoints(
value: position?.toString(),
},
type: a < 1 ? 'rgba' : 'rgb',
- value: a < 1 ? [ r, g, b, a ] : [ r, g, b ],
+ value:
+ a < 1
+ ? [ `${ r }`, `${ g }`, `${ b }`, `${ a }` ]
+ : [ `${ r }`, `${ g }`, `${ b }` ],
};
} ),
- };
+ } as gradientParser.GradientNode;
}
-export function getStopCssColor( colorStop ) {
+export function getStopCssColor( colorStop: gradientParser.ColorStop ) {
switch ( colorStop.type ) {
case 'hex':
return `#${ colorStop.value }`;
diff --git a/packages/components/src/color-list-picker/index.tsx b/packages/components/src/duotone-picker/color-list-picker/index.tsx
similarity index 86%
rename from packages/components/src/color-list-picker/index.tsx
rename to packages/components/src/duotone-picker/color-list-picker/index.tsx
index 48f56ca9abac6d..95ed02c639e632 100644
--- a/packages/components/src/color-list-picker/index.tsx
+++ b/packages/components/src/duotone-picker/color-list-picker/index.tsx
@@ -7,11 +7,11 @@ import { swatch } from '@wordpress/icons';
/**
* Internal dependencies
*/
-import Button from '../button';
-import ColorPalette from '../color-palette';
-import ColorIndicator from '../color-indicator';
-import Icon from '../icon';
-import { HStack } from '../h-stack';
+import Button from '../../button';
+import ColorPalette from '../../color-palette';
+import ColorIndicator from '../../color-indicator';
+import Icon from '../../icon';
+import { HStack } from '../../h-stack';
import type { ColorListPickerProps, ColorOptionProps } from './types';
function ColorOption( {
@@ -75,7 +75,8 @@ function ColorListPicker( {
disableCustomColors={ disableCustomColors }
enableAlpha={ enableAlpha }
onChange={ ( newColor ) => {
- const newColors = value.slice();
+ const newColors: ( string | undefined )[] =
+ value.slice();
newColors[ index ] = newColor;
onChange( newColors );
} }
diff --git a/packages/components/src/color-list-picker/style.scss b/packages/components/src/duotone-picker/color-list-picker/style.scss
similarity index 100%
rename from packages/components/src/color-list-picker/style.scss
rename to packages/components/src/duotone-picker/color-list-picker/style.scss
diff --git a/packages/components/src/color-list-picker/types.ts b/packages/components/src/duotone-picker/color-list-picker/types.ts
similarity index 91%
rename from packages/components/src/color-list-picker/types.ts
rename to packages/components/src/duotone-picker/color-list-picker/types.ts
index becfc405b2b955..5c42e6c9371b62 100644
--- a/packages/components/src/color-list-picker/types.ts
+++ b/packages/components/src/duotone-picker/color-list-picker/types.ts
@@ -5,7 +5,7 @@ import type { CSSProperties } from 'react';
export type ColorListPickerProps = {
/**
- * A list of predifened colors. Each color is an object with a `name` and a
+ * A list of predefined colors. Each color is an object with a `name` and a
* `color` value.
* The `name` is a string used to identify the color in the UI.
* The `color` is a valid CSS color string.
@@ -21,7 +21,7 @@ export type ColorListPickerProps = {
/**
* An array containing the currently selected colors.
*/
- value?: Array< string | undefined >;
+ value?: Array< string >;
/**
* Controls whether the custom color picker is displayed.
*/
diff --git a/packages/components/src/duotone-picker/custom-duotone-bar.js b/packages/components/src/duotone-picker/custom-duotone-bar.tsx
similarity index 84%
rename from packages/components/src/duotone-picker/custom-duotone-bar.js
rename to packages/components/src/duotone-picker/custom-duotone-bar.tsx
index 8aef83f8a4bfab..f72db529ebd481 100644
--- a/packages/components/src/duotone-picker/custom-duotone-bar.js
+++ b/packages/components/src/duotone-picker/custom-duotone-bar.tsx
@@ -11,7 +11,13 @@ import {
const PLACEHOLDER_VALUES = [ '#333', '#CCC' ];
-export default function CustomDuotoneBar( { value, onChange } ) {
+export default function CustomDuotoneBar( {
+ value,
+ onChange,
+}: {
+ value?: string[];
+ onChange: ( value?: string[] ) => void;
+} ) {
const hasGradient = !! value;
const values = hasGradient ? value : PLACEHOLDER_VALUES;
const background = getGradientFromCSSColors( values );
diff --git a/packages/components/src/duotone-picker/duotone-picker.js b/packages/components/src/duotone-picker/duotone-picker.tsx
similarity index 70%
rename from packages/components/src/duotone-picker/duotone-picker.js
rename to packages/components/src/duotone-picker/duotone-picker.tsx
index 4f9e5ea7b23ce6..2daacb15c9159c 100644
--- a/packages/components/src/duotone-picker/duotone-picker.js
+++ b/packages/components/src/duotone-picker/duotone-picker.tsx
@@ -12,14 +12,48 @@ import { __, sprintf } from '@wordpress/i18n';
/**
* Internal dependencies
*/
-import ColorListPicker from '../color-list-picker';
+import ColorListPicker from './color-list-picker';
import CircularOptionPicker from '../circular-option-picker';
import { VStack } from '../v-stack';
import CustomDuotoneBar from './custom-duotone-bar';
import { getDefaultColors, getGradientFromCSSColors } from './utils';
import { Spacer } from '../spacer';
+import type { DuotonePickerProps } from './types';
+/**
+ * ```jsx
+ * import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const DUOTONE_PALETTE = [
+ * { colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' },
+ * { colors: [ '#000097', '#ff4747' ], name: 'Blue and red', slug: 'blue-red' },
+ * ];
+ *
+ * const COLOR_PALETTE = [
+ * { color: '#ff4747', name: 'Red', slug: 'red' },
+ * { color: '#fcff41', name: 'Yellow', slug: 'yellow' },
+ * { color: '#000097', name: 'Blue', slug: 'blue' },
+ * { color: '#8c00b7', name: 'Purple', slug: 'purple' },
+ * ];
+ *
+ * const Example = () => {
+ * const [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] );
+ * return (
+ * <>
+ * = {
title: 'Components/DuotonePicker',
component: DuotonePicker,
argTypes: {
- clearable: { control: { type: 'boolean' } },
- disableCustomColors: { control: { type: 'boolean' } },
- disableCustomDuotone: { control: { type: 'boolean' } },
onChange: { action: 'onChange' },
- unsetable: { control: { type: 'boolean' } },
+ value: { control: { type: null } },
},
parameters: {
controls: { expanded: true },
docs: { source: { state: 'open' } },
},
};
+export default meta;
const DUOTONE_PALETTE = [
{
@@ -44,8 +48,11 @@ const COLOR_PALETTE = [
{ color: '#8c00b7', name: 'Purple', slug: 'purple' },
];
-const Template = ( { onChange, ...args } ) => {
- const [ value, setValue ] = useState();
+const Template: ComponentStory< typeof DuotonePicker > = ( {
+ onChange,
+ ...args
+} ) => {
+ const [ value, setValue ] = useState< DuotonePickerProps[ 'value' ] >();
return (
= {
title: 'Components/DuotoneSwatch',
component: DuotoneSwatch,
parameters: {
@@ -11,8 +16,9 @@ export default {
docs: { source: { state: 'open' } },
},
};
+export default meta;
-const Template = ( args ) => {
+const Template: ComponentStory< typeof DuotoneSwatch > = ( args ) => {
return
-
-
-
- );
+ it( 'should not render the tooltip if multiple children are passed', async () => {
+ const user = userEvent.setup();
- const button = screen.getByText( 'Button 1' );
- act( () => button.focus() );
- expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
- } );
+ render(
+
+
+
+
+ );
- it( 'should render children', () => {
- render(
-
-
-
- );
+ await user.tab();
- expect(
- screen.getByRole( 'button', { name: 'Hover Me!' } )
- ).toBeVisible();
- expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
- } );
+ expect( screen.queryByText( 'tooltip text' ) ).not.toBeInTheDocument();
+ } );
- it( 'should render children with additional tooltip when focused', async () => {
- const mockOnFocus = jest.fn();
+ it( 'should not render the tooltip if there is no focus', () => {
+ render(
+
+
+
+ );
+
+ expect(
+ screen.getByRole( 'button', { name: 'Hover Me!' } )
+ ).toBeVisible();
+ expect( screen.queryByText( 'tooltip text' ) ).not.toBeInTheDocument();
+ } );
- render(
-
-
-
- );
-
- const button = screen.getByRole( 'button', { name: 'Hover Me!' } );
- expect( button ).toBeVisible();
-
- // Before focus, the tooltip is not shown.
- expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
-
- act( () => button.focus() );
-
- // Tooltip is shown after focusing the anchor.
- const tooltip = screen.getByText( 'Help text' );
- expect( tooltip ).toBeVisible();
- expect( mockOnFocus ).toHaveBeenCalledWith(
- expect.objectContaining( {
- type: 'focus',
- } )
- );
-
- // Wait for the tooltip element to be positioned (aligned with the button)
- await waitFor( () =>
- expect(
- getWrappingPopoverElement( tooltip )
- ).toBePositionedPopover()
- );
- } );
-
- it( 'should render children with additional tooltip when hovered', async () => {
- const user = userEvent.setup( {
- advanceTimers: jest.advanceTimersByTime,
- } );
-
- render(
-
-
-
- );
+ it( 'should render the tooltip when focusing the tooltip anchor via tab', async () => {
+ const user = userEvent.setup();
- const button = screen.getByRole( 'button', { name: 'Hover Me!' } );
- expect( button ).toBeVisible();
+ render(
+
+
+
+ );
- await user.hover( button );
+ await user.tab();
- // Tooltip hasn't appeared yet
- expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
+ expect(
+ screen.getByRole( 'button', { name: /Hover me!/i } )
+ ).toHaveFocus();
- act( () => jest.advanceTimersByTime( TOOLTIP_DELAY ) );
+ await waitFor( () =>
+ expect( screen.getByText( 'tooltip text' ) ).toBeVisible()
+ );
- // Tooltip shows after the delay
- const tooltip = screen.getByText( 'Help text' );
- expect( tooltip ).toBeVisible();
+ // Wait for the tooltip element to be positioned (aligned with the button)
+ await waitFor( () =>
+ expect(
+ getWrappingPopoverElement( screen.getByText( 'tooltip text' ) )
+ ).toBePositionedPopover()
+ );
+ } );
- // Wait for the tooltip element to be positioned (aligned with the button)
- await waitFor( () =>
- expect(
- getWrappingPopoverElement( tooltip )
- ).toBePositionedPopover()
- );
- } );
+ it( 'should render the tooltip when the tooltip anchor is hovered', async () => {
+ const user = userEvent.setup();
- it( 'should not show tooltip on focus as result of mouse click', async () => {
- const user = userEvent.setup( {
- advanceTimers: jest.advanceTimersByTime,
- } );
- const mockOnFocus = jest.fn();
+ render(
+
+
+
+ );
- render(
-
-
-
- );
+ const button = screen.getByRole( 'button', { name: 'Hover Me!' } );
- const button = screen.getByRole( 'button', { text: 'Hover Me!' } );
- expect( button ).toBeVisible();
+ await user.hover( button );
- await user.click( button );
+ await waitFor( () =>
+ expect( screen.getByText( 'tooltip text' ) ).toBeVisible()
+ );
- // Tooltip hasn't appeared yet
- expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
+ // Wait for the tooltip element to be positioned (aligned with the button)
+ await waitFor( () =>
+ expect(
+ getWrappingPopoverElement( screen.getByText( 'tooltip text' ) )
+ ).toBePositionedPopover()
+ );
- act( () => jest.advanceTimersByTime( TOOLTIP_DELAY ) );
+ await user.unhover( button );
- // Tooltip still hasn't appeared yet, even though the component was focused
- expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
- expect( mockOnFocus ).toHaveBeenCalledWith(
- expect.objectContaining( {
- type: 'focus',
- } )
- );
- } );
+ expect( screen.queryByText( 'tooltip text' ) ).not.toBeInTheDocument();
+ } );
- it( 'should respect custom delay prop when showing tooltip', async () => {
- const user = userEvent.setup( {
- advanceTimers: jest.advanceTimersByTime,
- } );
+ it( 'should not show tooltip on focus as result of mouse click', async () => {
+ const user = userEvent.setup();
- const TEST_DELAY = TOOLTIP_DELAY * 2;
- const mockOnMouseEnter = jest.fn();
- const mockOnFocus = jest.fn();
+ render(
+
+
+
+ );
- render(
-
-
-
- );
+ await user.click( screen.getByRole( 'button', { text: 'Hover Me!' } ) );
- const button = screen.getByRole( 'button', { name: 'Hover Me!' } );
- expect( button ).toBeVisible();
+ expect( screen.queryByText( 'tooltip text' ) ).not.toBeInTheDocument();
+ } );
- await user.hover( button );
+ it( 'should respect custom delay prop when showing tooltip', async () => {
+ const user = userEvent.setup( { delay: TOOLTIP_DELAY } );
+ const CUSTOM_DELAY = TOOLTIP_DELAY + 25;
- // Tooltip hasn't appeared yet
- expect( mockOnMouseEnter ).toHaveBeenCalledTimes( 1 );
+ render(
+
+
+
+ );
- // Advance by the usual TOOLTIP_DELAY
- act( () => jest.advanceTimersByTime( TOOLTIP_DELAY ) );
+ const button = screen.getByRole( 'button', { name: 'Hover Me!' } );
- // Tooltip hasn't appeared yet after the usual delay
- expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
+ await user.hover( button );
- // Advance time again, so that we reach the full TEST_DELAY time
- act( () => jest.advanceTimersByTime( TEST_DELAY - TOOLTIP_DELAY ) );
+ expect( screen.queryByText( 'tooltip text' ) ).not.toBeInTheDocument();
- // Tooltip shows after TEST_DELAY time
- const tooltip = screen.getByText( 'Help text' );
- expect( tooltip ).toBeVisible();
+ await waitFor( () =>
+ expect( screen.getByText( 'tooltip text' ) ).toBeVisible()
+ );
- expect( mockOnFocus ).not.toHaveBeenCalled();
+ // Wait for the tooltip element to be positioned (aligned with the button)
+ await waitFor( () =>
+ expect(
+ getWrappingPopoverElement( screen.getByText( 'tooltip text' ) )
+ ).toBePositionedPopover()
+ );
+ } );
- // Wait for the tooltip element to be positioned (aligned with the button)
- await waitFor( () =>
- expect(
- getWrappingPopoverElement( tooltip )
- ).toBePositionedPopover()
- );
- } );
+ it( 'should show tooltip when an element is disabled', async () => {
+ const user = userEvent.setup();
- it( 'should show tooltip when an element is disabled', async () => {
- const user = userEvent.setup( {
- advanceTimers: jest.advanceTimersByTime,
- } );
+ render(
+
+
+
+ );
- const { container } = render(
-
-
-
- );
+ const button = screen.getByRole( 'button', { name: /Click me/i } );
- const button = screen.getByRole( 'button', { name: 'Click me' } );
- expect( button ).toBeVisible();
- expect( button ).toBeDisabled();
+ expect( button ).toBeVisible();
+ expect( button ).toBeDisabled();
- // Note: this is testing for implementation details,
- // but couldn't find a better way.
- const buttonRect = button.getBoundingClientRect();
- // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
- const eventCatcher = container.querySelector( '.event-catcher' );
- const eventCatcherRect = eventCatcher.getBoundingClientRect();
- expect( buttonRect ).toEqual( eventCatcherRect );
+ await user.hover( button );
- await user.hover( eventCatcher );
+ await waitFor( () =>
+ expect( screen.getByText( 'tooltip text' ) ).toBeVisible()
+ );
- // Tooltip hasn't appeared yet
+ // Wait for the tooltip element to be positioned (aligned with the button)
+ await waitFor( () =>
expect(
- screen.queryByText( 'Show helpful text here' )
- ).not.toBeInTheDocument();
-
- act( () => jest.advanceTimersByTime( TOOLTIP_DELAY ) );
-
- // Tooltip shows after the delay
- const tooltip = screen.getByText( 'Show helpful text here' );
- expect( tooltip ).toBeVisible();
-
- // Wait for the tooltip element to be positioned (aligned with the button)
- await waitFor( () =>
- expect(
- getWrappingPopoverElement( tooltip )
- ).toBePositionedPopover()
- );
- } );
-
- it( 'should not emit events back to children when they are disabled', async () => {
- const user = userEvent.setup( {
- advanceTimers: jest.advanceTimersByTime,
- } );
-
- const onClickMock = jest.fn();
- const { container } = render(
-
-
+ getWrappingPopoverElement( screen.getByText( 'tooltip text' ) )
+ ).toBePositionedPopover()
+ );
+ } );
+
+ it( 'should not emit events back to children when they are disabled', async () => {
+ const user = userEvent.setup();
+ const onClickMock = jest.fn();
+
+ const { container } = render(
+
+
+
+ );
+
+ // Note: this is testing for implementation details,
+ // but couldn't find a better way.
+ const buttonRect = screen
+ .getByRole( 'button', { name: 'Click me' } )
+ .getBoundingClientRect();
+ // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+ const eventCatcher = container.querySelector( '.event-catcher' );
+ await user.click( eventCatcher );
+ expect( onClickMock ).not.toHaveBeenCalled();
+
+ const eventCatcherRect = eventCatcher.getBoundingClientRect();
+ expect( buttonRect ).toEqual( eventCatcherRect );
+ } );
+
+ it( 'should not show tooltip if the mouse leaves the tooltip anchor before set delay', async () => {
+ const user = userEvent.setup();
+ const onMouseEnterMock = jest.fn();
+ const onMouseLeaveMock = jest.fn();
+ const MOUSE_LEAVE_DELAY = TOOLTIP_DELAY - 200;
+
+ render(
+ <>
+
+
- );
-
- // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
- const eventCatcher = container.querySelector( '.event-catcher' );
- await user.click( eventCatcher );
- expect( onClickMock ).not.toHaveBeenCalled();
- } );
-
- it( 'should not show tooltip if the mouse leaves the anchor before the tooltip has shown', async () => {
- const user = userEvent.setup( {
- advanceTimers: jest.advanceTimersByTime,
- } );
-
- const MOUSE_LEAVE_DELAY = TOOLTIP_DELAY - 200;
- const onMouseEnterMock = jest.fn();
- const onMouseLeaveMock = jest.fn();
-
- render(
- <>
-
-
-
-
-
- );
-
- const externalButton = screen.getByRole( 'button', {
- name: 'Hover me instead!',
- } );
- const tooltipButton = screen.getByRole( 'button', {
+
+
+ );
+
+ await user.hover(
+ screen.getByRole( 'button', {
name: 'Hover Me!',
- } );
+ } )
+ );
- await user.hover( tooltipButton );
+ // Tooltip hasn't appeared yet
+ expect( screen.queryByText( 'tooltip text' ) ).not.toBeInTheDocument();
+ expect( onMouseEnterMock ).toHaveBeenCalledTimes( 1 );
- // Tooltip hasn't appeared yet
- expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
- expect( onMouseEnterMock ).toHaveBeenCalledTimes( 1 );
+ // Advance time by MOUSE_LEAVE_DELAY time
+ await new Promise( ( resolve ) =>
+ setTimeout( resolve, MOUSE_LEAVE_DELAY )
+ );
- // Advance time by MOUSE_LEAVE_DELAY time
- act( () => jest.advanceTimersByTime( MOUSE_LEAVE_DELAY ) );
+ expect( screen.queryByText( 'tooltip text' ) ).not.toBeInTheDocument();
- // Hover the other button, meaning that the mouse will leave the tooltip anchor
- await user.hover( externalButton );
+ // Hover the other button, meaning that the mouse will leave the tooltip anchor
+ await user.hover(
+ screen.getByRole( 'button', {
+ name: 'Hover me instead!',
+ } )
+ );
- // Tooltip still hasn't appeared yet
- expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
- expect( onMouseEnterMock ).toHaveBeenCalledTimes( 1 );
- expect( onMouseLeaveMock ).toHaveBeenCalledTimes( 1 );
+ // Tooltip still hasn't appeared yet
+ expect( screen.queryByText( 'tooltip text' ) ).not.toBeInTheDocument();
+ expect( onMouseEnterMock ).toHaveBeenCalledTimes( 1 );
+ expect( onMouseLeaveMock ).toHaveBeenCalledTimes( 1 );
- // Advance time again, so that we reach the full TOOLTIP_DELAY time
- act( () => jest.advanceTimersByTime( TOOLTIP_DELAY ) );
+ // Advance time again, so that we reach the full TOOLTIP_DELAY time
+ await new Promise( ( resolve ) =>
+ setTimeout( resolve, TOOLTIP_DELAY )
+ );
- // Tooltip won't show, since the mouse has left the anchor
- expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
- } );
+ // Tooltip won't show, since the mouse has left the tooltip anchor
+ expect( screen.queryByText( 'tooltip text' ) ).not.toBeInTheDocument();
+ } );
- it( 'should render the shortcut display text when a string is passed as the shortcut', async () => {
- const user = userEvent.setup( {
- advanceTimers: jest.advanceTimersByTime,
- } );
+ it( 'should render the shortcut display text when a string is passed as the shortcut', async () => {
+ const user = userEvent.setup();
- render(
-
-
-
- );
-
- const button = screen.getByRole( 'button', { name: 'Hover Me!' } );
- await user.hover( button );
-
- const tooltip = await screen.findByText( 'shortcut text' );
- expect( tooltip ).toBeVisible();
-
- // Wait for the tooltip element to be positioned (aligned with the button)
- await waitFor( () =>
- expect(
- getWrappingPopoverElement( tooltip )
- ).toBePositionedPopover()
- );
- } );
-
- it( 'should render the shortcut display text and aria-label when an object is passed as the shortcut with the correct properties', async () => {
- const user = userEvent.setup( {
- advanceTimers: jest.advanceTimersByTime,
- } );
-
- render(
-
-
-
- );
+ render(
+
+
+
+ );
- const button = screen.getByRole( 'button', { name: 'Hover Me!' } );
- await user.hover( button );
+ await user.hover( screen.getByRole( 'button', { name: 'Hover Me!' } ) );
- const tooltip = await screen.findByLabelText( 'shortcut label' );
- expect( tooltip ).toHaveTextContent( 'shortcut text' );
+ await waitFor( () =>
+ expect( screen.getByText( 'shortcut text' ) ).toBeVisible()
+ );
- // Wait for the tooltip element to be positioned (aligned with the button)
- await waitFor( () =>
- expect(
- getWrappingPopoverElement( tooltip )
- ).toBePositionedPopover()
- );
- } );
+ // Wait for the tooltip element to be positioned (aligned with the button)
+ await waitFor( () =>
+ expect(
+ getWrappingPopoverElement( screen.getByText( 'shortcut text' ) )
+ ).toBePositionedPopover()
+ );
+ } );
+
+ it( 'should render the shortcut display text and aria-label when an object is passed as the shortcut with the correct properties', async () => {
+ const user = userEvent.setup();
+
+ render(
+
+
+
+ );
+
+ await user.hover( screen.getByRole( 'button', { name: 'Hover Me!' } ) );
+
+ await waitFor( () =>
+ expect( screen.getByText( '⇧⌘,' ) ).toBeVisible()
+ );
+
+ expect( screen.getByText( '⇧⌘,' ) ).toHaveAttribute(
+ 'aria-label',
+ 'Control + Shift + Comma'
+ );
+
+ // Wait for the tooltip element to be positioned (aligned with the button)
+ await waitFor( () =>
+ expect(
+ getWrappingPopoverElement( screen.getByText( '⇧⌘,' ) )
+ ).toBePositionedPopover()
+ );
} );
} );
diff --git a/packages/components/src/utils/input/input-control.js b/packages/components/src/utils/input/input-control.js
index c550a558d6d4e2..8af838247d9c25 100644
--- a/packages/components/src/utils/input/input-control.js
+++ b/packages/components/src/utils/input/input-control.js
@@ -12,6 +12,7 @@ import { COLORS } from '../colors-values';
import { breakpoint } from '../breakpoint';
export const inputControl = css`
+ display: block;
font-family: ${ font( 'default.fontFamily' ) };
padding: 6px 8px;
${ inputStyleNeutral };
diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json
index 6aaadae65b49cc..242ff98906cccd 100644
--- a/packages/components/tsconfig.json
+++ b/packages/components/tsconfig.json
@@ -44,7 +44,6 @@
"src/**/react-native-*",
"src/**/stories/**/*.js", // only exclude js files, tsx files should be checked
"src/**/test/**/*.js", // only exclude js files, ts{x} files should be checked
- "src/index.js",
- "src/duotone-picker"
+ "src/index.js"
]
}
diff --git a/packages/compose/src/hooks/use-media-query/index.js b/packages/compose/src/hooks/use-media-query/index.js
index 099845494c7ba9..bd8a0e724a40b7 100644
--- a/packages/compose/src/hooks/use-media-query/index.js
+++ b/packages/compose/src/hooks/use-media-query/index.js
@@ -1,7 +1,25 @@
/**
* WordPress dependencies
*/
-import { useState, useEffect } from '@wordpress/element';
+import { useMemo, useSyncExternalStore } from '@wordpress/element';
+
+/**
+ * A new MediaQueryList object for the media query
+ *
+ * @param {string} [query] Media Query.
+ * @return {MediaQueryList|null} A new object for the media query
+ */
+function getMediaQueryList( query ) {
+ if (
+ query &&
+ typeof window !== 'undefined' &&
+ typeof window.matchMedia === 'function'
+ ) {
+ return window.matchMedia( query );
+ }
+
+ return null;
+}
/**
* Runs a media query and returns its value when it changes.
@@ -10,28 +28,33 @@ import { useState, useEffect } from '@wordpress/element';
* @return {boolean} return value of the media query.
*/
export default function useMediaQuery( query ) {
- const [ match, setMatch ] = useState(
- () =>
- !! (
- query &&
- typeof window !== 'undefined' &&
- window.matchMedia( query ).matches
- )
- );
+ const source = useMemo( () => {
+ const mediaQueryList = getMediaQueryList( query );
- useEffect( () => {
- if ( ! query ) {
- return;
- }
- const updateMatch = () =>
- setMatch( window.matchMedia( query ).matches );
- updateMatch();
- const list = window.matchMedia( query );
- list.addListener( updateMatch );
- return () => {
- list.removeListener( updateMatch );
+ return {
+ /** @type {(onStoreChange: () => void) => () => void} */
+ subscribe( onStoreChange ) {
+ if ( ! mediaQueryList ) {
+ return () => {};
+ }
+
+ mediaQueryList.addEventListener( 'change', onStoreChange );
+ return () => {
+ mediaQueryList.removeEventListener(
+ 'change',
+ onStoreChange
+ );
+ };
+ },
+ getValue() {
+ return mediaQueryList?.matches ?? false;
+ },
};
}, [ query ] );
- return !! query && match;
+ return useSyncExternalStore(
+ source.subscribe,
+ source.getValue,
+ () => false
+ );
}
diff --git a/packages/compose/src/hooks/use-media-query/test/index.js b/packages/compose/src/hooks/use-media-query/test/index.js
index f75ba22a7b3fa1..88b2c1b0a3bd24 100644
--- a/packages/compose/src/hooks/use-media-query/test/index.js
+++ b/packages/compose/src/hooks/use-media-query/test/index.js
@@ -1,125 +1,68 @@
/**
* External dependencies
*/
-import { render, act } from '@testing-library/react';
+import { act, render } from '@testing-library/react';
+import { matchMedia, setMedia, cleanup } from 'mock-match-media';
/**
* Internal dependencies
*/
import useMediaQuery from '../';
-describe( 'useMediaQuery', () => {
- let addListener, removeListener;
+const TestComponent = ( { query } ) => {
+ const queryResult = useMediaQuery( query );
+ return `useMediaQuery: ${ queryResult }`;
+};
+describe( 'useMediaQuery', () => {
beforeAll( () => {
- jest.spyOn( global, 'matchMedia' );
-
- addListener = jest.fn();
- removeListener = jest.fn();
+ window.matchMedia = matchMedia;
} );
- afterEach( () => {
- global.matchMedia.mockClear();
- addListener.mockClear();
- removeListener.mockClear();
+ beforeEach( () => {
+ setMedia( {
+ width: '960px',
+ } );
} );
- afterAll( () => {
- global.matchMedia.mockRestore();
+ afterEach( () => {
+ cleanup();
} );
- const TestComponent = ( { query } ) => {
- const queryResult = useMediaQuery( query );
- return `useMediaQuery: ${ queryResult }`;
- };
-
it( 'should return true when query matches', async () => {
- global.matchMedia.mockReturnValue( {
- addListener,
- removeListener,
- matches: true,
- } );
-
- const { container, unmount } = render(
+ const { container } = render(
+
+
+
+
+
+ { __( 'Captions' ) }
+
+
+ );
+}
+
function ButtonColorItem( { name, parentMenu, variation = '' } ) {
const prefix = variation ? `variations.${ variation }.` : '';
const urlPrefix = variation ? `/variations/${ variation }` : '';
@@ -250,6 +281,10 @@ function ScreenColors( { name, variation = '' } ) {
parentMenu={ parentMenu }
variation={ variation }
/>
+ 0 || areCustomSolidsEnabled );
-
- const [ color, setColor ] = useGlobalStyle( prefix + 'color.text', name );
- const [ userColor ] = useGlobalStyle( prefix + 'color.text', name, 'user' );
-
- if ( ! hasTextColor ) {
- return null;
- }
-
- return (
- <>
-
+
+
@@ -211,7 +216,11 @@ function ContextScreens( { name, parentMenu = '', variation = '' } ) {
-
@@ -227,7 +236,21 @@ function ContextScreens( { name, parentMenu = '', variation = '' } ) {
-
+
+
+
diff --git a/packages/edit-site/src/components/style-book/style.scss b/packages/edit-site/src/components/style-book/style.scss
index 881b117a75ccb3..cf84655258725b 100644
--- a/packages/edit-site/src/components/style-book/style.scss
+++ b/packages/edit-site/src/components/style-book/style.scss
@@ -1,5 +1,5 @@
.edit-site-style-book {
- background: $white; // Fallback color, overriden by JavaScript.
+ background: $white; // Fallback color, overridden by JavaScript.
border-radius: $radius-block-ui;
bottom: 0;
left: 0;
diff --git a/packages/edit-site/src/hooks/push-changes-to-global-styles/index.js b/packages/edit-site/src/hooks/push-changes-to-global-styles/index.js
index 815aa6f6b20c32..5ee0efcd6fa7c3 100644
--- a/packages/edit-site/src/hooks/push-changes-to-global-styles/index.js
+++ b/packages/edit-site/src/hooks/push-changes-to-global-styles/index.js
@@ -45,6 +45,7 @@ const STYLE_PATH_TO_CSS_VAR_INFIX = {
'elements.button.color.background': 'color',
'elements.button.typography.fontFamily': 'font-family',
'elements.button.typography.fontSize': 'font-size',
+ 'elements.caption.color.text': 'color',
'elements.heading.color': 'color',
'elements.heading.color.background': 'color',
'elements.heading.typography.fontFamily': 'font-family',
diff --git a/packages/editor/src/components/post-publish-panel/postpublish.js b/packages/editor/src/components/post-publish-panel/postpublish.js
index 178fc2c4954058..39f48d3bc811c4 100644
--- a/packages/editor/src/components/post-publish-panel/postpublish.js
+++ b/packages/editor/src/components/post-publish-panel/postpublish.js
@@ -17,6 +17,7 @@ import PostScheduleLabel from '../post-schedule/label';
import { store as editorStore } from '../../store';
const POSTNAME = '%postname%';
+const PAGENAME = '%pagename%';
/**
* Returns URL for a future post.
@@ -33,6 +34,10 @@ const getFuturePostUrl = ( post ) => {
return post.permalink_template.replace( POSTNAME, slug );
}
+ if ( post.permalink_template.includes( PAGENAME ) ) {
+ return post.permalink_template.replace( PAGENAME, slug );
+ }
+
return post.permalink_template;
};
diff --git a/packages/editor/src/utils/terms.js b/packages/editor/src/utils/terms.js
index e95987c02a6d17..2d34879548a56c 100644
--- a/packages/editor/src/utils/terms.js
+++ b/packages/editor/src/utils/terms.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { groupBy } from 'lodash';
-
/**
* WordPress dependencies
*/
@@ -24,10 +19,25 @@ export function buildTermsTree( flatTerms ) {
};
} );
- const termsByParent = groupBy( flatTermsWithParentAndChildren, 'parent' );
- if ( termsByParent.null && termsByParent.null.length ) {
+ // All terms should have a `parent` because we're about to index them by it.
+ if (
+ flatTermsWithParentAndChildren.some( ( { parent } ) => parent === null )
+ ) {
return flatTermsWithParentAndChildren;
}
+
+ const termsByParent = flatTermsWithParentAndChildren.reduce(
+ ( acc, term ) => {
+ const { parent } = term;
+ if ( ! acc[ parent ] ) {
+ acc[ parent ] = [];
+ }
+ acc[ parent ].push( term );
+ return acc;
+ },
+ {}
+ );
+
const fillWithChildren = ( terms ) => {
return terms.map( ( term ) => {
const children = termsByParent[ term.id ];
diff --git a/packages/element/README.md b/packages/element/README.md
index 9fda8a6c01eaf4..37e91255753da9 100755
--- a/packages/element/README.md
+++ b/packages/element/README.md
@@ -168,7 +168,7 @@ You would have something like this as the conversionMap value:
_Parameters_
- _interpolatedString_ `string`: The interpolation string to be parsed.
-- _conversionMap_ `Object`: The map used to convert the string to a react element.
+- _conversionMap_ `Record`: The map used to convert the string to a react element.
_Returns_
diff --git a/packages/element/src/create-interpolate-element.js b/packages/element/src/create-interpolate-element.js
index c8e38c0f457434..761a01079f5a14 100644
--- a/packages/element/src/create-interpolate-element.js
+++ b/packages/element/src/create-interpolate-element.js
@@ -101,9 +101,9 @@ function createFrame(
* }
* ```
*
- * @param {string} interpolatedString The interpolation string to be parsed.
- * @param {Object} conversionMap The map used to convert the string to
- * a react element.
+ * @param {string} interpolatedString The interpolation string to be parsed.
+ * @param {Record} conversionMap The map used to convert the string to
+ * a react element.
* @throws {TypeError}
* @return {WPElement} A wp element.
*/
diff --git a/packages/env/lib/config/config.js b/packages/env/lib/config/config.js
index ca00aebacf4ba9..afb845ed0b16ed 100644
--- a/packages/env/lib/config/config.js
+++ b/packages/env/lib/config/config.js
@@ -331,7 +331,7 @@ function getNumberFromEnvVariable( varName ) {
* Gets the `wp-env` home directory in which generated files are created.
*
* By default: '~/.wp-env/'. On Linux with snap packages: '~/wp-env/'. Can be
- * overriden with the WP_ENV_HOME environment variable.
+ * overridden with the WP_ENV_HOME environment variable.
*
* @return {Promise} The absolute path to the `wp-env` home directory.
*/
diff --git a/packages/env/lib/config/test/config.js b/packages/env/lib/config/test/config.js
index 5552ecce9d70f4..f94ecd4c099568 100644
--- a/packages/env/lib/config/test/config.js
+++ b/packages/env/lib/config/test/config.js
@@ -825,7 +825,7 @@ describe( 'readConfig', () => {
)
);
const config = await readConfig( '.wp-env.json' );
- // Custom port is overriden while testsPort gets the deault value.
+ // Custom port is overridden while testsPort gets the deault value.
expect( config ).toMatchObject( {
env: {
development: {
@@ -848,7 +848,7 @@ describe( 'readConfig', () => {
)
);
const config = await readConfig( '.wp-env.json' );
- // Custom port is overriden while testsPort gets the deault value.
+ // Custom port is overridden while testsPort gets the deault value.
expect( config ).toMatchObject( {
env: {
development: {
@@ -884,7 +884,7 @@ describe( 'readConfig', () => {
)
);
const config = await readConfig( '.wp-env.json' );
- // Custom port is overriden while testsPort gets the deault value.
+ // Custom port is overridden while testsPort gets the deault value.
expect( config ).toMatchObject( {
env: {
development: {
diff --git a/packages/plugins/src/components/test/plugin-area.js b/packages/plugins/src/components/test/plugin-area.js
new file mode 100644
index 00000000000000..68ed2b5368d032
--- /dev/null
+++ b/packages/plugins/src/components/test/plugin-area.js
@@ -0,0 +1,121 @@
+/**
+ * External dependencies
+ */
+import { act, render, cleanup } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import { getPlugins, unregisterPlugin, registerPlugin } from '../../api';
+import PluginArea from '../plugin-area';
+
+describe( 'PluginArea', () => {
+ afterEach( () => {
+ // Unmount components before unregistering the plugins.
+ // RTL uses top-level `afterEach` for cleanup, executed after this teardown.
+ cleanup();
+ getPlugins().forEach( ( plugin ) => {
+ unregisterPlugin( plugin.name );
+ } );
+ getPlugins( 'my-app' ).forEach( ( plugin ) => {
+ unregisterPlugin( plugin.name );
+ } );
+ } );
+
+ const TestComponent = ( { content } ) => {
+ return `plugin: ${ content }.`;
+ };
+
+ test( 'renders unscoped plugin', () => {
+ registerPlugin( 'unscoped', {
+ render: () => rnMediaList = new ArrayList<>();
+ WritableNativeMap emptyMetadata = new WritableNativeMap();
switch (mediaType) {
case IMAGE:
- rnMediaList.add(createRNMediaUsingMimeType(1, "https://cldup.com/cXyG__fTLN.jpg", "image", "Mountain", "", "A snow-capped mountain top in a cloudy sky with red-leafed trees in the foreground"));
+ Media image = new Media(1, "https://cldup.com/cXyG__fTLN.jpg", "image", "Mountain", "", "A snow-capped mountain top in a cloudy sky with red-leafed trees in the foreground", emptyMetadata);
+ rnMediaList.add(image);
break;
case VIDEO:
- rnMediaList.add(createRNMediaUsingMimeType(2, "https://i.cloudup.com/YtZFJbuQCE.mov", "video", "Cloudup", ""));
+ WritableNativeMap metadata = new WritableNativeMap();
+ metadata.putString("extraID", "AbCdE");
+ Media video = new Media(2, "https://i.cloudup.com/YtZFJbuQCE.mov", "video", "Cloudup", "", "", metadata);
+ rnMediaList.add(video);
break;
case ANY:
case OTHER:
- rnMediaList.add(createRNMediaUsingMimeType(3, "https://wordpress.org/latest.zip", "zip", "WordPress latest version", "WordPress.zip"));
+ Media other = new Media(3, "https://wordpress.org/latest.zip", "zip", "WordPress latest version", "WordPress.zip", "", emptyMetadata);
+ rnMediaList.add(other);
break;
case AUDIO:
- rnMediaList.add(createRNMediaUsingMimeType(5, "https://cldup.com/59IrU0WJtq.mp3", "audio", "Summer presto", ""));
+ Media audio = new Media(5, "https://cldup.com/59IrU0WJtq.mp3", "audio", "Summer presto", "", "", emptyMetadata);
+ rnMediaList.add(audio);
break;
}
mediaSelectedCallback.onMediaFileSelected(rnMediaList);
@@ -147,7 +156,8 @@ public void getOtherMediaPickerOptions(OtherMediaOptionsReceivedCallback otherMe
public void requestMediaPickFrom(String mediaSource, MediaSelectedCallback mediaSelectedCallback, Boolean allowMultipleSelection) {
if (mediaSource.equals("1")) {
List rnMediaList = new ArrayList<>();
- rnMediaList.add(createRNMediaUsingMimeType(1, "https://grad.illinois.edu/sites/default/files/pdfs/cvsamples.pdf", "other", "","cvsamples.pdf"));
+ Media pdf = new Media(1, "https://grad.illinois.edu/sites/default/files/pdfs/cvsamples.pdf", "other", "","cvsamples.pdf", "", new WritableNativeMap());
+ rnMediaList.add(pdf);
mediaSelectedCallback.onMediaFileSelected(rnMediaList);
}
}
diff --git a/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift b/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift
index cb485a6bca720c..fd851712e2a926 100644
--- a/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift
+++ b/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift
@@ -97,7 +97,8 @@ extension GutenbergViewController: GutenbergBridgeDelegate {
callback([MediaInfo(id: 2, url: "https://i.cloudup.com/YtZFJbuQCE.mov", type: "video"),
MediaInfo(id: 4, url: "https://i.cloudup.com/YtZFJbuQCE.mov", type: "video")])
} else {
- callback([MediaInfo(id: 2, url: "https://i.cloudup.com/YtZFJbuQCE.mov", type: "video", caption: "Cloudup")])
+ let metadata = ["extraID": "AbCdE"]
+ callback([MediaInfo(id: 2, url: "https://i.cloudup.com/YtZFJbuQCE.mov", type: "video", caption: "Cloudup", metadata: metadata)])
}
case .other, .any:
callback([MediaInfo(id: 3, url: "https://wordpress.org/latest.zip", type: "zip", caption: "WordPress latest version", title: "WordPress.zip")])
diff --git a/packages/react-native-editor/ios/Podfile.lock b/packages/react-native-editor/ios/Podfile.lock
index 403f06f95d2cb0..0d425360aa2e6b 100644
--- a/packages/react-native-editor/ios/Podfile.lock
+++ b/packages/react-native-editor/ios/Podfile.lock
@@ -13,7 +13,7 @@ PODS:
- ReactCommon/turbomodule/core (= 0.69.4)
- fmt (6.2.1)
- glog (0.3.5)
- - Gutenberg (1.90.0):
+ - Gutenberg (1.91.0):
- React-Core (= 0.69.4)
- React-CoreModules (= 0.69.4)
- React-RCTImage (= 0.69.4)
@@ -362,7 +362,7 @@ PODS:
- React-Core
- RNSVG (9.13.6):
- React-Core
- - RNTAztecView (1.90.0):
+ - RNTAztecView (1.91.0):
- React-Core
- WordPress-Aztec-iOS (~> 1.19.8)
- SDWebImage (5.11.1):
@@ -545,7 +545,7 @@ SPEC CHECKSUMS:
FBReactNativeSpec: 2ff441cbe6e58c1778d8a5cf3311831a6a8c0809
fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
glog: 3d02b25ca00c2d456734d0bcff864cbc62f6ae1a
- Gutenberg: dbb0140a7159408f2cd8031d841c7adf98e1e9ca
+ Gutenberg: fd67b0394a094ed0d475f00705ece86d99b846be
libwebp: 60305b2e989864154bd9be3d772730f08fc6a59c
RCT-Folly: b9d9fe1fc70114b751c076104e52f3b1b5e5a95a
RCTRequired: bd9d2ab0fda10171fcbcf9ba61a7df4dc15a28f4
@@ -588,7 +588,7 @@ SPEC CHECKSUMS:
RNReanimated: bea6acb5fdcbd8ca27641180579d09e3434f803c
RNScreens: 953633729a42e23ad0c93574d676b361e3335e8b
RNSVG: 36a7359c428dcb7c6bce1cc546fbfebe069809b0
- RNTAztecView: 0ef32f75b63813ac5e7675696fa074d3062b8e91
+ RNTAztecView: a632287ad9e3807fe0b4460efa329b54111af4a3
SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d
SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d
WordPress-Aztec-iOS: 7d11d598f14c82c727c08b56bd35fbeb7dafb504
diff --git a/packages/react-native-editor/package.json b/packages/react-native-editor/package.json
index 8d83f7ada8aebd..f7bda6bf1cba15 100644
--- a/packages/react-native-editor/package.json
+++ b/packages/react-native-editor/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/react-native-editor",
- "version": "1.90.0",
+ "version": "1.91.0",
"description": "Mobile WordPress gutenberg editor.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/rich-text/src/get-active-format.js b/packages/rich-text/src/get-active-format.js
index 783177168b60ab..a259b094272f37 100644
--- a/packages/rich-text/src/get-active-format.js
+++ b/packages/rich-text/src/get-active-format.js
@@ -19,7 +19,7 @@ import { getActiveFormats } from './get-active-formats';
* type, or undefined.
*/
export function getActiveFormat( value, formatType ) {
- return getActiveFormats( value )?.find(
+ return getActiveFormats( value ).find(
( { type } ) => type === formatType
);
}
diff --git a/packages/rich-text/src/get-active-formats.js b/packages/rich-text/src/get-active-formats.js
index 256c95eca01431..09bbef0cf2d6cf 100644
--- a/packages/rich-text/src/get-active-formats.js
+++ b/packages/rich-text/src/get-active-formats.js
@@ -1,6 +1,11 @@
/** @typedef {import('./create').RichTextValue} RichTextValue */
/** @typedef {import('./create').RichTextFormatList} RichTextFormatList */
+/**
+ * Internal dependencies
+ */
+import { isFormatEqual } from './is-format-equal';
+
/**
* Gets the all format objects at the start of the selection.
*
@@ -10,10 +15,8 @@
*
* @return {RichTextFormatList} Active format objects.
*/
-export function getActiveFormats(
- { formats, start, end, activeFormats },
- EMPTY_ACTIVE_FORMATS = []
-) {
+export function getActiveFormats( value, EMPTY_ACTIVE_FORMATS = [] ) {
+ const { formats, start, end, activeFormats } = value;
if ( start === undefined ) {
return EMPTY_ACTIVE_FORMATS;
}
@@ -37,5 +40,49 @@ export function getActiveFormats(
return formatsAfter;
}
- return formats[ start ] || EMPTY_ACTIVE_FORMATS;
+ // If there's no formats at the start index, there are not active formats.
+ if ( ! formats[ start ] ) {
+ return EMPTY_ACTIVE_FORMATS;
+ }
+
+ const selectedFormats = formats.slice( start, end );
+
+ // Clone the formats so we're not mutating the live value.
+ const _activeFormats = [ ...selectedFormats[ 0 ] ];
+ let i = selectedFormats.length;
+
+ // For performance reasons, start from the end where it's much quicker to
+ // realise that there are no active formats.
+ while ( i-- ) {
+ const formatsAtIndex = selectedFormats[ i ];
+
+ // If we run into any index without formats, we're sure that there's no
+ // active formats.
+ if ( ! formatsAtIndex ) {
+ return EMPTY_ACTIVE_FORMATS;
+ }
+
+ let ii = _activeFormats.length;
+
+ // Loop over the active formats and remove any that are not present at
+ // the current index.
+ while ( ii-- ) {
+ const format = _activeFormats[ ii ];
+
+ if (
+ ! formatsAtIndex.find( ( _format ) =>
+ isFormatEqual( format, _format )
+ )
+ ) {
+ _activeFormats.splice( ii, 1 );
+ }
+ }
+
+ // If there are no active formats, we can stop.
+ if ( _activeFormats.length === 0 ) {
+ return EMPTY_ACTIVE_FORMATS;
+ }
+ }
+
+ return _activeFormats || EMPTY_ACTIVE_FORMATS;
}
diff --git a/packages/rich-text/src/test/__snapshots__/to-dom.js.snap b/packages/rich-text/src/test/__snapshots__/to-dom.js.snap
index 756d06885ea14d..a0eb7b3cb0a3ce 100644
--- a/packages/rich-text/src/test/__snapshots__/to-dom.js.snap
+++ b/packages/rich-text/src/test/__snapshots__/to-dom.js.snap
@@ -61,9 +61,7 @@ exports[`recordToDom should create a value with image object and formatting 1`]
exports[`recordToDom should create a value with image object and text after 1`] = `
-
+
![]()
{
expect( getActiveFormat( record, 'em' ) ).toBe( undefined );
} );
- it( 'should return format at first character for uncollapsed selection', () => {
+ it( 'should return format when active over whole selection', () => {
const record = {
formats: [ [ em ], [ strong ], , ],
text: 'one',
start: 0,
- end: 2,
+ end: 1,
};
expect( getActiveFormat( record, 'em' ) ).toBe( em );
} );
+ it( 'should return not return format when not active over whole selection', () => {
+ const record = {
+ formats: [ [ em ], [ strong ], , ],
+ text: 'one',
+ start: 0,
+ end: 2,
+ };
+
+ expect( getActiveFormat( record, 'em' ) ).toBe( undefined );
+ } );
+
it( 'should return undefined if at the boundary before', () => {
const record = {
formats: [ [ em ], , [ em ] ],
diff --git a/packages/rich-text/src/test/toggle-format.js b/packages/rich-text/src/test/toggle-format.js
index 6a71412c413fb2..95f03947fa667d 100644
--- a/packages/rich-text/src/test/toggle-format.js
+++ b/packages/rich-text/src/test/toggle-format.js
@@ -14,15 +14,18 @@ describe( 'toggleFormat', () => {
const strong = { type: 'strong' };
const em = { type: 'em' };
- it( 'should remove format if it exists at start of selection', () => {
+ it( 'should remove format if it is active', () => {
const record = {
formats: [
,
,
,
- [ strong ],
+ // In reality, formats at a different index are never the same
+ // value. Only formats that create the same tag are the same
+ // value.
+ [ { type: 'strong' } ],
+ [ em, strong ],
[ em, strong ],
- [ em ],
[ em ],
,
,
diff --git a/phpunit/block-supports/duotone-test.php b/phpunit/block-supports/duotone-test.php
deleted file mode 100644
index 3588950468aba4..00000000000000
--- a/phpunit/block-supports/duotone-test.php
+++ /dev/null
@@ -1,40 +0,0 @@
- 'core/image',
- 'attrs' => array( 'style' => array( 'color' => array( 'duotone' => 'var:preset|duotone|slug' ) ) ),
- );
- $block_content = '
<\\/figure>/';
- $this->assertMatchesRegularExpression( $expected, gutenberg_render_duotone_support( $block_content, $block ) );
- }
-
- public function test_gutenberg_render_duotone_support_custom() {
- $block = array(
- 'blockName' => 'core/image',
- 'attrs' => array( 'style' => array( 'color' => array( 'duotone' => array( '#FFFFFF', '#000000' ) ) ) ),
- );
- $block_content = '<\\/figure>/';
- $this->assertMatchesRegularExpression( $expected, gutenberg_render_duotone_support( $block_content, $block ) );
- }
-
-}
diff --git a/phpunit/class-wp-duotone-test.php b/phpunit/class-wp-duotone-test.php
new file mode 100644
index 00000000000000..21df35847fac50
--- /dev/null
+++ b/phpunit/class-wp-duotone-test.php
@@ -0,0 +1,92 @@
+ 'core/image',
+ 'attrs' => array( 'style' => array( 'color' => array( 'duotone' => 'var:preset|duotone|blue-orange' ) ) ),
+ );
+ $block_content = '<\\/figure>/';
+ $this->assertMatchesRegularExpression( $expected, WP_Duotone_Gutenberg::render_duotone_support( $block_content, $block ) );
+ }
+
+ public function test_gutenberg_render_duotone_support_custom() {
+ $block = array(
+ 'blockName' => 'core/image',
+ 'attrs' => array( 'style' => array( 'color' => array( 'duotone' => array( '#FFFFFF', '#000000' ) ) ) ),
+ );
+ $block_content = '<\\/figure>/';
+ $this->assertMatchesRegularExpression( $expected, WP_Duotone_Gutenberg::render_duotone_support( $block_content, $block ) );
+ }
+
+ public function data_gutenberg_get_slug_from_attr() {
+ return array(
+ 'pipe-slug' => array( 'var:preset|duotone|blue-orange', 'blue-orange' ),
+ 'css-var' => array( 'var(--wp--preset--duotone--blue-orange)', 'blue-orange' ),
+ 'css-var-invalid-slug-chars' => array( 'var(--wp--preset--duotone--.)', '.' ),
+ 'css-var-missing-end-parenthesis' => array( 'var(--wp--preset--duotone--blue-orange', '' ),
+ 'invalid' => array( 'not a valid attribute', '' ),
+ 'css-var-no-value' => array( 'var(--wp--preset--duotone--)', '' ),
+ 'pipe-slug-no-value' => array( 'var:preset|duotone|', '' ),
+ 'css-var-spaces' => array( 'var(--wp--preset--duotone-- ', '' ),
+ 'pipe-slug-spaces' => array( 'var:preset|duotone| ', '' ),
+ );
+ }
+
+ /**
+ * @dataProvider data_gutenberg_get_slug_from_attr
+ */
+ public function test_gutenberg_get_slug_from_attr( $data_attr, $expected ) {
+
+ $reflection = new ReflectionMethod( 'WP_Duotone_Gutenberg', 'gutenberg_get_slug_from_attr' );
+ $reflection->setAccessible( true );
+
+ $this->assertSame( $expected, $reflection->invoke( null, $data_attr ) );
+ }
+
+ public function data_is_preset() {
+ return array(
+ 'pipe-slug' => array( 'var:preset|duotone|blue-orange', true ),
+ 'css-var' => array( 'var(--wp--preset--duotone--blue-orange)', true ),
+ 'css-var-invalid-slug-chars' => array( 'var(--wp--preset--duotone--.)', false ),
+ 'css-var-missing-end-parenthesis' => array( 'var(--wp--preset--duotone--blue-orange', false ),
+ 'invalid' => array( 'not a valid attribute', false ),
+ );
+ }
+
+ /**
+ * @dataProvider data_is_preset
+ */
+ public function test_is_preset( $data_attr, $expected ) {
+ $reflection = new ReflectionMethod( 'WP_Duotone_Gutenberg', 'is_preset' );
+ $reflection->setAccessible( true );
+
+ $this->assertSame( $expected, $reflection->invoke( null, $data_attr ) );
+ }
+}
diff --git a/readme.txt b/readme.txt
index c87aff308e1c52..9a21c99105dcd1 100644
--- a/readme.txt
+++ b/readme.txt
@@ -47,6 +47,12 @@ The best place to report bugs, feature suggestions, or any other feedback is at
While we try to triage issues reported here on the plugin forum, you’ll get a faster response (and reduce duplication of effort) by keeping feedback centralized in GitHub.
+= Where can I report security bugs? =
+
+The Gutenberg team and WordPress community take security bugs seriously. We appreciate your efforts to responsibly disclose your findings, and will make every effort to acknowledge your contributions.
+
+To report a security issue, please visit the [WordPress HackerOne](https://hackerone.com/wordpress) program.
+
= Do I have to use the Gutenberg plugin to get access to these features? =
Not necessarily. Each version of WordPress after 5.0 has included features from the Gutenberg plugin, which are known collectively as the WordPress Editor. You are likely already benefitting from stable features!
diff --git a/schemas/json/theme.json b/schemas/json/theme.json
index 0458e587a909f2..7d76be637ab83d 100644
--- a/schemas/json/theme.json
+++ b/schemas/json/theme.json
@@ -74,6 +74,11 @@
"description": "Settings related to shadows.",
"type": "object",
"properties": {
+ "defaultPresets": {
+ "description": "Allow users to choose shadows from the default shadow presets.",
+ "type": "boolean",
+ "default": true
+ },
"presets": {
"description": "Shadow presets for the shadow picker.\nGenerates a single custom property (`--wp--preset--shadow--{slug}`) per preset value.",
"type": "array",
@@ -97,7 +102,8 @@
"additionalProperties": false
}
}
- }
+ },
+ "additionalProperties": false
}
}
},
@@ -1654,6 +1660,12 @@
},
":visited": {
"$ref": "#/definitions/stylesPropertiesComplete"
+ },
+ ":link": {
+ "$ref": "#/definitions/stylesPropertiesComplete"
+ },
+ ":any-link": {
+ "$ref": "#/definitions/stylesPropertiesComplete"
}
},
"additionalProperties": false
@@ -1683,6 +1695,12 @@
},
":visited": {
"$ref": "#/definitions/stylesPropertiesComplete"
+ },
+ ":link": {
+ "$ref": "#/definitions/stylesPropertiesComplete"
+ },
+ ":any-link": {
+ "$ref": "#/definitions/stylesPropertiesComplete"
}
},
"additionalProperties": false
diff --git a/storybook/decorators/with-rtl.js b/storybook/decorators/with-rtl.js
index 2a2a8cb8f0da53..3eab5a7c39e230 100644
--- a/storybook/decorators/with-rtl.js
+++ b/storybook/decorators/with-rtl.js
@@ -12,8 +12,7 @@ import {
/**
* Internal dependencies
*/
-import ltrStyles from '../style-ltr.lazy.scss';
-import rtlStyles from '../style-rtl.lazy.scss';
+import CONFIG from '../package-styles/config';
export const WithRTL = ( Story, context ) => {
const [ rerenderKey, setRerenderKey ] = useState( 0 );
@@ -43,17 +42,20 @@ export const WithRTL = ( Story, context ) => {
}, [ context.globals.direction ] );
useLayoutEffect( () => {
- if ( context.globals.direction === 'rtl' ) {
- rtlStyles.use();
- } else {
- ltrStyles.use();
- }
+ const stylesToUse = [];
+
+ CONFIG.forEach( ( item ) => {
+ if ( item.componentIdMatcher.test( context.componentId ) ) {
+ stylesToUse.push( ...item[ context.globals.direction ] );
+ }
+ } );
+
+ stylesToUse.forEach( ( style ) => style.use() );
return () => {
- ltrStyles.unuse();
- rtlStyles.unuse();
+ stylesToUse.forEach( ( style ) => style.unuse() );
};
- }, [ context.globals.direction ] );
+ }, [ context.componentId, context.globals.direction ] );
return (
- { __( 'Text color' ) } -
- -- { __( 'Background color' ) } -
- -+ { __( 'Text color' ) } +
+ ++ { __( 'Background color' ) } +
+ +<\\/figure>/';
- $this->assertMatchesRegularExpression( $expected, gutenberg_render_duotone_support( $block_content, $block ) );
- }
-
- public function test_gutenberg_render_duotone_support_custom() {
- $block = array(
- 'blockName' => 'core/image',
- 'attrs' => array( 'style' => array( 'color' => array( 'duotone' => array( '#FFFFFF', '#000000' ) ) ) ),
- );
- $block_content = '<\\/figure>/';
- $this->assertMatchesRegularExpression( $expected, gutenberg_render_duotone_support( $block_content, $block ) );
- }
-
-}
diff --git a/phpunit/class-wp-duotone-test.php b/phpunit/class-wp-duotone-test.php
new file mode 100644
index 00000000000000..21df35847fac50
--- /dev/null
+++ b/phpunit/class-wp-duotone-test.php
@@ -0,0 +1,92 @@
+ 'core/image',
+ 'attrs' => array( 'style' => array( 'color' => array( 'duotone' => 'var:preset|duotone|blue-orange' ) ) ),
+ );
+ $block_content = '<\\/figure>/';
+ $this->assertMatchesRegularExpression( $expected, WP_Duotone_Gutenberg::render_duotone_support( $block_content, $block ) );
+ }
+
+ public function test_gutenberg_render_duotone_support_custom() {
+ $block = array(
+ 'blockName' => 'core/image',
+ 'attrs' => array( 'style' => array( 'color' => array( 'duotone' => array( '#FFFFFF', '#000000' ) ) ) ),
+ );
+ $block_content = '<\\/figure>/';
+ $this->assertMatchesRegularExpression( $expected, WP_Duotone_Gutenberg::render_duotone_support( $block_content, $block ) );
+ }
+
+ public function data_gutenberg_get_slug_from_attr() {
+ return array(
+ 'pipe-slug' => array( 'var:preset|duotone|blue-orange', 'blue-orange' ),
+ 'css-var' => array( 'var(--wp--preset--duotone--blue-orange)', 'blue-orange' ),
+ 'css-var-invalid-slug-chars' => array( 'var(--wp--preset--duotone--.)', '.' ),
+ 'css-var-missing-end-parenthesis' => array( 'var(--wp--preset--duotone--blue-orange', '' ),
+ 'invalid' => array( 'not a valid attribute', '' ),
+ 'css-var-no-value' => array( 'var(--wp--preset--duotone--)', '' ),
+ 'pipe-slug-no-value' => array( 'var:preset|duotone|', '' ),
+ 'css-var-spaces' => array( 'var(--wp--preset--duotone-- ', '' ),
+ 'pipe-slug-spaces' => array( 'var:preset|duotone| ', '' ),
+ );
+ }
+
+ /**
+ * @dataProvider data_gutenberg_get_slug_from_attr
+ */
+ public function test_gutenberg_get_slug_from_attr( $data_attr, $expected ) {
+
+ $reflection = new ReflectionMethod( 'WP_Duotone_Gutenberg', 'gutenberg_get_slug_from_attr' );
+ $reflection->setAccessible( true );
+
+ $this->assertSame( $expected, $reflection->invoke( null, $data_attr ) );
+ }
+
+ public function data_is_preset() {
+ return array(
+ 'pipe-slug' => array( 'var:preset|duotone|blue-orange', true ),
+ 'css-var' => array( 'var(--wp--preset--duotone--blue-orange)', true ),
+ 'css-var-invalid-slug-chars' => array( 'var(--wp--preset--duotone--.)', false ),
+ 'css-var-missing-end-parenthesis' => array( 'var(--wp--preset--duotone--blue-orange', false ),
+ 'invalid' => array( 'not a valid attribute', false ),
+ );
+ }
+
+ /**
+ * @dataProvider data_is_preset
+ */
+ public function test_is_preset( $data_attr, $expected ) {
+ $reflection = new ReflectionMethod( 'WP_Duotone_Gutenberg', 'is_preset' );
+ $reflection->setAccessible( true );
+
+ $this->assertSame( $expected, $reflection->invoke( null, $data_attr ) );
+ }
+}
diff --git a/readme.txt b/readme.txt
index c87aff308e1c52..9a21c99105dcd1 100644
--- a/readme.txt
+++ b/readme.txt
@@ -47,6 +47,12 @@ The best place to report bugs, feature suggestions, or any other feedback is at
While we try to triage issues reported here on the plugin forum, you’ll get a faster response (and reduce duplication of effort) by keeping feedback centralized in GitHub.
+= Where can I report security bugs? =
+
+The Gutenberg team and WordPress community take security bugs seriously. We appreciate your efforts to responsibly disclose your findings, and will make every effort to acknowledge your contributions.
+
+To report a security issue, please visit the [WordPress HackerOne](https://hackerone.com/wordpress) program.
+
= Do I have to use the Gutenberg plugin to get access to these features? =
Not necessarily. Each version of WordPress after 5.0 has included features from the Gutenberg plugin, which are known collectively as the WordPress Editor. You are likely already benefitting from stable features!
diff --git a/schemas/json/theme.json b/schemas/json/theme.json
index 0458e587a909f2..7d76be637ab83d 100644
--- a/schemas/json/theme.json
+++ b/schemas/json/theme.json
@@ -74,6 +74,11 @@
"description": "Settings related to shadows.",
"type": "object",
"properties": {
+ "defaultPresets": {
+ "description": "Allow users to choose shadows from the default shadow presets.",
+ "type": "boolean",
+ "default": true
+ },
"presets": {
"description": "Shadow presets for the shadow picker.\nGenerates a single custom property (`--wp--preset--shadow--{slug}`) per preset value.",
"type": "array",
@@ -97,7 +102,8 @@
"additionalProperties": false
}
}
- }
+ },
+ "additionalProperties": false
}
}
},
@@ -1654,6 +1660,12 @@
},
":visited": {
"$ref": "#/definitions/stylesPropertiesComplete"
+ },
+ ":link": {
+ "$ref": "#/definitions/stylesPropertiesComplete"
+ },
+ ":any-link": {
+ "$ref": "#/definitions/stylesPropertiesComplete"
}
},
"additionalProperties": false
@@ -1683,6 +1695,12 @@
},
":visited": {
"$ref": "#/definitions/stylesPropertiesComplete"
+ },
+ ":link": {
+ "$ref": "#/definitions/stylesPropertiesComplete"
+ },
+ ":any-link": {
+ "$ref": "#/definitions/stylesPropertiesComplete"
}
},
"additionalProperties": false
diff --git a/storybook/decorators/with-rtl.js b/storybook/decorators/with-rtl.js
index 2a2a8cb8f0da53..3eab5a7c39e230 100644
--- a/storybook/decorators/with-rtl.js
+++ b/storybook/decorators/with-rtl.js
@@ -12,8 +12,7 @@ import {
/**
* Internal dependencies
*/
-import ltrStyles from '../style-ltr.lazy.scss';
-import rtlStyles from '../style-rtl.lazy.scss';
+import CONFIG from '../package-styles/config';
export const WithRTL = ( Story, context ) => {
const [ rerenderKey, setRerenderKey ] = useState( 0 );
@@ -43,17 +42,20 @@ export const WithRTL = ( Story, context ) => {
}, [ context.globals.direction ] );
useLayoutEffect( () => {
- if ( context.globals.direction === 'rtl' ) {
- rtlStyles.use();
- } else {
- ltrStyles.use();
- }
+ const stylesToUse = [];
+
+ CONFIG.forEach( ( item ) => {
+ if ( item.componentIdMatcher.test( context.componentId ) ) {
+ stylesToUse.push( ...item[ context.globals.direction ] );
+ }
+ } );
+
+ stylesToUse.forEach( ( style ) => style.use() );
return () => {
- ltrStyles.unuse();
- rtlStyles.unuse();
+ stylesToUse.forEach( ( style ) => style.unuse() );
};
- }, [ context.globals.direction ] );
+ }, [ context.componentId, context.globals.direction ] );
return (
diff --git a/storybook/package-styles/block-editor-ltr.lazy.scss b/storybook/package-styles/block-editor-ltr.lazy.scss
new file mode 100644
index 00000000000000..4a84559461387f
--- /dev/null
+++ b/storybook/package-styles/block-editor-ltr.lazy.scss
@@ -0,0 +1 @@
+@import "../../packages/block-editor/build-style/style";
diff --git a/storybook/package-styles/block-editor-rtl.lazy.scss b/storybook/package-styles/block-editor-rtl.lazy.scss
new file mode 100644
index 00000000000000..d8eacb3d25b585
--- /dev/null
+++ b/storybook/package-styles/block-editor-rtl.lazy.scss
@@ -0,0 +1 @@
+@import "../../packages/block-editor/build-style/style-rtl";
diff --git a/storybook/package-styles/block-library-ltr.lazy.scss b/storybook/package-styles/block-library-ltr.lazy.scss
new file mode 100644
index 00000000000000..a5e373b1c061cd
--- /dev/null
+++ b/storybook/package-styles/block-library-ltr.lazy.scss
@@ -0,0 +1,3 @@
+@import "../../packages/block-library/build-style/style";
+@import "../../packages/block-library/build-style/theme";
+@import "../../packages/block-library/build-style/editor";
diff --git a/storybook/package-styles/block-library-rtl.lazy.scss b/storybook/package-styles/block-library-rtl.lazy.scss
new file mode 100644
index 00000000000000..de83f997385539
--- /dev/null
+++ b/storybook/package-styles/block-library-rtl.lazy.scss
@@ -0,0 +1,3 @@
+@import "../../packages/block-library/build-style/style-rtl";
+@import "../../packages/block-library/build-style/theme-rtl";
+@import "../../packages/block-library/build-style/editor-rtl";
diff --git a/storybook/package-styles/components-ltr.lazy.scss b/storybook/package-styles/components-ltr.lazy.scss
new file mode 100644
index 00000000000000..e7891f25026c4c
--- /dev/null
+++ b/storybook/package-styles/components-ltr.lazy.scss
@@ -0,0 +1 @@
+@import "../../packages/components/build-style/style";
diff --git a/storybook/package-styles/components-rtl.lazy.scss b/storybook/package-styles/components-rtl.lazy.scss
new file mode 100644
index 00000000000000..6cba6edf353da5
--- /dev/null
+++ b/storybook/package-styles/components-rtl.lazy.scss
@@ -0,0 +1 @@
+@import "../../packages/components/build-style/style-rtl";
diff --git a/storybook/package-styles/config.js b/storybook/package-styles/config.js
new file mode 100644
index 00000000000000..b78cb29b5ba458
--- /dev/null
+++ b/storybook/package-styles/config.js
@@ -0,0 +1,49 @@
+/**
+ * Internal dependencies
+ */
+import blockEditorLtr from '../package-styles/block-editor-ltr.lazy.scss';
+import blockEditorRtl from '../package-styles/block-editor-rtl.lazy.scss';
+import blockLibraryLtr from '../package-styles/block-library-ltr.lazy.scss';
+import blockLibraryRtl from '../package-styles/block-library-rtl.lazy.scss';
+import componentsLtr from '../package-styles/components-ltr.lazy.scss';
+import componentsRtl from '../package-styles/components-rtl.lazy.scss';
+import formatLibraryLtr from '../package-styles/format-library-ltr.lazy.scss';
+import formatLibraryRtl from '../package-styles/format-library-rtl.lazy.scss';
+
+/**
+ * Stylesheets to lazy load when the story's context.componentId matches the
+ * componentIdMatcher regex.
+ *
+ * To prevent problematically overscoped styles in a package stylesheet
+ * from leaking into stories for other packages, we should explicitly declare
+ * stylesheet dependencies for each story group.
+ */
+const CONFIG = [
+ {
+ componentIdMatcher: /^playground-/,
+ ltr: [
+ componentsLtr,
+ blockEditorLtr,
+ blockLibraryLtr,
+ formatLibraryLtr,
+ ],
+ rtl: [
+ componentsRtl,
+ blockEditorRtl,
+ blockLibraryRtl,
+ formatLibraryRtl,
+ ],
+ },
+ {
+ componentIdMatcher: /^blockeditor-/,
+ ltr: [ componentsLtr, blockEditorLtr ],
+ rtl: [ componentsRtl, blockEditorRtl ],
+ },
+ {
+ componentIdMatcher: /^components-/,
+ ltr: [ componentsLtr ],
+ rtl: [ componentsRtl ],
+ },
+];
+
+export default CONFIG;
diff --git a/storybook/package-styles/format-library-ltr.lazy.scss b/storybook/package-styles/format-library-ltr.lazy.scss
new file mode 100644
index 00000000000000..0f7db59c5d5dfb
--- /dev/null
+++ b/storybook/package-styles/format-library-ltr.lazy.scss
@@ -0,0 +1 @@
+@import "../../packages/format-library/build-style/style";
diff --git a/storybook/package-styles/format-library-rtl.lazy.scss b/storybook/package-styles/format-library-rtl.lazy.scss
new file mode 100644
index 00000000000000..de2553bb5efa20
--- /dev/null
+++ b/storybook/package-styles/format-library-rtl.lazy.scss
@@ -0,0 +1 @@
+@import "../../packages/format-library/build-style/style-rtl";
diff --git a/storybook/style-ltr.lazy.scss b/storybook/style-ltr.lazy.scss
deleted file mode 100644
index a799679206e50d..00000000000000
--- a/storybook/style-ltr.lazy.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-// @wordpress package styles (ltr)
-@import "../packages/components/build-style/style";
-@import "../packages/block-editor/build-style/style";
-@import "../packages/block-library/build-style/style";
-@import "../packages/block-library/build-style/theme";
-@import "../packages/block-library/build-style/editor";
-@import "../packages/format-library/build-style/style";
diff --git a/storybook/style-rtl.lazy.scss b/storybook/style-rtl.lazy.scss
deleted file mode 100644
index 0aae79416b079a..00000000000000
--- a/storybook/style-rtl.lazy.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-// @wordpress package styles (rtl)
-@import "../packages/components/build-style/style-rtl";
-@import "../packages/block-editor/build-style/style-rtl";
-@import "../packages/block-library/build-style/style-rtl";
-@import "../packages/block-library/build-style/theme-rtl";
-@import "../packages/block-library/build-style/editor-rtl";
-@import "../packages/format-library/build-style/style-rtl";
diff --git a/test/e2e/specs/site-editor/title.spec.js b/test/e2e/specs/site-editor/title.spec.js
index e194e90449160c..fada3fbe41e1ef 100644
--- a/test/e2e/specs/site-editor/title.spec.js
+++ b/test/e2e/specs/site-editor/title.spec.js
@@ -15,14 +15,13 @@ test.describe( 'Site editor title', () => {
test( 'displays the selected template name in the title for the index template', async ( {
admin,
page,
- editor,
} ) => {
// Navigate to a template.
await admin.visitSiteEditor( {
postId: 'emptytheme//index',
postType: 'wp_template',
+ canvas: 'edit',
} );
- await editor.canvas.click( 'body' );
const title = page.locator(
'role=region[name="Editor top bar"i] >> role=heading[level=1]'
);
@@ -33,14 +32,13 @@ test.describe( 'Site editor title', () => {
test( 'displays the selected template name in the title for the header template', async ( {
admin,
page,
- editor,
} ) => {
// Navigate to a template part.
await admin.visitSiteEditor( {
postId: 'emptytheme//header',
postType: 'wp_template_part',
+ canvas: 'edit',
} );
- await editor.canvas.click( 'body' );
const title = page.locator(
'role=region[name="Editor top bar"i] >> role=heading[level=1]'
);
@@ -51,13 +49,12 @@ test.describe( 'Site editor title', () => {
test( "displays the selected template part's name in the secondary title when a template part is selected from List View", async ( {
admin,
page,
- editor,
} ) => {
await admin.visitSiteEditor( {
postId: 'emptytheme//index',
postType: 'wp_template',
+ canvas: 'edit',
} );
- await editor.canvas.click( 'body' );
// Select the header template part via list view.
await page.click( 'role=button[name="List View"i]' );
const listView = page.locator(
diff --git a/test/integration/fixtures/blocks/core__media-text.html b/test/integration/fixtures/blocks/core__media-text.html
index 8c05e44479a5ab..52ed3cb3c8a496 100644
--- a/test/integration/fixtures/blocks/core__media-text.html
+++ b/test/integration/fixtures/blocks/core__media-text.html
@@ -1,5 +1,5 @@
-
+
diff --git a/test/integration/fixtures/blocks/core__media-text.json b/test/integration/fixtures/blocks/core__media-text.json
index 99158c68ba3371..fc7601b7073d6a 100644
--- a/test/integration/fixtures/blocks/core__media-text.json
+++ b/test/integration/fixtures/blocks/core__media-text.json
@@ -3,7 +3,7 @@
"name": "core/media-text",
"isValid": true,
"attributes": {
- "align": "wide",
+ "align": "none",
"mediaAlt": "",
"mediaPosition": "left",
"mediaUrl": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=",
diff --git a/test/integration/fixtures/blocks/core__media-text.parsed.json b/test/integration/fixtures/blocks/core__media-text.parsed.json
index 84a992af2abc86..c7876c627eef07 100644
--- a/test/integration/fixtures/blocks/core__media-text.parsed.json
+++ b/test/integration/fixtures/blocks/core__media-text.parsed.json
@@ -18,9 +18,9 @@
]
}
],
- "innerHTML": "\n
\n\t\n\t\t![\"\"/](\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\")
\n\t \n\t
\n",
+ "innerHTML": "\n\n\t\t\n\t
\n\n\t\n\t\t\n\t \n\t
\n",
"innerContent": [
- "\n\n\t\t\n\t
\n\n\t\n\t\t\n\t \n\t
\n\t\t",
+ "\n
\n\t\n\t\t\n\t \n\t
\n"
]
diff --git a/test/integration/fixtures/blocks/core__media-text.serialized.html b/test/integration/fixtures/blocks/core__media-text.serialized.html
index 3a0190e7eeb8e7..eae92996876bf9 100644
--- a/test/integration/fixtures/blocks/core__media-text.serialized.html
+++ b/test/integration/fixtures/blocks/core__media-text.serialized.html
@@ -1,5 +1,5 @@
-\n\t\t",
null,
"\n\t
\n
+
My Content
My Content
+
+
+
+
+
diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v6-wide-default-align.json b/test/integration/fixtures/blocks/core__media-text__deprecated-v6-wide-default-align.json
new file mode 100644
index 00000000000000..bbe1bf7fc90ded
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v6-wide-default-align.json
@@ -0,0 +1,28 @@
+[
+ {
+ "name": "core/media-text",
+ "isValid": true,
+ "attributes": {
+ "align": "wide",
+ "mediaAlt": "",
+ "mediaPosition": "left",
+ "mediaType": "image",
+ "mediaWidth": 50,
+ "isStackedOnMobile": true,
+ "mediaUrl": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k="
+ },
+ "innerBlocks": [
+ {
+ "name": "core/paragraph",
+ "isValid": true,
+ "attributes": {
+ "content": "My Content",
+ "dropCap": false,
+ "placeholder": "Content…",
+ "fontSize": "large"
+ },
+ "innerBlocks": []
+ }
+ ]
+ }
+]
diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v6-wide-default-align.parsed.json b/test/integration/fixtures/blocks/core__media-text__deprecated-v6-wide-default-align.parsed.json
new file mode 100644
index 00000000000000..84a992af2abc86
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v6-wide-default-align.parsed.json
@@ -0,0 +1,28 @@
+[
+ {
+ "blockName": "core/media-text",
+ "attrs": {
+ "mediaType": "image"
+ },
+ "innerBlocks": [
+ {
+ "blockName": "core/paragraph",
+ "attrs": {
+ "placeholder": "Content…",
+ "fontSize": "large"
+ },
+ "innerBlocks": [],
+ "innerHTML": "\n\t\t
+
+
+
+My Content
+ +My Content
\n\t\t", + "innerContent": [ + "\n\t\tMy Content
\n\t\t" + ] + } + ], + "innerHTML": "\n\n\t\n\t\t\n\t \n\t
\n",
+ "innerContent": [
+ "\n\n\t\t\n\t
\n\n\t\n\t\t\n\t \n\t
\n"
+ ]
+ }
+]
diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v6-wide-default-align.serialized.html b/test/integration/fixtures/blocks/core__media-text__deprecated-v6-wide-default-align.serialized.html
new file mode 100644
index 00000000000000..aa018a73342161
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v6-wide-default-align.serialized.html
@@ -0,0 +1,5 @@
+
+\n\t\t",
+ null,
+ "\n\t
\n
+
My Content
+Content
My Content
My Content
My Content
My content
My Content