Skip to content
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.

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

iAPI Router: Handle styles assets on region-based navigation #67826

Draft
wants to merge 6 commits into
base: trunk
Choose a base branch
from

Conversation

DAreRodz
Copy link
Contributor

@DAreRodz DAreRodz commented Dec 11, 2024

What?

Adds support for style assets on region-based navigation, allowing stylesheets to be applied or removed when navigating to a new page with different styles.

Why?

This feature is required for some core blocks like the Comments one. In this particular case, when publishing a new comment on a post that does not have any comments, we want to display the new comments without reloading the page using navigate(). The new comment might require styles not present on the initial post page.

How?

The implementation uses the adoptedStyleSheets API.

For each <style> and <link rel=stylesheet> tags, a CSSStyleSheet is generated. If the CSS code contains a relative URL pointing to another asset (e.g., images or fonts), the URL is converted into an absolute URL. That could be removed once the baseURL option is supported in Chrome, Edge, or Opera (see coverage in MDN).

These CSSStyleSheet instances are then passed to the adoptedStyleSheets property in the correct order.

With these APIs, we can solve the following problems:

  • Wait for all the styles to be ready before updating the HTML.
  • Update both the styles and the HTML at the same time.
  • Reuse all previous stylesheets without having to parse the CSS code again.

The PR also replaces the current implementation we have for full-site navigation.

Testing Instructions

TBD

Screenshots or screencast

Before After

@DAreRodz DAreRodz added [Type] Enhancement A suggestion for improvement. [Feature] Interactivity API API to add frontend interactivity to blocks. [Package] Interactivity Router /packages/interactivity-router labels Dec 11, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Interactivity API API to add frontend interactivity to blocks. [Package] Interactivity Router /packages/interactivity-router [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant