Block Editor: remove usage of Emotion

jsnajdr · jsnajdr · commit 59bc5bebf708 · 2025-12-05T20:04:27.000+01:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json
@@ -52,8 +52,6 @@
 		"build-module/hooks/**"
 	],
 	"dependencies": {
-		"@emotion/react": "^11.7.1",
-		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
 		"@wordpress/a11y": "file:../a11y",
 		"@wordpress/api-fetch": "file:../api-fetch",
diff --git a/packages/block-editor/src/components/dimensions-tool/style.module.css b/packages/block-editor/src/components/dimensions-tool/style.module.css
@@ -0,0 +1,3 @@
+.single-column {
+	grid-column: span 1;
+}
diff --git a/packages/block-editor/src/components/dimensions-tool/width-height-tool.js b/packages/block-editor/src/components/dimensions-tool/width-height-tool.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import styled from '@emotion/styled';
-
 /**
  * WordPress dependencies
  */
@@ -12,9 +7,10 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-const SingleColumnToolsPanelItem = styled( ToolsPanelItem )`
-	grid-column: span 1;
-`;
+/**
+ * Internal dependencies
+ */
+import styles from './style.module.css';
 
 /**
  * @typedef {import('@wordpress/components/build-types/unit-control/types').WPUnitControlUnit} WPUnitControlUnit
@@ -72,7 +68,8 @@ export default function WidthHeightTool( {
 
 	return (
 		<>
-			<SingleColumnToolsPanelItem
+			<ToolsPanelItem
+				className={ styles[ 'single-column' ] }
 				label={ __( 'Width' ) }
 				isShownByDefault={ isShownByDefault }
 				hasValue={ () => width !== '' }
@@ -89,8 +86,9 @@ export default function WidthHeightTool( {
 					onChange={ onDimensionChange( 'width' ) }
 					size="__unstable-large"
 				/>
-			</SingleColumnToolsPanelItem>
-			<SingleColumnToolsPanelItem
+			</ToolsPanelItem>
+			<ToolsPanelItem
+				className={ styles[ 'single-column' ] }
 				label={ __( 'Height' ) }
 				isShownByDefault={ isShownByDefault }
 				hasValue={ () => height !== '' }
@@ -107,7 +105,7 @@ export default function WidthHeightTool( {
 					onChange={ onDimensionChange( 'height' ) }
 					size="__unstable-large"
 				/>
-			</SingleColumnToolsPanelItem>
+			</ToolsPanelItem>
 		</>
 	);
 }

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+.single-column {`
	`2`	`+ grid-column: span 1;`
	`3`	`+}`