@wordpress/block-editor 9.8.0 → 9.8.1-next.957ca95e4c.0

package/src/hooks/text-decoration.js

@@ -46,6 +46,7 @@ export function TextDecorationEdit( props ) {
 		<TextDecorationControl
 			value={ style?.typography?.textDecoration }
 			onChange={ onChange }
+			size="__unstable-large"
 		/>
 	);
 }

package/src/hooks/text-transform.js

@@ -46,6 +46,7 @@ export function TextTransformEdit( props ) {
 		<TextTransformControl
 			value={ style?.typography?.textTransform }
 			onChange={ onChange }
+			size="__unstable-large"
 		/>
 	);
 }

package/src/hooks/typography.scss

@@ -1,10 +1,4 @@
 .typography-block-support-panel {
-	.components-font-size-picker__controls,
-	.block-editor-text-decoration-control__buttons,
-	.block-editor-text-transform-control__buttons {
-		margin-bottom: 0;
-	}
-
 	.single-column {
 		grid-column: span 1;
 	}

package/src/layouts/constrained.js

@@ -15,7 +15,7 @@ import { getCSSRules } from '@wordpress/style-engine';
  */
 import useSetting from '../components/use-setting';
 import { appendSelectors, getBlockGapCSS, getAlignmentsInfo } from './utils';
-import { getGapBoxControlValueFromStyle } from '../hooks/gap';
+import { getGapCSSValue } from '../hooks/gap';
 import { shouldSkipSerialization } from '../hooks/utils';
 
 export default {
@@ -117,16 +117,19 @@ export default {
 		layoutDefinitions,
 	} ) {
 		const { contentSize, wideSize } = layout;
-		const blockGapStyleValue = getGapBoxControlValueFromStyle(
-			style?.spacing?.blockGap
-		);
+		const blockGapStyleValue = getGapCSSValue( style?.spacing?.blockGap );
+
 		// If a block's block.json skips serialization for spacing or
 		// spacing.blockGap, don't apply the user-defined value to the styles.
-		const blockGapValue =
-			blockGapStyleValue?.top &&
-			! shouldSkipSerialization( blockName, 'spacing', 'blockGap' )
-				? blockGapStyleValue?.top
-				: '';
+		let blockGapValue = '';
+		if ( ! shouldSkipSerialization( blockName, 'spacing', 'blockGap' ) ) {
+			// If an object is provided only use the 'top' value for this kind of gap.
+			if ( blockGapStyleValue?.top ) {
+				blockGapValue = getGapCSSValue( blockGapStyleValue?.top );
+			} else if ( typeof blockGapStyleValue === 'string' ) {
+				blockGapValue = getGapCSSValue( blockGapStyleValue );
+			}
+		}
 
 		let output =
 			!! contentSize || !! wideSize

package/src/layouts/flow.js

@@ -6,9 +6,8 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-
 import { getBlockGapCSS, getAlignmentsInfo } from './utils';
-import { getGapBoxControlValueFromStyle } from '../hooks/gap';
+import { getGapCSSValue } from '../hooks/gap';
 import { shouldSkipSerialization } from '../hooks/utils';
 
 export default {
@@ -27,16 +26,19 @@ export default {
 		hasBlockGapSupport,
 		layoutDefinitions,
 	} ) {
-		const blockGapStyleValue = getGapBoxControlValueFromStyle(
-			style?.spacing?.blockGap
-		);
+		const blockGapStyleValue = getGapCSSValue( style?.spacing?.blockGap );
+
 		// If a block's block.json skips serialization for spacing or
 		// spacing.blockGap, don't apply the user-defined value to the styles.
-		const blockGapValue =
-			blockGapStyleValue?.top &&
-			! shouldSkipSerialization( blockName, 'spacing', 'blockGap' )
-				? blockGapStyleValue?.top
-				: '';
+		let blockGapValue = '';
+		if ( ! shouldSkipSerialization( blockName, 'spacing', 'blockGap' ) ) {
+			// If an object is provided only use the 'top' value for this kind of gap.
+			if ( blockGapStyleValue?.top ) {
+				blockGapValue = getGapCSSValue( blockGapStyleValue?.top );
+			} else if ( typeof blockGapStyleValue === 'string' ) {
+				blockGapValue = getGapCSSValue( blockGapStyleValue );
+			}
+		}
 
 		let output = '';
 

package/src/style.scss

@@ -46,8 +46,6 @@
 @import "./components/responsive-block-control/style.scss";
 @import "./components/rich-text/style.scss";
 @import "./components/skip-to-selected-block/style.scss";
-@import "./components/text-transform-control/style.scss";
-@import "./components/text-decoration-control/style.scss";
 @import "./components/tool-selector/style.scss";
 @import "./components/url-input/style.scss";
 @import "./components/url-popover/style.scss";

package/src/components/text-decoration-control/style.scss

@@ -1,18 +0,0 @@
-.block-editor-text-decoration-control {
-	flex: 0 0 50%;
-
-	legend {
-		margin-bottom: 8px;
-	}
-
-	.block-editor-text-decoration-control__buttons {
-		display: inline-flex;
-		margin-bottom: 24px;
-
-		.components-button.has-icon {
-			min-width: 24px;
-			padding: 0;
-			margin-right: 4px;
-		}
-	}
-}

package/src/components/text-transform-control/style.scss

@@ -1,18 +0,0 @@
-.block-editor-text-transform-control {
-	flex: 0 0 50%;
-
-	legend {
-		margin-bottom: 8px;
-	}
-
-	.block-editor-text-transform-control__buttons {
-		display: inline-flex;
-		margin-bottom: 24px;
-
-		.components-button.has-icon {
-			min-width: 24px;
-			padding: 0;
-			margin-right: 4px;
-		}
-	}
-}