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.
Acceptance Criteria
Implementation Brief
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:
The AMP plugin extracts that inline style, gives the
diva 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):
Notice how
0turnbecame0 turn.This makes the
background-imagedeclaration 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
Screenshots
Expectation:
vs. reality:
Additional Context
Do not alter or remove anything below. The following sections will be managed by moderators only.
Acceptance Criteria
Implementation Brief