@wordpress/block-editor 12.18.1 → 12.18.2

package/src/components/url-popover/link-viewer.js

@@ -41,6 +41,7 @@ export default function LinkViewer( {
 					icon={ edit }
 					label={ __( 'Edit' ) }
 					onClick={ onEditLinkClick }
+					size="compact"
 				/>
 			) }
 		</div>

package/src/components/url-popover/style.scss

@@ -1,53 +1,39 @@
 .block-editor-url-popover__additional-controls {
-	border-top: $border-width solid $gray-300;
+	border-top: $border-width solid $gray-900;
+	padding: $grid-unit-10 $grid-unit-10;
 }
 
-.block-editor-url-popover__additional-controls > div[role="menu"] .components-button:not(:disabled):not([aria-disabled="true"]):not(.is-secondary) > svg {
-	box-shadow: none;
-}
-
-.block-editor-url-popover__additional-controls div[role="menu"] > .components-button {
-	padding-left: $grid-unit-15;
+.block-editor-url-popover__input-container {
+	padding: $grid-unit-10;
+	padding-left: $grid-unit-20;
 }
 
 .block-editor-url-popover__row {
 	display: flex;
+	gap: $grid-unit-05;
 }
 
 // Any children of the popover-row that are not the settings-toggle
 // should take up as much space as possible.
 .block-editor-url-popover__row > :not(.block-editor-url-popover__settings-toggle) {
 	flex-grow: 1;
+	gap: $grid-unit-05;
 }
 
-// Mimic toolbar component styles for the icons in this popover.
-.block-editor-url-popover .components-button.has-icon {
-	padding: 3px;
+.block-editor-url-popover__additional-controls .components-button.has-icon {
+	padding-left: $grid-unit-10;
+	padding-right: $grid-unit-10;
+	height: auto;
+	text-align: left;
 
 	> svg {
-		padding: 5px;
-		border-radius: $radius-block-ui;
-		height: 30px;
-		width: 30px;
-	}
-
-	&:not(:disabled):focus {
-		box-shadow: none;
-
-		> svg {
-			@include block-toolbar-button-style__focus();
-		}
+		margin-right: $grid-unit-10;
 	}
 }
 
 .block-editor-url-popover__settings-toggle {
 	flex-shrink: 0;
 
-	// Add a left divider to the toggle button.
-	border-radius: 0;
-	border-left: $border-width solid $gray-300;
-	margin-left: 1px;
-
 	&[aria-expanded="true"] .dashicon {
 		transform: rotate(180deg);
 	}
@@ -56,7 +42,7 @@
 .block-editor-url-popover__settings {
 	display: block;
 	padding: $grid-unit-20;
-	border-top: $border-width solid $gray-300;
+	border-top: $border-width solid $gray-900;
 }
 
 .block-editor-url-popover__link-editor,
@@ -65,16 +51,50 @@
 }
 
 .block-editor-url-popover__link-viewer-url {
-	margin: $grid-unit-10 - $border-width;
+	display: flex;
+	align-items: center;
 	flex-grow: 1;
 	flex-shrink: 1;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
-	min-width: 150px;
-	max-width: 500px;
+	margin-right: $grid-unit-10;
 
 	&.has-invalid-link {
 		color: $alert-red;
 	}
 }
+
+.block-editor-url-popover__expand-on-click {
+	display: flex;
+	align-items: center;
+	min-width: $modal-min-width;
+	overflow: hidden;
+	white-space: nowrap;
+
+	.fullscreen-icon {
+		padding-right: $grid-unit-05;
+
+		> svg {
+			width: $icon-size;
+			height: $icon-size;
+		}
+	}
+
+	.text {
+		flex-grow: 1;
+
+		p {
+			margin: 0;
+		}
+	}
+
+	.description {
+		color: $gray-600;
+	}
+
+	.remove-link {
+		margin-right: $grid-unit-10;
+	}
+
+}

package/src/hooks/index.js

@@ -71,7 +71,7 @@ createBlockSaveFilter( [
 export { useCustomSides } from './dimensions';
 export { useLayoutClasses, useLayoutStyles } from './layout';
 export { getBorderClassesAndStyles, useBorderProps } from './use-border-props';
-export { getShadowClassesAndStyles, useShadowProps } from './use-shadow-props';
+export { getShadowClassesAndStyles } from './use-shadow-props';
 export { getColorClassesAndStyles, useColorProps } from './use-color-props';
 export { getSpacingClassesAndStyles } from './use-spacing-props';
 export { getTypographyClassesAndStyles } from './use-typography-props';

package/src/hooks/index.native.js

@@ -28,7 +28,7 @@ createBlockSaveFilter( [
 ] );
 
 export { getBorderClassesAndStyles, useBorderProps } from './use-border-props';
-export { getShadowClassesAndStyles, useShadowProps } from './use-shadow-props';
+export { getShadowClassesAndStyles } from './use-shadow-props';
 export { getColorClassesAndStyles, useColorProps } from './use-color-props';
 export { getSpacingClassesAndStyles } from './use-spacing-props';
 export { useCachedTruthy } from './use-cached-truthy';

package/src/hooks/use-bindings-attributes.js

@@ -44,7 +44,7 @@ const createEditFunctionWithBindingsAttribute = () =>
 				Object.entries( updatedAttributes.metadata.bindings ).forEach(
 					( [ attributeName, settings ] ) => {
 						const source = getBlockBindingsSource(
-							settings.source.name
+							settings.source
 						);
 
 						if ( source ) {
@@ -52,10 +52,7 @@ const createEditFunctionWithBindingsAttribute = () =>
 							const {
 								placeholder,
 								useValue: [ metaValue = null ] = [],
-							} = source.useSource(
-								props,
-								settings.source.attributes
-							);
+							} = source.useSource( props, settings.args );
 
 							if ( placeholder && ! metaValue ) {
 								// If the attribute is `src` or `href`, a placeholder can't be used because it is not a valid url.

package/src/hooks/use-shadow-props.js

@@ -18,20 +18,6 @@ export function getShadowClassesAndStyles( attributes ) {
 	const shadow = attributes.style?.shadow || '';
 
 	return {
-		className: undefined,
 		style: getInlineStyles( { shadow } ),
 	};
 }
-
-/**
- * Derives the shadow related props for a block from its shadow block support
- * attributes.
- *
- * @param {Object} attributes Block attributes.
- *
- * @return {Object} ClassName & style props from shadow block support.
- */
-export function useShadowProps( attributes ) {
-	const shadowProps = getShadowClassesAndStyles( attributes );
-	return shadowProps;
-}

package/src/hooks/utils.js

@@ -177,10 +177,7 @@ export function useBlockSettings( name, parentLayout ) {
 		backgroundImage,
 		backgroundSize,
 		fontFamilies,
-		userFontSizes,
-		themeFontSizes,
-		defaultFontSizes,
-		defaultFontSizesEnabled,
+		fontSizes,
 		customFontSize,
 		fontStyle,
 		fontWeight,
@@ -227,10 +224,7 @@ export function useBlockSettings( name, parentLayout ) {
 		'background.backgroundImage',
 		'background.backgroundSize',
 		'typography.fontFamilies',
-		'typography.fontSizes.custom',
-		'typography.fontSizes.theme',
-		'typography.fontSizes.default',
-		'typography.defaultFontSizes',
+		'typography.fontSizes',
 		'typography.customFontSize',
 		'typography.fontStyle',
 		'typography.fontWeight',
@@ -314,12 +308,9 @@ export function useBlockSettings( name, parentLayout ) {
 					custom: fontFamilies,
 				},
 				fontSizes: {
-					custom: userFontSizes,
-					theme: themeFontSizes,
-					default: defaultFontSizes,
+					custom: fontSizes,
 				},
 				customFontSize,
-				defaultFontSizes: defaultFontSizesEnabled,
 				fontStyle,
 				fontWeight,
 				lineHeight,
@@ -356,10 +347,7 @@ export function useBlockSettings( name, parentLayout ) {
 		backgroundImage,
 		backgroundSize,
 		fontFamilies,
-		userFontSizes,
-		themeFontSizes,
-		defaultFontSizes,
-		defaultFontSizesEnabled,
+		fontSizes,
 		customFontSize,
 		fontStyle,
 		fontWeight,

package/src/index.js

@@ -12,7 +12,6 @@ export {
 	getSpacingClassesAndStyles as __experimentalGetSpacingClassesAndStyles,
 	getGapCSSValue as __experimentalGetGapCSSValue,
 	getShadowClassesAndStyles as __experimentalGetShadowClassesAndStyles,
-	useShadowProps as __experimentalUseShadowProps,
 	useCachedTruthy,
 } from './hooks';
 export * from './components';

package/src/utils/object.js

@@ -49,19 +49,3 @@ export const getValueFromObjectPath = ( object, path, defaultValue ) => {
 	} );
 	return value ?? defaultValue;
 };
-
-/**
- * Helper util to filter out objects with duplicate values for a given property.
- *
- * @param {Object[]} array    Array of objects to filter.
- * @param {string}   property Property to filter unique values by.
- *
- * @return {Object[]} Array of objects with unique values for the specified property.
- */
-export function uniqByProperty( array, property ) {
-	const seen = new Set();
-	return array.filter( ( item ) => {
-		const value = item[ property ];
-		return seen.has( value ) ? false : seen.add( value );
-	} );
-}