Skip to content

AlignmentMatrixControl: migrate Emotion to style.module #73714

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jsnajdr merged 4 commits into from
Dec 4, 2025
Merged

AlignmentMatrixControl: migrate Emotion to style.module #73714

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c711c52
AlignmentMatrixControl: migrate Emotion to style.module
jsnajdr Dec 3, 2025
b910027
Fix unit tests by removing invalid prop
jsnajdr Dec 3, 2025
9ec40d5
Add changelog entry
jsnajdr Dec 3, 2025
96f2b95
Enable support for style.module.scss
jsnajdr Dec 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 1 addition & 5 deletions packages/block-editor/src/components/block-alignment-matrix-control/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,11 +77,7 @@ function BlockAlignmentMatrixControl( props ) {
);
} }
renderContent={ () => (
<AlignmentMatrixControl
hasFocusBorder={ false }

@jsnajdr jsnajdr Dec 3, 2025

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This hasFocusBorder prop doesn't exist on the component and it's also not a valid prop of the native HTML element. It started triggering a React warning.

Emotion's styled wrapped checks props and forwards them only if they're valid (@emotion/is-prop-valid). That's why this error was detected only now, after removing styled.

onChange={ onChange }
value={ value }
/>
<AlignmentMatrixControl onChange={ onChange } value={ value } />
) }
/>
);
Expand Down
10 changes: 7 additions & 3 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,17 @@

- `Notice`: Fix notice component spacing issue when actions are present. ([#69430](https://github.com/WordPress/gutenberg/pull/69430))

### Internal

- `AlignmentMatrixControl`: Migrate styles from Emotion to a CSS module ([#73714](https://github.com/WordPress/gutenberg/pull/73714)).

## 30.9.0 (2025-11-26)

### Bug Fixes

- `ExternalLink`: Fix arrow direction for RTL languages. The external link arrow now correctly points to the top-left (↖) instead of top-right (↗) in RTL layouts. ([#73400](https://github.com/WordPress/gutenberg/pull/73400))
- Fixed an issue where the `Guide` component’s close button became invisible on hover when used on light backgrounds. The component's close button now relies on the default button hover effect, and the custom hover color is applied only within `welcome-guide` implementations to maintain consistency. ([#73220](https://github.com/WordPress/gutenberg/pull/73220))
- `DateTimePicker`: Fixed timezone handling when selecting specific dates around changes in daylight savings time when browser and server timezone settings are not in sync, which would cause an incorrect date to be selected. ([#73444](https://github.com/WordPress/gutenberg/pull/73444))
- `ExternalLink`: Fix arrow direction for RTL languages. The external link arrow now correctly points to the top-left (↖) instead of top-right (↗) in RTL layouts. ([#73400](https://github.com/WordPress/gutenberg/pull/73400)).
- Fixed an issue where the `Guide` component’s close button became invisible on hover when used on light backgrounds. The component's close button now relies on the default button hover effect, and the custom hover color is applied only within `welcome-guide` implementations to maintain consistency. ([#73220](https://github.com/WordPress/gutenberg/pull/73220)).
- `DateTimePicker`: Fixed timezone handling when selecting specific dates around changes in daylight savings time when browser and server timezone settings are not in sync, which would cause an incorrect date to be selected. ([#73444](https://github.com/WordPress/gutenberg/pull/73444)).

## 30.8.0 (2025-11-12)

Expand Down
17 changes: 14 additions & 3 deletions packages/components/src/alignment-matrix-control/cell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
/**
* External dependencies
*/
import clsx from 'clsx';

/**
* Internal dependencies
*/
Expand All @@ -9,9 +14,9 @@ import { VisuallyHidden } from '../visually-hidden';
* Internal dependencies
*/
import { ALIGNMENT_LABEL } from './utils';
import { Cell as CellView, Point } from './styles';
import type { AlignmentMatrixControlCellProps } from './types';
import type { WordPressComponentProps } from '../context';
import styles from './style.module.scss';

export default function Cell( {
id,
Expand All @@ -22,13 +27,19 @@ export default function Cell( {
<Tooltip text={ ALIGNMENT_LABEL[ value ] }>
<Composite.Item
id={ id }
render={ <CellView { ...props } role="gridcell" /> }
render={
<span
{ ...props }
className={ clsx( styles.cell, props.className ) }
role="gridcell"
/>
}

@jsnajdr jsnajdr Dec 3, 2025

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The migration has three steps:

  • remove the style.ts file that defines several components as styled elements (div or span)
  • redefine the styles as regular CSS in the style.module.css file
  • replace usages of the styled elements with plain divs and spans with a class name imported from the CSS module

>
{ /* VoiceOver needs a text content to be rendered within grid cell,
otherwise it'll announce the content as "blank". So we use a visually
hidden element instead of aria-label. */ }
<VisuallyHidden>{ value }</VisuallyHidden>
<Point role="presentation" />
<span className={ styles.point } role="presentation" />
</Composite.Item>
</Tooltip>
);
Expand Down
19 changes: 13 additions & 6 deletions packages/components/src/alignment-matrix-control/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,11 @@ import { useCallback } from '@wordpress/element';
*/
import Cell from './cell';
import { Composite } from '../composite';
import { GridContainer, GridRow } from './styles';
import AlignmentMatrixControlIcon from './icon';
import { GRID, getItemId, getItemValue } from './utils';
import type { WordPressComponentProps } from '../context';
import type { AlignmentMatrixControlProps } from './types';
import styles from './style.module.scss';

function UnforwardedAlignmentMatrixControl( {
className,
Expand Down Expand Up @@ -49,7 +49,11 @@ function UnforwardedAlignmentMatrixControl( {
[ baseId, onChange ]
);

const classes = clsx( 'component-alignment-matrix-control', className );
const classes = clsx(
'component-alignment-matrix-control',
styles.gridContainer,
className
);

return (
<Composite
Expand All @@ -58,18 +62,21 @@ function UnforwardedAlignmentMatrixControl( {
setActiveId={ setActiveId }
rtl={ isRTL() }
render={
<GridContainer
<div
{ ...props }
aria-label={ label }
className={ classes }
aria-label={ label }
id={ baseId }
role="grid"
size={ width }
style={ { width: `${ width }px` } }

@jsnajdr jsnajdr Dec 3, 2025

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sometimes style interpolation forces us to declare a style attribute.

/>
}
>
{ GRID.map( ( cells, index ) => (
<Composite.Row render={ <GridRow role="row" /> } key={ index }>
<Composite.Row
render={ <div className={ styles.gridRow } role="row" /> }
key={ index }
>
{ cells.map( ( cell ) => (
<Cell
id={ getItemId( baseId, cell ) }
Expand Down
89 changes: 89 additions & 0 deletions packages/components/src/alignment-matrix-control/style.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
@use "@wordpress/base-styles/variables" as *;
@use "../utils/theme-variables" as *;

/* Grid structure */
.gridContainer {

@aduth aduth Dec 4, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With existing CSS naming conventions, I'd expect this to be called .grid-container, even if that makes the JavaScript reference a little more verbose by having to use bracket notation for referencing the property.

@jsnajdr jsnajdr Dec 4, 2025

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point, fixing in #73757.

direction: ltr;

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);

box-sizing: border-box;
aspect-ratio: 1;

border: 1px solid transparent;
border-radius: $radius-medium;
outline: none;

cursor: pointer;
}

.gridRow {
grid-column: 1 / -1;

box-sizing: border-box;
display: grid;
grid-template-columns: repeat(3, 1fr);
}

/* Cell */
.cell {
position: relative;

display: flex;
align-items: center;
justify-content: center;

box-sizing: border-box;
margin: 0;
padding: 0;

appearance: none;
border: none;
outline: none;
}

/* Point */
.point {
display: block;
contain: strict;

box-sizing: border-box;
width: 6px;
aspect-ratio: 1;

margin: auto;

color: $components-color-gray-400;

/* Use border instead of background color so that the point shows
in Windows High Contrast Mode */
border: 3px solid currentColor;
}

/* Highlight active item */
.cell[data-active-item] .point {
color: $components-color-foreground;
transform: scale(calc(5 / 3));
}

/* Hover styles for non-active items */
.cell:not([data-active-item]):hover .point {
color: $components-color-accent;
}

/* Show an outline only when interacting with keyboard */
.cell[data-focus-visible] .point {
outline: 1px solid $components-color-accent;
outline-offset: 1px;
}

@media not (prefers-reduced-motion) {
.point {
transition-property: color, transform;
transition-duration: 120ms;
transition-timing-function: linear;
}
}

113 changes: 0 additions & 113 deletions packages/components/src/alignment-matrix-control/styles.ts
View file
Open in desktop

This file was deleted.

1 change: 1 addition & 0 deletions packages/components/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"types": [
"gutenberg-env",
"gutenberg-test-env",
"css-modules",

@jsnajdr jsnajdr Dec 3, 2025

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In order to have types for the style.module.css everywhere, I moved the declare module *.module.css TypeScript definition to the global typings folder. This makes it available for the entire Gutenberg repo.

"jest",
"@testing-library/jest-dom"
]
Expand Down
4 changes: 0 additions & 4 deletions packages/theme/src/types/css-modules.d.ts
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion packages/theme/tsconfig.src.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"extends": "../../tsconfig.base.json",
"compilerOptions": {
"moduleResolution": "bundler",
"types": [ "jest", "@testing-library/jest-dom" ]
"types": [ "css-modules", "jest", "@testing-library/jest-dom" ]
},
"references": [ { "path": "../element" }, { "path": "../private-apis" } ]
}
1 change: 0 additions & 1 deletion storybook/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,6 @@ module.exports = {
test: /\.scss$/,
exclude: /\.lazy\.scss$/,
use: scssLoaders( { isLazy: false } ),
include: path.resolve( __dirname ),

@jsnajdr jsnajdr Dec 4, 2025 •
edited
Loading

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removing this line enables the *.scss loader also for files in packages/components. Then the Storybook build can compile the style.module.scss files there.

The path.resolve( __dirname ) value is the /storybook folder, so *.scss files outside it were not processed.

},
{
test: /\.lazy\.scss$/,
Expand Down
9 changes: 9 additions & 0 deletions typings/css-modules/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
declare module '*.module.css' {
const classes: { [ key: string ]: string };
export default classes;
}

declare module '*.module.scss' {
const classes: { [ key: string ]: string };
export default classes;
}
Loading