@wordpress/edit-site 4.3.2 → 4.4.0

package/build-style/style.css

@@ -1542,6 +1542,7 @@ body.is-fullscreen-mode .edit-site-list-header {
   padding: 16px;
 }
 
+.edit-site-navigation-sidebar__beta,
 .edit-site-global-styles-sidebar__beta {
   display: inline-flex;
   margin-left: 8px;
@@ -1555,6 +1556,44 @@ body.is-fullscreen-mode .edit-site-list-header {
   line-height: 1;
 }
 
+.edit-site-global-styles-sidebar__border-box-control__popover .components-popover__content,
+.edit-site-global-styles-sidebar__border-box-control__popover-top .components-popover__content,
+.edit-site-global-styles-sidebar__border-box-control__popover-right .components-popover__content,
+.edit-site-global-styles-sidebar__border-box-control__popover-bottom .components-popover__content,
+.edit-site-global-styles-sidebar__border-box-control__popover-left .components-popover__content {
+  width: 282px;
+}
+
+@media (min-width: 782px) {
+  .edit-site-global-styles-sidebar__border-box-control__popover .components-popover__content,
+.edit-site-global-styles-sidebar__border-box-control__popover-left .components-popover__content {
+    margin-right: 52px !important;
+  }
+
+  .edit-site-global-styles-sidebar__border-box-control__popover-top .components-popover__content,
+.edit-site-global-styles-sidebar__border-box-control__popover-bottom .components-popover__content {
+    margin-right: 107px !important;
+  }
+
+  .edit-site-global-styles-sidebar__border-box-control__popover-right .components-popover__content {
+    margin-right: 162px !important;
+  }
+
+  .edit-site-global-styles-sidebar__border-box-control__popover.is-from-top .components-popover__content,
+.edit-site-global-styles-sidebar__border-box-control__popover-top.is-from-top .components-popover__content,
+.edit-site-global-styles-sidebar__border-box-control__popover-right.is-from-top .components-popover__content,
+.edit-site-global-styles-sidebar__border-box-control__popover-bottom.is-from-top .components-popover__content,
+.edit-site-global-styles-sidebar__border-box-control__popover-left.is-from-top .components-popover__content {
+    margin-top: -52px !important;
+  }
+  .edit-site-global-styles-sidebar__border-box-control__popover.is-from-bottom .components-popover__content,
+.edit-site-global-styles-sidebar__border-box-control__popover-top.is-from-bottom .components-popover__content,
+.edit-site-global-styles-sidebar__border-box-control__popover-right.is-from-bottom .components-popover__content,
+.edit-site-global-styles-sidebar__border-box-control__popover-bottom.is-from-bottom .components-popover__content,
+.edit-site-global-styles-sidebar__border-box-control__popover-left.is-from-bottom .components-popover__content {
+    margin-bottom: -52px !important;
+  }
+}
 .components-panel__header.edit-site-sidebar__panel-tabs {
   justify-content: flex-start;
   padding-left: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "4.3.2",
+	"version": "4.4.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,33 +27,33 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.6.1",
-		"@wordpress/api-fetch": "^6.3.1",
-		"@wordpress/block-editor": "^8.5.2",
-		"@wordpress/block-library": "^7.3.2",
-		"@wordpress/blocks": "^11.5.2",
-		"@wordpress/components": "^19.8.1",
-		"@wordpress/compose": "^5.4.1",
-		"@wordpress/core-data": "^4.4.2",
-		"@wordpress/data": "^6.6.1",
-		"@wordpress/deprecated": "^3.6.1",
-		"@wordpress/editor": "^12.5.2",
-		"@wordpress/element": "^4.4.1",
-		"@wordpress/hooks": "^3.6.1",
-		"@wordpress/html-entities": "^3.6.1",
-		"@wordpress/i18n": "^4.6.1",
-		"@wordpress/icons": "^8.2.1",
-		"@wordpress/interface": "^4.5.1",
-		"@wordpress/keyboard-shortcuts": "^3.4.1",
-		"@wordpress/keycodes": "^3.6.1",
-		"@wordpress/media-utils": "^3.4.1",
-		"@wordpress/notices": "^3.6.1",
-		"@wordpress/plugins": "^4.4.1",
-		"@wordpress/preferences": "^1.2.1",
-		"@wordpress/reusable-blocks": "^3.4.2",
-		"@wordpress/style-engine": "^0.5.1",
-		"@wordpress/url": "^3.7.1",
-		"@wordpress/viewport": "^4.4.1",
+		"@wordpress/a11y": "^3.7.0",
+		"@wordpress/api-fetch": "^6.4.0",
+		"@wordpress/block-editor": "^8.6.0",
+		"@wordpress/block-library": "^7.4.0",
+		"@wordpress/blocks": "^11.6.0",
+		"@wordpress/components": "^19.9.0",
+		"@wordpress/compose": "^5.5.0",
+		"@wordpress/core-data": "^4.5.0",
+		"@wordpress/data": "^6.7.0",
+		"@wordpress/deprecated": "^3.7.0",
+		"@wordpress/editor": "^12.6.0",
+		"@wordpress/element": "^4.5.0",
+		"@wordpress/hooks": "^3.7.0",
+		"@wordpress/html-entities": "^3.7.0",
+		"@wordpress/i18n": "^4.7.0",
+		"@wordpress/icons": "^8.3.0",
+		"@wordpress/interface": "^4.6.0",
+		"@wordpress/keyboard-shortcuts": "^3.5.0",
+		"@wordpress/keycodes": "^3.7.0",
+		"@wordpress/media-utils": "^3.5.0",
+		"@wordpress/notices": "^3.7.0",
+		"@wordpress/plugins": "^4.5.0",
+		"@wordpress/preferences": "^1.3.0",
+		"@wordpress/reusable-blocks": "^3.5.0",
+		"@wordpress/style-engine": "^0.6.0",
+		"@wordpress/url": "^3.8.0",
+		"@wordpress/viewport": "^4.5.0",
 		"classnames": "^2.3.1",
 		"downloadjs": "^1.4.7",
 		"history": "^5.1.0",
@@ -68,5 +68,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "446565ecaa40370173c18926535e975ec5652b71"
+	"gitHead": "1ba52312b56db563df2d8d4fba5b00613fb46d8c"
 }

package/src/components/block-editor/resizable-editor.js

@@ -36,7 +36,7 @@ const HANDLE_STYLES_OVERRIDE = {
 	left: undefined,
 };
 
-function ResizableEditor( { enableResizing, settings, ...props } ) {
+function ResizableEditor( { enableResizing, settings, children, ...props } ) {
 	const deviceType = useSelect(
 		( select ) =>
 			select( editSiteStore ).__experimentalGetPreviewDeviceType(),
@@ -182,7 +182,11 @@ function ResizableEditor( { enableResizing, settings, ...props } ) {
 				name="editor-canvas"
 				className="edit-site-visual-editor__editor-canvas"
 				{ ...props }
-			/>
+			>
+				{ /* Filters need to be rendered before children to avoid Safari rendering issues. */ }
+				{ settings.svgFilters }
+				{ children }
+			</Iframe>
 		</ResizableBox>
 	);
 }

package/src/components/editor/global-styles-renderer.js

@@ -20,7 +20,7 @@ import { store as editSiteStore } from '../../store';
 import { useGlobalStylesOutput } from '../global-styles/use-global-styles-output';
 
 function useGlobalStylesRenderer() {
-	const [ styles, settings ] = useGlobalStylesOutput();
+	const [ styles, settings, svgFilters ] = useGlobalStylesOutput();
 	const { getSettings } = useSelect( editSiteStore );
 	const { updateSettings } = useDispatch( editSiteStore );
 
@@ -37,6 +37,7 @@ function useGlobalStylesRenderer() {
 		updateSettings( {
 			...currentStoreSettings,
 			styles: [ ...nonGlobalStyles, ...styles ],
+			svgFilters,
 			__experimentalFeatures: settings,
 		} );
 	}, [ styles, settings ] );

package/src/components/global-styles/border-panel.js

@@ -1,17 +1,15 @@
 /**
  * WordPress dependencies
  */
+import { __experimentalBorderRadiusControl as BorderRadiusControl } from '@wordpress/block-editor';
 import {
-	__experimentalBorderRadiusControl as BorderRadiusControl,
-	__experimentalBorderStyleControl as BorderStyleControl,
-	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
-} from '@wordpress/block-editor';
-import {
+	__experimentalBorderBoxControl as BorderBoxControl,
+	__experimentalHasSplitBorders as hasSplitBorders,
+	__experimentalIsDefinedBorder as isDefinedBorder,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
-	__experimentalUnitControl as UnitControl,
-	__experimentalUseCustomUnits as useCustomUnits,
 } from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -24,8 +22,6 @@ import {
 	useStyle,
 } from './hooks';
 
-const MIN_BORDER_WIDTH = 0;
-
 export function useHasBorderPanel( name ) {
 	const controls = [
 		useHasBorderColorControl( name ),
@@ -69,63 +65,45 @@ function useHasBorderWidthControl( name ) {
 	);
 }
 
-export default function BorderPanel( { name } ) {
-	// To better reflect if the user has customized a value we need to
-	// ensure the style value being checked is from the `user` origin.
-	const [ userBorderStyles ] = useStyle( 'border', name, 'user' );
-	const createHasValueCallback = ( feature ) => () =>
-		!! userBorderStyles?.[ feature ];
+function applyFallbackStyle( border ) {
+	if ( ! border ) {
+		return border;
+	}
 
-	const createResetCallback = ( setStyle ) => () => setStyle( undefined );
-
-	const handleOnChange = ( setStyle ) => ( value ) => {
-		setStyle( value || undefined );
-	};
-
-	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units' )[ 0 ] || [
-			'px',
-			'em',
-			'rem',
-		],
-	} );
-
-	// Border width.
-	const showBorderWidth = useHasBorderWidthControl( name );
-	const [ borderWidthValue, setBorderWidth ] = useStyle(
-		'border.width',
-		name
-	);
+	if ( ! border.style && ( border.color || border.width ) ) {
+		return { ...border, style: 'solid' };
+	}
 
-	// Border style.
-	const showBorderStyle = useHasBorderStyleControl( name );
-	const [ borderStyle, setBorderStyle ] = useStyle( 'border.style', name );
+	return border;
+}
 
-	// When we set a border color or width ensure we have a style so the user
-	// can see a visible border.
-	const handleOnChangeWithStyle = ( setStyle ) => ( value ) => {
-		if ( !! value && ! borderStyle ) {
-			setBorderStyle( 'solid' );
-		}
+function applyAllFallbackStyles( border ) {
+	if ( ! border ) {
+		return border;
+	}
+
+	if ( hasSplitBorders( border ) ) {
+		return {
+			top: applyFallbackStyle( border.top ),
+			right: applyFallbackStyle( border.right ),
+			bottom: applyFallbackStyle( border.bottom ),
+			left: applyFallbackStyle( border.left ),
+		};
+	}
+
+	return applyFallbackStyle( border );
+}
 
-		setStyle( value || undefined );
-	};
+export default function BorderPanel( { name } ) {
+	// To better reflect if the user has customized a value we need to
+	// ensure the style value being checked is from the `user` origin.
+	const [ userBorderStyles ] = useStyle( 'border', name, 'user' );
+	const [ border, setBorder ] = useStyle( 'border', name );
+	const colors = useColorsPerOrigin( name );
 
-	// Border color.
 	const showBorderColor = useHasBorderColorControl( name );
-	const [ borderColor, setBorderColor ] = useStyle( 'border.color', name );
-	const disableCustomColors = ! useSetting( 'color.custom' )[ 0 ];
-	const disableCustomGradients = ! useSetting( 'color.customGradient' )[ 0 ];
-
-	const borderColorSettings = [
-		{
-			label: __( 'Color' ),
-			colors: useColorsPerOrigin( name ),
-			colorValue: borderColor,
-			onColorChange: handleOnChangeWithStyle( setBorderColor ),
-			clearable: false,
-		},
-	];
+	const showBorderStyle = useHasBorderStyleControl( name );
+	const showBorderWidth = useHasBorderWidthControl( name );
 
 	// Border radius.
 	const showBorderRadius = useHasBorderRadiusControl( name );
@@ -141,60 +119,83 @@ export default function BorderPanel( { name } ) {
 		return !! borderValues;
 	};
 
-	const resetAll = () => {
-		setBorderColor( undefined );
-		setBorderRadius( undefined );
-		setBorderStyle( undefined );
-		setBorderWidth( undefined );
+	const resetBorder = () => {
+		if ( hasBorderRadius() ) {
+			return setBorder( { radius: userBorderStyles.radius } );
+		}
+
+		setBorder( undefined );
 	};
 
+	const resetAll = useCallback( () => setBorder( undefined ), [ setBorder ] );
+	const onBorderChange = useCallback(
+		( newBorder ) => {
+			// Ensure we have a visible border style when a border width or
+			// color is being selected.
+			const newBorderWithStyle = applyAllFallbackStyles( newBorder );
+
+			// As we can't conditionally generate styles based on if other
+			// style properties have been set we need to force split border
+			// definitions for user set border styles. Border radius is derived
+			// from the same property i.e. `border.radius` if it is a string
+			// that is used. The longhand border radii styles are only generated
+			// if that property is an object.
+			//
+			// For borders (color, style, and width) those are all properties on
+			// the `border` style property. This means if the theme.json defined
+			// split borders and the user condenses them into a flat border or
+			// vice-versa we'd get both sets of styles which would conflict.
+			const updatedBorder = ! hasSplitBorders( newBorderWithStyle )
+				? {
+						top: newBorderWithStyle,
+						right: newBorderWithStyle,
+						bottom: newBorderWithStyle,
+						left: newBorderWithStyle,
+				  }
+				: {
+						color: null,
+						style: null,
+						width: null,
+						...newBorderWithStyle,
+				  };
+
+			// As radius is maintained separately to color, style, and width
+			// maintain its value. Undefined values here will be cleaned when
+			// global styles are saved.
+			setBorder( { radius: border?.radius, ...updatedBorder } );
+		},
+		[ setBorder ]
+	);
+
 	return (
 		<ToolsPanel label={ __( 'Border' ) } resetAll={ resetAll }>
-			{ showBorderWidth && (
-				<ToolsPanelItem
-					className="single-column"
-					hasValue={ createHasValueCallback( 'width' ) }
-					label={ __( 'Width' ) }
-					onDeselect={ createResetCallback( setBorderWidth ) }
-					isShownByDefault={ true }
-				>
-					<UnitControl
-						value={ borderWidthValue }
-						label={ __( 'Width' ) }
-						min={ MIN_BORDER_WIDTH }
-						onChange={ handleOnChangeWithStyle( setBorderWidth ) }
-						units={ units }
-					/>
-				</ToolsPanelItem>
-			) }
-			{ showBorderStyle && (
-				<ToolsPanelItem
-					className="single-column"
-					hasValue={ createHasValueCallback( 'style' ) }
-					label={ __( 'Style' ) }
-					onDeselect={ createResetCallback( setBorderStyle ) }
-					isShownByDefault={ true }
-				>
-					<BorderStyleControl
-						value={ borderStyle }
-						onChange={ handleOnChange( setBorderStyle ) }
-					/>
-				</ToolsPanelItem>
-			) }
-			{ showBorderColor && (
+			{ ( showBorderWidth || showBorderColor ) && (
 				<ToolsPanelItem
-					hasValue={ createHasValueCallback( 'color' ) }
-					label={ __( 'Color' ) }
-					onDeselect={ createResetCallback( setBorderColor ) }
+					hasValue={ () => isDefinedBorder( userBorderStyles ) }
+					label={ __( 'Border' ) }
+					onDeselect={ () => resetBorder() }
 					isShownByDefault={ true }
 				>
-					<ColorGradientSettingsDropdown
-						__experimentalHasMultipleOrigins
-						__experimentalIsRenderedInSidebar
-						disableCustomColors={ disableCustomColors }
-						disableCustomGradients={ disableCustomGradients }
-						enableAlpha
-						settings={ borderColorSettings }
+					<BorderBoxControl
+						colors={ colors }
+						enableAlpha={ true }
+						onChange={ onBorderChange }
+						showStyle={ showBorderStyle }
+						value={ border }
+						popoverClassNames={ {
+							linked:
+								'edit-site-global-styles-sidebar__border-box-control__popover',
+							top:
+								'edit-site-global-styles-sidebar__border-box-control__popover-top',
+							right:
+								'edit-site-global-styles-sidebar__border-box-control__popover-right',
+							bottom:
+								'edit-site-global-styles-sidebar__border-box-control__popover-bottom',
+							left:
+								'edit-site-global-styles-sidebar__border-box-control__popover-left',
+						} }
+						__experimentalHasMultipleOrigins={ true }
+						__experimentalIsRenderedInSidebar={ true }
 					/>
 				</ToolsPanelItem>
 			) }
@@ -202,12 +203,14 @@ export default function BorderPanel( { name } ) {
 				<ToolsPanelItem
 					hasValue={ hasBorderRadius }
 					label={ __( 'Radius' ) }
-					onDeselect={ createResetCallback( setBorderRadius ) }
+					onDeselect={ () => setBorderRadius( undefined ) }
 					isShownByDefault={ true }
 				>
 					<BorderRadiusControl
 						values={ borderRadiusValues }
-						onChange={ handleOnChange( setBorderRadius ) }
+						onChange={ ( value ) => {
+							setBorderRadius( value || undefined );
+						} }
 					/>
 				</ToolsPanelItem>
 			) }

package/src/components/global-styles/test/use-global-styles-output.js

@@ -377,7 +377,10 @@ describe( 'global styles renderer', () => {
 			};
 
 			expect( toStyles( tree, blockSelectors ) ).toEqual(
-				'.wp-site-blocks > * { margin-top: 0; margin-bottom: 0; }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); }body{background-color: red;margin: 10px;padding: 10px;}h1{font-size: 42px;}.wp-block-group{margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}h1,h2,h3,h4,h5,h6{color: orange;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color: hotpink;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}h1.has-blue-color,h2.has-blue-color,h3.has-blue-color,h4.has-blue-color,h5.has-blue-color,h6.has-blue-color{color: var(--wp--preset--color--blue) !important;}h1.has-blue-background-color,h2.has-blue-background-color,h3.has-blue-background-color,h4.has-blue-background-color,h5.has-blue-background-color,h6.has-blue-background-color{background-color: var(--wp--preset--color--blue) !important;}h1.has-blue-border-color,h2.has-blue-border-color,h3.has-blue-border-color,h4.has-blue-border-color,h5.has-blue-border-color,h6.has-blue-border-color{border-color: var(--wp--preset--color--blue) !important;}'
+				'body {margin: 0;}' +
+					'body{background-color: red;margin: 10px;padding: 10px;}h1{font-size: 42px;}.wp-block-group{margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}h1,h2,h3,h4,h5,h6{color: orange;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color: hotpink;}' +
+					'.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }' +
+					'.has-white-color{color: var(--wp--preset--color--white) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}h1.has-blue-color,h2.has-blue-color,h3.has-blue-color,h4.has-blue-color,h5.has-blue-color,h6.has-blue-color{color: var(--wp--preset--color--blue) !important;}h1.has-blue-background-color,h2.has-blue-background-color,h3.has-blue-background-color,h4.has-blue-background-color,h5.has-blue-background-color,h6.has-blue-background-color{background-color: var(--wp--preset--color--blue) !important;}h1.has-blue-border-color,h2.has-blue-border-color,h3.has-blue-border-color,h4.has-blue-border-color,h5.has-blue-border-color,h6.has-blue-border-color{border-color: var(--wp--preset--color--blue) !important;}'
 			);
 		} );
 	} );