[Admin UI]: Move to CSS modules and implement logical properties

[yogeshbhutkar]

What?

Closes #77032

Convert the @wordpress/admin-ui package to use CSS modules and logical properties.

Why?

• Simpler setup for consumers
• Better maintainability with scoped styles eliminates the need for downstream class overrides
• Logical properties (margin-inline-start, block-size, etc.) make setup LTR/RTL ready

How?

• Refactor style.scss into component-scoped .module.css files
• Replace physical properties (left, top, margin-left) with logical equivalents (inline-start, block-start, margin-inline-start)
• Update component imports to use CSS module syntax

Testing Instructions

1. Run the Storybook (npm run storybook:dev)
2. Navigate to Admin UI → Breadcrumbs, and verify styles load as intended
3. Navigate to Admin UI → Page, and verify styles load as intended

Screenshots

Before	After

Note: Before and after changes are expected to be the same.

Use of AI Tools

Used: GH Copilot in ask mode to plan the changes and review them locally.

[Copilot]

Pull request overview

Converts @wordpress/admin-ui styling from package-level global SCSS/build-style imports to component-scoped CSS Modules, while also migrating several layout rules to CSS logical properties (LTR/RTL ready). Updates Storybook and downstream packages to stop importing the Admin UI build-style stylesheet.

Changes:

• Refactor Admin UI Page and Breadcrumbs styles into .module.scss files and update components to consume CSS Modules.
• Remove Admin UI build-style stylesheet loading from Storybook and from other packages’ SCSS entrypoints.
• Update @wordpress/admin-ui TypeScript config and package metadata to support style module imports.

Reviewed changes

Copilot reviewed 16 out of 16 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
storybook/package-styles/config.js	Stops lazy-loading Admin UI build-style CSS for admin-ui-* stories.
storybook/package-styles/admin-ui-ltr.lazy.scss	Removed Admin UI LTR build-style import file.
storybook/package-styles/admin-ui-rtl.lazy.scss	Removed Admin UI RTL build-style import file.
packages/interface/src/style.scss	Drops @wordpress/admin-ui/build-style usage from Interface styles aggregation.
packages/edit-site/src/style.scss	Drops @wordpress/admin-ui/build-style usage from Edit Site styles aggregation.
packages/edit-post/src/style.scss	Drops @wordpress/admin-ui/build-style usage from Edit Post styles aggregation.
packages/boot/src/style.scss	Drops @wordpress/admin-ui/build-style usage from Boot styles aggregation.
packages/admin-ui/tsconfig.json	Adds style-imports typings for CSS Module imports.
packages/admin-ui/src/style.scss	Removes previous package-level SCSS entrypoint that aggregated component styles.
packages/admin-ui/src/page/style.module.scss	Introduces CSS Module + logical properties for Page layout and header.
packages/admin-ui/src/page/index.tsx	Switches Page to CSS Modules (but currently changes content wrapping behavior).
packages/admin-ui/src/page/header.tsx	Switches Header to CSS Modules classes.
packages/admin-ui/src/breadcrumbs/style.module.scss	Introduces CSS Module + logical properties for breadcrumbs list styling.
packages/admin-ui/src/breadcrumbs/index.tsx	Switches Breadcrumbs to CSS Modules class.
packages/admin-ui/README.md	Updates setup instructions to remove Admin UI build-style import guidance.
packages/admin-ui/package.json	Updates sideEffects to CSS-module-only SCSS.

Comments suppressed due to low confidence (1)

packages/admin-ui/src/page/index.tsx:67

• When hasPadding is false, the component now returns children directly (no wrapper). This bypasses the .content container styles (flex-grow/overflow scrolling), and will likely break layout/scrolling compared to the padded variant. Consider always rendering a content wrapper with styles.content, and conditionally add the has-padding class when needed.

			{ hasPadding ? (
				<div
					className={ clsx(
						styles.content,
						styles[ 'has-padding' ]
					) }
				>
					{ children }
				</div>
			) : (
				children
			) }

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: yogeshbhutkar <yogeshbhutkar@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: aduth <aduth@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[ciampo]

Flagging potential conflicts with #77012 — @jameskoster and @yogeshbhutkar , you may want to coordinate your efforts

[ciampo]

LGTM 🚀

[yogeshbhutkar]

Thanks for the review. It looks like the perf test is timing out across all the latest PRs here: https://github.com/WordPress/gutenberg/pulls, so this appears unrelated to this PR.