prep build 12/25

packages/block-library/src/gallery/transforms.js

@@ -13,10 +13,6 @@ import {
 	LINK_DESTINATION_NONE,
 	LINK_DESTINATION_MEDIA,
 } from './constants';
-import {
-	LINK_DESTINATION_ATTACHMENT as DEPRECATED_LINK_DESTINATION_ATTACHMENT,
-	LINK_DESTINATION_MEDIA as DEPRECATED_LINK_DESTINATION_MEDIA,
-} from './v1/constants';
 import { pickRelevantMediaFiles, isGalleryV2Enabled } from './shared';
 
 const parseShortcodeIds = ( ids ) => {
@@ -177,56 +173,6 @@ const transforms = {
 		{
 			type: 'shortcode',
 			tag: 'gallery',
-
-			attributes: {
-				images: {
-					type: 'array',
-					shortcode: ( { named: { ids } } ) => {
-						if ( ! isGalleryV2Enabled() ) {
-							return parseShortcodeIds( ids ).map( ( id ) => ( {
-								id: id.toString(),
-							} ) );
-						}
-					},
-				},
-				ids: {
-					type: 'array',
-					shortcode: ( { named: { ids } } ) => {
-						if ( ! isGalleryV2Enabled() ) {
-							return parseShortcodeIds( ids );
-						}
-					},
-				},
-				columns: {
-					type: 'number',
-					shortcode: ( { named: { columns = '3' } } ) => {
-						return parseInt( columns, 10 );
-					},
-				},
-				linkTo: {
-					type: 'string',
-					shortcode: ( { named: { link } } ) => {
-						if ( ! isGalleryV2Enabled() ) {
-							switch ( link ) {
-								case 'post':
-									return DEPRECATED_LINK_DESTINATION_ATTACHMENT;
-								case 'file':
-									return DEPRECATED_LINK_DESTINATION_MEDIA;
-								default:
-									return DEPRECATED_LINK_DESTINATION_ATTACHMENT;
-							}
-						}
-						switch ( link ) {
-							case 'post':
-								return LINK_DESTINATION_ATTACHMENT;
-							case 'file':
-								return LINK_DESTINATION_MEDIA;
-							default:
-								return LINK_DESTINATION_NONE;
-						}
-					},
-				},
-			},
 			transform( { named: { ids, columns = 3, link } } ) {
 				const imageIds = parseShortcodeIds( ids ).map( ( id ) =>
 					parseInt( id, 10 )

packages/components/CHANGELOG.md

@@ -14,13 +14,15 @@
 -   `Snackbar`: Remove erroneous `__unstableHTML` prop from TypeScript definitions ([#57218](https://github.com/WordPress/gutenberg/pull/57218)).
 -   `Truncate`: improve handling of non-string `children` ([#57261](https://github.com/WordPress/gutenberg/pull/57261)).
 -   `PaletteEdit`: Don't discard colors with default name and slug ([#54332](https://github.com/WordPress/gutenberg/pull/54332)).
+-   `RadioControl`: Fully encapsulate styles ([#57347](https://github.com/WordPress/gutenberg/pull/57347)).
 
 ### Enhancements
 
 -   Update `ariakit` to version `0.3.10` ([#57325](https://github.com/WordPress/gutenberg/pull/57325)).
 -   `DropdownMenuV2`: do not collapse suffix width ([#57238](https://github.com/WordPress/gutenberg/pull/57238)).
 -   `DateTimePicker`: Adjustment of the dot position on DayButton and expansion of the button area. ([#55502](https://github.com/WordPress/gutenberg/pull/55502)).
 -   `Modal`: Improve application of body class names ([#55430](https://github.com/WordPress/gutenberg/pull/55430)).
+-   `ToggleGroupControl`: Update button size in large variant to be 32px ([#57338](https://github.com/WordPress/gutenberg/pull/57338)).
 
 ### Experimental
 

packages/components/src/radio-control/index.tsx

@@ -92,7 +92,10 @@ export function RadioControl(
 							}
 							{ ...additionalProps }
 						/>
-						<label htmlFor={ `${ id }-${ index }` }>
+						<label
+							className="components-radio-control__label"
+							htmlFor={ `${ id }-${ index }` }
+						>
 							{ option.label }
 						</label>
 					</div>

packages/components/src/radio-control/style.scss

@@ -1,5 +1,32 @@
+.components-radio-control__option {
+	display: flex;
+	align-items: center;
+}
+
 .components-radio-control__input[type="radio"] {
 	@include radio-control;
-	margin-top: 0;
-	margin-right: 6px;
+
+	display: inline-flex;
+	margin: 0 6px 0 0;
+	padding: 0;
+	appearance: none;
+	cursor: pointer;
+
+	&:focus {
+		box-shadow: 0 0 0 ($border-width * 2) $components-color-background, 0 0 0 ($border-width * 2 + $border-width-focus-fallback) $components-color-accent;
+	}
+
+	&:checked {
+		background: $components-color-accent;
+		border-color: $components-color-accent;
+
+		&::before {
+			content: "";
+			border-radius: 50%;
+		}
+	}
+}
+
+.components-radio-control__label {
+	cursor: pointer;
 }

packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap

@@ -47,9 +47,9 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   display: -ms-inline-flexbox;
   display: inline-flex;
   min-width: 0;
-  padding: 2px;
   position: relative;
   min-height: 36px;
+  padding: 2px;
 }
 
 .emotion-8:hover {
@@ -117,6 +117,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   z-index: 2;
   color: #1e1e1e;
   width: 30px;
+  height: 30px;
   padding-left: 0;
   padding-right: 0;
   color: #fff;
@@ -199,6 +200,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   z-index: 2;
   color: #1e1e1e;
   width: 30px;
+  height: 30px;
   padding-left: 0;
   padding-right: 0;
 }
@@ -372,9 +374,9 @@ exports[`ToggleGroupControl controlled should render correctly with text options
   display: -ms-inline-flexbox;
   display: inline-flex;
   min-width: 0;
-  padding: 2px;
   position: relative;
   min-height: 36px;
+  padding: 2px;
 }
 
 .emotion-8:hover {
@@ -592,9 +594,9 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   display: -ms-inline-flexbox;
   display: inline-flex;
   min-width: 0;
-  padding: 2px;
   position: relative;
   min-height: 36px;
+  padding: 2px;
 }
 
 .emotion-8:hover {
@@ -662,6 +664,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   z-index: 2;
   color: #1e1e1e;
   width: 30px;
+  height: 30px;
   padding-left: 0;
   padding-right: 0;
   color: #fff;
@@ -744,6 +747,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   z-index: 2;
   color: #1e1e1e;
   width: 30px;
+  height: 30px;
   padding-left: 0;
   padding-right: 0;
 }
@@ -911,9 +915,9 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
   display: -ms-inline-flexbox;
   display: inline-flex;
   min-width: 0;
-  padding: 2px;
   position: relative;
   min-height: 36px;
+  padding: 2px;
 }
 
 .emotion-8:hover {

packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts

@@ -102,12 +102,13 @@ const isIconStyles = ( {
 }: Pick< ToggleGroupControlProps, 'size' > ) => {
 	const iconButtonSizes = {
 		default: '30px',
-		'__unstable-large': '34px',
+		'__unstable-large': '32px',
 	};
 
 	return css`
 		color: ${ COLORS.gray[ 900 ] };
-		width: ${ iconButtonSizes[ size ] };
+		height: ${ iconButtonSizes[ size ] };
+		aspect-ratio: 1;
 		padding-left: 0;
 		padding-right: 0;
 	`;

packages/components/src/toggle-group-control/toggle-group-control/component.tsx

@@ -47,6 +47,8 @@ function UnconnectedToggleGroupControl(
 	} = useContextSystem( props, 'ToggleGroupControl' );
 
 	const baseId = useInstanceId( ToggleGroupControl, 'toggle-group-control' );
+	const normalizedSize =
+		__next40pxDefaultSize && size === 'default' ? '__unstable-large' : size;
 
 	const cx = useCx();
 
@@ -56,13 +58,12 @@ function UnconnectedToggleGroupControl(
 				styles.toggleGroupControl( {
 					isBlock,
 					isDeselectable,
-					size,
-					__next40pxDefaultSize,
+					size: normalizedSize,
 				} ),
 				isBlock && styles.block,
 				className
 			),
-		[ className, cx, isBlock, isDeselectable, size, __next40pxDefaultSize ]
+		[ className, cx, isBlock, isDeselectable, normalizedSize ]
 	);
 
 	const MainControl = isDeselectable
@@ -86,7 +87,7 @@ function UnconnectedToggleGroupControl(
 				label={ label }
 				onChange={ onChange }
 				ref={ forwardedRef }
-				size={ size }
+				size={ normalizedSize }
 				value={ value }
 			>
 				<LayoutGroup id={ baseId }>{ children }</LayoutGroup>

packages/components/src/toggle-group-control/toggle-group-control/styles.ts

@@ -14,22 +14,17 @@ export const toggleGroupControl = ( {
 	isBlock,
 	isDeselectable,
 	size,
-	__next40pxDefaultSize,
-}: Pick<
-	ToggleGroupControlProps,
-	'isBlock' | 'isDeselectable' | '__next40pxDefaultSize'
-> & {
+}: Pick< ToggleGroupControlProps, 'isBlock' | 'isDeselectable' > & {
 	size: NonNullable< ToggleGroupControlProps[ 'size' ] >;
 } ) => css`
 	background: ${ COLORS.ui.background };
 	border: 1px solid transparent;
 	border-radius: ${ CONFIG.controlBorderRadius };
 	display: inline-flex;
 	min-width: 0;
-	padding: 2px;
 	position: relative;
 
-	${ toggleGroupControlSize( size, __next40pxDefaultSize ) }
+	${ toggleGroupControlSize( size ) }
 	${ ! isDeselectable && enclosingBorders( isBlock ) }
 `;
 
@@ -57,21 +52,20 @@ const enclosingBorders = ( isBlock: ToggleGroupControlProps[ 'isBlock' ] ) => {
 };
 
 export const toggleGroupControlSize = (
-	size: NonNullable< ToggleGroupControlProps[ 'size' ] >,
-	__next40pxDefaultSize: ToggleGroupControlProps[ '__next40pxDefaultSize' ]
+	size: NonNullable< ToggleGroupControlProps[ 'size' ] >
 ) => {
-	const heights = {
-		default: '40px',
-		'__unstable-large': '40px',
+	const styles = {
+		default: css`
+			min-height: 36px;
+			padding: 2px;
+		`,
+		'__unstable-large': css`
+			min-height: 40px;
+			padding: 3px;
+		`,
 	};
 
-	if ( ! __next40pxDefaultSize ) {
-		heights.default = '36px';
-	}
-
-	return css`
-		min-height: ${ heights[ size ] };
-	`;
+	return styles[ size ];
 };
 
 export const block = css`