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

Blocks: Fix relative URLs for inlined styles #35538

Merged
merged 2 commits into from
Nov 5, 2021
Merged

Conversation

aristath
Copy link
Member

Description

Issue was reported in https://core.trac.wordpress.org/ticket/54243 and a patch was pushed in WordPress/wordpress-develop#1752

This PR backports the same mods to Gutenberg.

When a stylesheets gets inlined, any relative URLs in that stylesheet break.
The problem is that URLs inside CSS files are relative to the stylesheet's path, and when styles get inlined that relation is lost. This PR fixes the issue by finding relative URLs which then get modified to be relative to the site's root.

How has this been tested?

Tested by adding the following CSS in a block stylesheet, and then making sure that URLs get properly updated.
Note: The CSS below is wrong and meaningless, but it does test the issue efficiently.

.foo {
  background:url( "image0.svg" );
  background-image: url('./image2.png');
  background-image: url('../image1.jpg');
  background-image: url('http://foo.com/image2.png');
  background-image: url( 'https://bar.com/image2.png');
}

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • I've tested my changes with keyboard and screen readers.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

@aristath aristath added the [Type] Bug An existing feature does not function as intended label Oct 12, 2021
@spacedmonkey
Copy link
Member

@aristath Can you add a PHP unit test to this? Any code, specially with regex in it, that is not readable, 100% needs a test to prove that is works.

@aristath
Copy link
Member Author

Tests were added in the patch for core, so I don't think we need to copy these tests to Gutenberg, do we?

@aristath aristath force-pushed the fix/inlined-relative-urls branch from be0d123 to ace23e6 Compare October 13, 2021 06:27
@gziolo
Copy link
Member

gziolo commented Nov 4, 2021

@aristath, can you refresh this patch? I think that e2e test failures are completely unrelated. I tested the core patch today: https://core.trac.wordpress.org/ticket/54243. I would be happy to land this change as well. Ideally, before the 11.9 RC1 planned for tomorrow.

@gziolo gziolo merged commit a27d554 into trunk Nov 5, 2021
@gziolo gziolo deleted the fix/inlined-relative-urls branch November 5, 2021 07:27
@github-actions github-actions bot added this to the Gutenberg 11.9 milestone Nov 5, 2021
@gziolo gziolo added the [Feature] Blocks Overall functionality of blocks label Nov 5, 2021
@gziolo gziolo changed the title Fix relative URLs for inlined styles Blocks: Fix relative URLs for inlined styles Nov 5, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Blocks Overall functionality of blocks [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants