Skip to content

Try: React 19 <link /> for components#66781

Draft
tyxla wants to merge 22 commits into
trunkfrom
try/react-19-link-stylesheets
Draft

Try: React 19 <link /> for components#66781
tyxla wants to merge 22 commits into
trunkfrom
try/react-19-link-stylesheets

Conversation

@tyxla
Copy link
Copy Markdown
Member

@tyxla tyxla commented Nov 6, 2024

What?

As we experiment with React 19, this PR attempts to use <link /> for component styles.

For more info, see:

Why?

Currently @wordpress/component styles are a monolithic stylesheet. This approach will allow us to have separate CSS files per component, and to load each of the stylesheets actually when the component is to be rendered.

How?

For the experiment, we're refactoring ButtonGroup's stylesheet from SCSS to CSS. In production, we'd either have CSS modules or have a pre-processing step from SASS to separate CSS files.

We're then loading the stylesheet by using <link /> directly in the ButtonGroup component.

Testing Instructions

  • Insert a Buttons block and a couple of buttons in it.
  • Select one of the Button blocks.
  • Open inspector controls of the block
  • Verify the stylesheet gets loaded and the width controls look well

Testing Instructions for Keyboard

Same

Screenshots or screencast

Screenshot 2024-11-06 at 13 28 27

@tyxla tyxla added [Package] Components /packages/components [Type] Experimental Experimental feature or API. labels Nov 6, 2024
@tyxla tyxla self-assigned this Nov 6, 2024
@tyxla tyxla changed the title Try: React 19 <link /> for components Try: React 19 <link /> for components Nov 6, 2024
@tyxla tyxla mentioned this pull request Nov 6, 2024
@tyxla tyxla force-pushed the try/react-19-beta branch from 6a9ada3 to 0ae8c13 Compare November 20, 2024 09:23
@tyxla tyxla force-pushed the try/react-19-beta branch from 31f99c3 to da65652 Compare December 6, 2024 11:27
@jsnajdr jsnajdr force-pushed the try/react-19-beta branch 7 times, most recently from bd9eb7f to 3707c06 Compare February 18, 2026 12:14
@jsnajdr jsnajdr force-pushed the try/react-19-beta branch 7 times, most recently from d8a018f to c217d55 Compare February 26, 2026 11:10
@jsnajdr jsnajdr force-pushed the try/react-19-beta branch 2 times, most recently from f31d2be to e56d0ce Compare March 10, 2026 12:31
@jsnajdr jsnajdr force-pushed the try/react-19-beta branch from e56d0ce to b460b5c Compare March 24, 2026 10:27
@jsnajdr jsnajdr force-pushed the try/react-19-beta branch 3 times, most recently from 062d497 to 84956a8 Compare April 7, 2026 11:02
@jsnajdr jsnajdr force-pushed the try/react-19-beta branch 4 times, most recently from 7cdb141 to 7f00ada Compare April 14, 2026 09:04
@jsnajdr jsnajdr force-pushed the try/react-19-beta branch from 7f00ada to 5e5273b Compare April 16, 2026 06:58
@tyxla tyxla force-pushed the try/react-19-beta branch 3 times, most recently from ccdcd5f to 17631bb Compare May 24, 2026 20:59
@jsnajdr jsnajdr force-pushed the try/react-19-beta branch from 17631bb to a785792 Compare May 25, 2026 10:40
Base automatically changed from try/react-19-beta to trunk May 26, 2026 09:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Package] Components /packages/components [Type] Experimental Experimental feature or API.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant