From b3c437b29939d286a28345e465d2a28d1d6f2e71 Mon Sep 17 00:00:00 2001 From: Mike Crantea Date: Tue, 20 Nov 2018 18:25:06 +0200 Subject: [PATCH 01/10] 1524 - Added blue border around rich text entries + white shadow --- assets/css/amp-editor-story-blocks.css | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/assets/css/amp-editor-story-blocks.css b/assets/css/amp-editor-story-blocks.css index e31f3f61194..98279696fb1 100644 --- a/assets/css/amp-editor-story-blocks.css +++ b/assets/css/amp-editor-story-blocks.css @@ -68,6 +68,24 @@ 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-horizontal .editor-block-list__layout:first-of-type { grid-auto-flow: column !important; grid-template-rows: 100% !important; From df52684900ed5e43a35e3a61d173bcc50f2bb331 Mon Sep 17 00:00:00 2001 From: Mike Crantea Date: Wed, 21 Nov 2018 14:15:28 +0200 Subject: [PATCH 02/10] 1524 - Maintain blue outline of the currently selected layer (vertical / fill image) --- assets/css/amp-editor-story-blocks.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/assets/css/amp-editor-story-blocks.css b/assets/css/amp-editor-story-blocks.css index 9d9a54f4340..289d3f91228 100644 --- a/assets/css/amp-editor-story-blocks.css +++ b/assets/css/amp-editor-story-blocks.css @@ -239,6 +239,11 @@ 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 > div[data-amp-selected="parent"] > .editor-block-list__block-edit::before, +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; From 7f293bf64f603569cc867eedb281eff72269fc14 Mon Sep 17 00:00:00 2001 From: Mike Crantea Date: Wed, 21 Nov 2018 14:32:33 +0200 Subject: [PATCH 03/10] 1524 - Maintain blue border when selecting the story page --- assets/css/amp-editor-story-blocks.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/assets/css/amp-editor-story-blocks.css b/assets/css/amp-editor-story-blocks.css index 289d3f91228..8fbd62172d5 100644 --- a/assets/css/amp-editor-story-blocks.css +++ b/assets/css/amp-editor-story-blocks.css @@ -2,6 +2,10 @@ div[data-type="amp/amp-story-page"] { border: 1px solid #ffdddd; } +.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"] { padding: 0; margin: 60px auto 0; From 58ad5199ea2986b454e101be8f1ed2482ba80de8 Mon Sep 17 00:00:00 2001 From: Mike Crantea Date: Wed, 21 Nov 2018 14:40:09 +0200 Subject: [PATCH 04/10] 1524 - Add white shadow to placeholder text --- assets/css/amp-editor-story-blocks.css | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/assets/css/amp-editor-story-blocks.css b/assets/css/amp-editor-story-blocks.css index 8fbd62172d5..335bd4cea7c 100644 --- a/assets/css/amp-editor-story-blocks.css +++ b/assets/css/amp-editor-story-blocks.css @@ -97,6 +97,20 @@ div[data-type="amp/amp-story-page"] .editor-inner-blocks .editor-block-list__lay 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; From ce318922d1c564063b8852a6708d4785e8155f56 Mon Sep 17 00:00:00 2001 From: Mike Crantea Date: Wed, 21 Nov 2018 15:38:45 +0200 Subject: [PATCH 05/10] 1524 - Fix issue with warning block not being clickable --- assets/css/amp-editor-story-blocks.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/assets/css/amp-editor-story-blocks.css b/assets/css/amp-editor-story-blocks.css index 335bd4cea7c..60a716cb931 100644 --- a/assets/css/amp-editor-story-blocks.css +++ b/assets/css/amp-editor-story-blocks.css @@ -331,3 +331,11 @@ div[data-type="amp/amp-story-page"] > div > div > .is-selected-parent > .editor- .post-type-amp_story .components-range-control__number { width: 60px; } + +.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; +} From 9a19ab9471a15eaf7e53a35aa476b12c22c1ac24 Mon Sep 17 00:00:00 2001 From: Mike Crantea Date: Thu, 22 Nov 2018 21:45:15 +0200 Subject: [PATCH 06/10] 1524 - Added border around the stories to match the ghost page --- assets/css/amp-editor-story-blocks.css | 21 ++++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/assets/css/amp-editor-story-blocks.css b/assets/css/amp-editor-story-blocks.css index f79e22f17e0..585404d2754 100644 --- a/assets/css/amp-editor-story-blocks.css +++ b/assets/css/amp-editor-story-blocks.css @@ -1,5 +1,15 @@ 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 { @@ -33,8 +43,8 @@ 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: 340px !important; + height: 555px !important; } .editor-block-list__layout div[data-type="amp/amp-story-cta-layer"] .editor-inner-blocks .editor-block-list__layout { @@ -361,8 +371,9 @@ div[data-type="amp/amp-story-page"] > div > div > .is-selected-parent > .editor- background-size: 86px 96px; border: 10px solid #eff0f1; border-radius: 0; - height: 533px; - width: 318px; + height: 555px; + width: 340px; + } .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, From c690bd8f151d9847f067bb79c7962057ec1ac489 Mon Sep 17 00:00:00 2001 From: Mike Crantea Date: Thu, 22 Nov 2018 22:54:57 +0200 Subject: [PATCH 07/10] 1524 - Removed some old outlines. --- assets/css/amp-editor-story-blocks.css | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/assets/css/amp-editor-story-blocks.css b/assets/css/amp-editor-story-blocks.css index 585404d2754..d7925cbe73e 100644 --- a/assets/css/amp-editor-story-blocks.css +++ b/assets/css/amp-editor-story-blocks.css @@ -43,8 +43,8 @@ div[data-type="amp/amp-story-page"]::after { 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: 340px !important; - height: 555px !important; + width: 338px !important; + height: 553px !important; } .editor-block-list__layout div[data-type="amp/amp-story-cta-layer"] .editor-inner-blocks .editor-block-list__layout { @@ -234,11 +234,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; } @@ -267,7 +262,6 @@ 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 > div[data-amp-selected="parent"] > .editor-block-list__block-edit::before, 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; } @@ -371,9 +365,8 @@ div[data-type="amp/amp-story-page"] > div > div > .is-selected-parent > .editor- background-size: 86px 96px; border: 10px solid #eff0f1; border-radius: 0; - height: 555px; - width: 340px; - + height: 553px; + 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, @@ -397,3 +390,7 @@ div[data-type="amp/amp-story-page"] > div > div > .is-selected-parent > .editor- .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; +} From 3f84e6183eb60815c4ca6398a175ab9d425430f8 Mon Sep 17 00:00:00 2001 From: Mike Crantea Date: Thu, 22 Nov 2018 22:55:37 +0200 Subject: [PATCH 08/10] 1524 - Made CTA layer not overflow when too much text is entered --- assets/css/amp-editor-story-blocks.css | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/assets/css/amp-editor-story-blocks.css b/assets/css/amp-editor-story-blocks.css index d7925cbe73e..8d91dd0cf02 100644 --- a/assets/css/amp-editor-story-blocks.css +++ b/assets/css/amp-editor-story-blocks.css @@ -219,9 +219,15 @@ div[data-amp-position="lower-third"] { .editor-block-list__layout div[data-type="amp/amp-story-cta-layer"] { position: absolute; - height: 20%; + min-height: 20%; + height: auto; width: 100%; - bottom: 0; + 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 { @@ -365,7 +371,7 @@ div[data-type="amp/amp-story-page"] > div > div > .is-selected-parent > .editor- background-size: 86px 96px; border: 10px solid #eff0f1; border-radius: 0; - height: 553px; + height: 533px; width: 338px; } From c9805e7ceaa653b48de2af64573a4dc2d10d8dd1 Mon Sep 17 00:00:00 2001 From: Mike Crantea Date: Thu, 22 Nov 2018 23:06:48 +0200 Subject: [PATCH 09/10] 1524 - Removing important width on block list layout. (was causing CTA to get out of its space) --- assets/css/amp-editor-story-blocks.css | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/assets/css/amp-editor-story-blocks.css b/assets/css/amp-editor-story-blocks.css index 8d91dd0cf02..bba8db4f452 100644 --- a/assets/css/amp-editor-story-blocks.css +++ b/assets/css/amp-editor-story-blocks.css @@ -43,8 +43,14 @@ div[data-type="amp/amp-story-page"]::after { 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: 338px !important; - height: 553px !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 { @@ -221,7 +227,7 @@ div[data-amp-position="lower-third"] { position: absolute; min-height: 20%; height: auto; - width: 100%; + width: 318px; bottom: 38px; } From 540e9214dd4e45191615620052e5078b3b4075b3 Mon Sep 17 00:00:00 2001 From: Mike Crantea Date: Thu, 22 Nov 2018 23:12:02 +0200 Subject: [PATCH 10/10] 1522 - Update the border & background of the page --- assets/css/amp-editor-story-blocks.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/css/amp-editor-story-blocks.css b/assets/css/amp-editor-story-blocks.css index bba8db4f452..cee7b8640cb 100644 --- a/assets/css/amp-editor-story-blocks.css +++ b/assets/css/amp-editor-story-blocks.css @@ -22,7 +22,7 @@ div[data-type="amp/amp-story-page"]::after { } .editor-block-list__layout div[data-type="amp/amp-story-page"] .components-placeholder.wp-block-image { - background: #dcdcdc; + background: #f9f9f9; } @media (min-width: 600px) {