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.

Sign up for GitHub

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] Improve outline of blocks. #1629

Merged
merged 13 commits into from
Nov 22, 2018
Merged

[amp-stories sub-task] Improve outline of blocks. #1629

Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
b3c437b
1524 - Added blue border around rich text entries + white shadow
mehigh Nov 20, 2018
2caa417
Merge branch 'amp-stories' into 1524-improve-outline
mehigh Nov 21, 2018
df52684
1524 - Maintain blue outline of the currently selected layer (vertica…
mehigh Nov 21, 2018
7f293bf
1524 - Maintain blue border when selecting the story page
mehigh Nov 21, 2018
58ad519
1524 - Add white shadow to placeholder text
mehigh Nov 21, 2018
0d2f643
Merge branch 'amp-stories' into 1524-improve-outline
mehigh Nov 21, 2018
ce31892
1524 - Fix issue with warning block not being clickable
mehigh Nov 21, 2018
b1ec0e7
Merge branch 'amp-stories' into 1524-improve-outline
mehigh Nov 22, 2018
9a19ab9
1524 - Added border around the stories to match the ghost page
mehigh Nov 22, 2018
c690bd8
1524 - Removed some old outlines.
mehigh Nov 22, 2018
3f84e61
1524 - Made CTA layer not overflow when too much text is entered
mehigh Nov 22, 2018
c9805e7
1524 - Removing important width on block list layout. (was causing CT…
mehigh Nov 22, 2018
540e921
1522 - Update the border & background of the page
mehigh Nov 22, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
97 changes: 84 additions & 13 deletions assets/css/amp-editor-story-blocks.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,19 @@
div[data-type="amp/amp-story-page"] {
border: 1px solid #ffdddd;
border: 10px solid #eff0f1;
}

div[data-type="amp/amp-story-page"]::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
height: 10px;
background: #eff0f1;
}

.editor-block-list__layout div[data-type="amp/amp-story-page"].is-selected > .editor-block-list__block-edit::before {
outline: 1px solid #007cba;
}

.editor-block-list__layout div[data-type="amp/amp-story-page"] {
Expand All @@ -8,7 +22,7 @@ div[data-type="amp/amp-story-page"] {
}

.editor-block-list__layout div[data-type="amp/amp-story-page"] .components-placeholder.wp-block-image {
background: #dcdcdc;
background: #f9f9f9;
}

@media (min-width: 600px) {
Expand All @@ -29,8 +43,14 @@ div[data-type="amp/amp-story-page"] {
div[data-type="amp/amp-story-page"],
div[data-type="amp/amp-story-page"] .editor-inner-blocks .editor-block-list__layout:first-of-type {
margin: auto;
width: 320px !important;
height: 533px !important;
width: 100%;
max-width: 338px;
height: 553px;
}

div[data-type="amp/amp-story-page"] .editor-block-list__layout > .block-list-appender {
width: 316px;

}

.editor-block-list__layout div[data-type="amp/amp-story-cta-layer"] .editor-inner-blocks .editor-block-list__layout {
Expand Down Expand Up @@ -75,6 +95,38 @@ div[data-type="amp/amp-story-page"] .editor-inner-blocks .editor-block-list__lay
box-sizing: border-box;
}

.amp-grid-template .editor-block-list__layout .editor-block-list__block.is-selected > .editor-block-list__block-edit::before,
.amp-grid-template .editor-block-list__layout .editor-block-list__block.is-typing > .editor-block-list__block-edit::before {
outline: 1px solid #007cba;
}

.amp-grid-template .editor-block-list__layout .editor-block-list__block.is-selected > .editor-block-list__block-edit .editor-rich-text,
.amp-grid-template .editor-block-list__layout .editor-block-list__block.is-typing > .editor-block-list__block-edit .editor-rich-text {
text-shadow:
0.05em 0 rgba( 255, 255, 255, 0.8 ),
0 0.05em rgba( 255, 255, 255, 0.8 ),
-0.05em 0 rgba( 255, 255, 255, 0.8 ),
0 -0.05em rgba( 255, 255, 255, 0.8 ),
-0.05em -0.05em rgba( 255, 255, 255, 0.8 ),
-0.05em 0.05em rgba( 255, 255, 255, 0.8 ),
0.05em -0.05em rgba( 255, 255, 255, 0.8 ),
0.05em 0.05em rgba( 255, 255, 255, 0.8 );
}

.amp-grid-template .editor-block-list__layout .editor-block-list__block .editor-rich-text__tinymce + .editor-rich-text__tinymce,
.amp-grid-template .editor-block-list__layout .editor-block-list__block .editor-rich-text__tinymce + .editor-rich-text__tinymce p {
opacity: 0.9;
text-shadow:
0.05em 0 rgba( 255, 255, 255, 0.8 ),
0 0.05em rgba( 255, 255, 255, 0.8 ),
-0.05em 0 rgba( 255, 255, 255, 0.8 ),
0 -0.05em rgba( 255, 255, 255, 0.8 ),
-0.05em -0.05em rgba( 255, 255, 255, 0.8 ),
-0.05em 0.05em rgba( 255, 255, 255, 0.8 ),
0.05em -0.05em rgba( 255, 255, 255, 0.8 ),
0.05em 0.05em rgba( 255, 255, 255, 0.8 );
}

.amp-grid-template-horizontal .editor-block-list__layout:first-of-type {
grid-auto-flow: column !important;
grid-template-rows: 100% !important;
Expand Down Expand Up @@ -173,9 +225,15 @@ div[data-amp-position="lower-third"] {

.editor-block-list__layout div[data-type="amp/amp-story-cta-layer"] {
position: absolute;
height: 20%;
width: 100%;
bottom: 0;
min-height: 20%;
height: auto;
width: 318px;
bottom: 38px;

}

.editor-block-list__layout div[data-type="amp/amp-story-cta-layer"] .editor-block-list__layout:first-of-type {
height: auto !important;
}

.editor-block-list__layout > div {
Expand All @@ -188,11 +246,6 @@ div[data-amp-type="grid"] .block-library-image__resizer {
max-height: 533px !important;
}

.editor-block-list__layout div[data-amp-type="grid"].is-selected,
.editor-block-list__layout div[data-amp-type="grid"].is-selected .editor-block-list__block {
outline: 1px dotted #99c2e0;
}

.editor-block-list__layout div[data-amp-type="grid"]:not(.is-selected):not(.is-selected-parent) .editor-block-list__block {
z-index: 0;
}
Expand Down Expand Up @@ -221,6 +274,10 @@ div[data-type="amp/amp-story-page"] > div > div > .is-selected-parent > .editor-
-webkit-filter: none;
}

div[data-type="amp/amp-story-page"] > div > div > .is-selected-parent > .editor-inner-blocks > .editor-block-list__layout > .is-selected > .editor-block-list__block-edit::before {
outline: 1px solid #007cba;
}

.edit-post-visual-editor .editor-block-list__block ul.editor-selectors {
position: absolute;
right: -155px;
Expand Down Expand Up @@ -291,6 +348,7 @@ div[data-type="amp/amp-story-page"] > div > div > .is-selected-parent > .editor-
width: 60px;
}


.post-type-amp_story .editor-default-block-appender {
max-width: 318px;
}
Expand Down Expand Up @@ -320,7 +378,7 @@ div[data-type="amp/amp-story-page"] > div > div > .is-selected-parent > .editor-
border: 10px solid #eff0f1;
border-radius: 0;
height: 533px;
width: 318px;
width: 338px;
}

.post-type-amp_story .editor-writing-flow > div > div > .editor-block-list__layout > .editor-block-list__block[data-type="core/paragraph"] .editor-block-list__insertion-point-inserter .components-icon-button:hover,
Expand All @@ -335,3 +393,16 @@ div[data-type="amp/amp-story-page"] > div > div > .is-selected-parent > .editor-
.post-type-amp_story .editor-writing-flow > div > div > .editor-block-list__layout > .editor-block-list__block[data-type="core/paragraph"] .editor-block-list__block-edit {
display: none;
}

/* Fixes Gutenberg bug where an extra wrapping div is causing no pointer events on the notice layer. */
.post-type-amp_story .editor-block-list__layout .editor-block-list__block.has-warning .editor-block-list__block-edit > :not(.editor-warning) {
pointer-events: all;
}

.post-type-amp_story .editor-block-list__layout .editor-block-list__block.has-warning .editor-block-list__block-edit > div > div:not(.editor-warning) {
pointer-events: none;
}

.editor-block-list__layout .editor-block-list__block .editor-block-list__block-edit::before {
outline: none;
}