Broken gradients when using the AMP plugin #4529
Description
Bug Description
After some very helpful feedback from Brodie Clark I've found that the AMP plugin is causing issues with gradients.
Here's what I found out when testing with a linear gradient:
The Web Stories plugin adds a <div class="page-fullbleed-area"> element which is a child of <amp-story-grid-layer>. The gradient is added as inline style to that element.
It will look like this like this:
background-color: white;
background-image: linear-gradient(0turn, #fcfcfc 0.43%, #fd174e 100%);The AMP plugin extracts that inline style, gives the div a new class(e.g. amp-wp-c307781) and adds CSS like :root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-c307781{...} to the <style amp-custom=> style. So far so good.
The problem:
The CSS looks as follows (formatted for readability):
:root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-c307781 {
background-color: white;
background-image: linear-gradient(0 turn,#fcfcfc .43%,#fd174e 100%);
}Notice how 0turn became 0 turn.
This makes the background-image declaration now invalid CSS.
Note:
This seems to apply only to linear gradients.
Radial gradients work fine, as the CSS looks like background-image:radial-gradient(#fcfcfc 0.43%, #fd174e 100%) and the AMP plugin does not break it.
Expected Behaviour
Gradients should work just fine when the AMP plugin is active.
Steps to Reproduce
- Activate AMP plugin
- Create a new story
- Add a gradient to the page
- Save story and view it on the frontend
Screenshots
Expectation:
vs. reality:
Additional Context
- Plugin Version: 1.0.0-rc.1 + AMP plugin 2.0.2
- Operating System: macOS
- Browser: Chrome 85
Do not alter or remove anything below. The following sections will be managed by moderators only.