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

Issue with new iAPI region-based navigation CSS loading #68691

Closed
3 of 6 tasks
sethrubenstein opened this issue Jan 15, 2025 · 3 comments · Fixed by #68923
Closed
3 of 6 tasks

Issue with new iAPI region-based navigation CSS loading #68691

sethrubenstein opened this issue Jan 15, 2025 · 3 comments · Fixed by #68923
Assignees
Labels
[Feature] Interactivity API API to add frontend interactivity to blocks. [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended

Comments

@sethrubenstein
Copy link
Contributor

Description

The new iAPI router dynamic css loading has one major issue. When using CSSStyleSheet to regenerate styles, something is happening with the order of rules and how browsers are reading them.

Step-by-step reproduction instructions

  1. Enable iAPI in core/query block loop. Or any block that supports iAPI routing on a page.
  2. Place a core/social-links block set to small logos only add some icons.
  3. Go to your page with the iAPI core/query block and navigate to another page of results using the iAPI router.
  4. Observe the padding change on the core/social-links block as the styles are re-generated.

Screenshots, screen recording, code snippet

CleanShot.2025-01-15.at.13.25.09.mp4

Environment info

  • WP 6.7
  • Gutenberg 20
  • Demo video is via WP Playground

Please confirm that you have searched existing issues in the repo.

  • Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

  • Yes

Please confirm which theme type you used for testing.

  • Block
  • Classic
  • Hybrid (e.g. classic with theme.json)
  • Not sure
@sethrubenstein sethrubenstein added the [Type] Bug An existing feature does not function as intended label Jan 15, 2025
@Mamaduka Mamaduka added the [Feature] Interactivity API API to add frontend interactivity to blocks. label Jan 16, 2025
@SainathPoojary
Copy link
Contributor

Hey @sethrubenstein ,

I also noticed that the color changes when clicking on the next page.

2025-01-16.10-59-23.mp4

@DAreRodz
Copy link
Contributor

I think the problem is in this loop, which is used to clone the rules from a referenced style sheet to a constructed style sheet.

for ( const { cssText } of elementSheet.cssRules ) {
sheet.insertRule( withAbsoluteUrls( cssText, sheetUrl ) );
}

The sheet.insertRule() method accepts an optional index parameter after the rule text. Although index can be omitted, its default value is 0. That means subsequent insertRule() calls don't append rules one after another but at the beginning, actually recreating the style sheet rules in reverse order.

@DAreRodz
Copy link
Contributor

I've just opened a PR with a bug fix:

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. [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants