Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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
[amp-stories sub-task] CTA UI improvements #1636
[amp-stories sub-task] CTA UI improvements #1636
Changes from 5 commits
4fa9923
f966c72
26776a7
3e90bd1
3e1aac7
86c8209
6815d2a
befd00e
5211097
96aa5c6
16bf325
453441d
703c0e5
b37d430
dae0bcb
81a7459
File filter
Filter by extension
Conversations
Jump to
There are no files selected for viewing
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actually CTA Layer is allowed on each page -- it has to be the last Layer of a Page, so it can't be the first Layer in case there is another Layer already existing.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For reference: https://www.ampproject.org/docs/reference/components/amp-story#amp-story-cta-layer
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hmm yeah that is interesting, I wonder why I got that console error then. I'll test again and see what happens.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I tried again and got the same error, it is the last layer on the first page:
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Okay, looks like they have updated AMP but didn't update the docs accordingly.
Thanks for finding and adding this!
Probably it would be good to hide the CTA Layer Icon via CSS from the Inserter of the first Page then, too.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@mehigh Could you look into this CSS update? We want to hide the CTA layer button from the first story page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@jacobschweitzer What seems to be the issue here with blurring? Perhaps that's something that @mehigh can take a look at within CSS instead? CTA Layer shouldn't probably be blurred at any point since it's always the top layer -- so it wouldn't be possible to select a layer that's on top of CTA Layer.
Mike, do you think you could look into CTA Layer to make sure that it's not being blurred when edited? There seems to be another new CSS-related issue with CTA Layer -- The CTA Layer should always take 20% of the Page height, however, it looks like the CTA Layer has the same height as the other layers:
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Also note that the Layer Cards ( block-selector.js ) will be removed within #1630: that's something that will not exist soon and will be replaced by the Block Navigator on the left.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@miina Here is what I was seeing with the blurring issue:
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The underlying issue seems to be that the child block gets the
is-selected
class so it is not blurry, but its parent (div.amp-story-cta-layer
) does not haveis-selected
so it is blurred which makes all its child elements blurred.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@jacobschweitzer In the
helpers.js
file there is the methodmaybeIsSelectedParentClass
which is used for addingis-selected-parent
class to page and also layers -- except for CTA Layer -- perhaps you could implement this for the CTA Layer as well? This might fix the issue and if it does not right away, it would give a CSS selector for fixing the issue via CSS, as it's done for the other layers at this moment. Thoughts?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ok thanks @miina that looks like a good approach, I'll start working on that.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@miina I've got it working consistently after this commit - 5211097
Thanks @mehigh 👍
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@jacobschweitzer As mentioned above then
block-selector.js
file is going to be removed. Could you move adding this class to the fileamp-story-editor-blocks.js
where this class is being added to the other layer blocks as well?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For reference: https://github.com/Automattic/amp-wp/blob/amp-stories/assets/js/amp-story-editor-blocks.js#L228-L230