From 354ce95ede5b744bb94471934fdf72b96e014b86 Mon Sep 17 00:00:00 2001 From: Oliver Juhas Date: Tue, 21 Aug 2018 14:54:46 +0200 Subject: [PATCH 1/8] Fixing IE11 flexbox alignment when min-width is set For more info on the fix please see https://github.com/philipwalton/flexbugs/issues/231 --- packages/block-library/src/cover-image/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/cover-image/style.scss b/packages/block-library/src/cover-image/style.scss index 8c38d4aa2939a..5964c508c413e 100644 --- a/packages/block-library/src/cover-image/style.scss +++ b/packages/block-library/src/cover-image/style.scss @@ -2,6 +2,7 @@ position: relative; background-size: cover; background-position: center center; + height: 430px; min-height: 430px; width: 100%; margin: 0 0 1.5em 0; From d72da90fa330292536901da7c95e9232d031db54 Mon Sep 17 00:00:00 2001 From: Oliver Juhas Date: Tue, 21 Aug 2018 15:14:11 +0200 Subject: [PATCH 2/8] Updating the IE11 alignment fix Updating the fix to use https://github.com/philipwalton/flexbugs/issues/231#issuecomment-362790042 approach for cases with larger cover image text. --- packages/block-library/src/cover-image/style.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/cover-image/style.scss b/packages/block-library/src/cover-image/style.scss index 5964c508c413e..c7eef570beeb7 100644 --- a/packages/block-library/src/cover-image/style.scss +++ b/packages/block-library/src/cover-image/style.scss @@ -2,7 +2,6 @@ position: relative; background-size: cover; background-position: center center; - height: 430px; min-height: 430px; width: 100%; margin: 0 0 1.5em 0; @@ -10,6 +9,12 @@ justify-content: center; align-items: center; + &::after{ + content: ''; + min-height: inherit; + font-size: 0; + } + &.has-left-content { justify-content: flex-start; From 7f8d71750b8950562c54cf9c56d570853256caca Mon Sep 17 00:00:00 2001 From: Oliver Juhas Date: Tue, 21 Aug 2018 15:18:41 +0200 Subject: [PATCH 3/8] Documenting the code --- packages/block-library/src/cover-image/style.scss | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/cover-image/style.scss b/packages/block-library/src/cover-image/style.scss index c7eef570beeb7..b87c081619ddd 100644 --- a/packages/block-library/src/cover-image/style.scss +++ b/packages/block-library/src/cover-image/style.scss @@ -9,12 +9,6 @@ justify-content: center; align-items: center; - &::after{ - content: ''; - min-height: inherit; - font-size: 0; - } - &.has-left-content { justify-content: flex-start; @@ -86,4 +80,11 @@ max-width: $content-width / 2; width: 100%; } + + // Preventing IE11 issue of misplacing flex alignment (https://github.com/WordPress/gutenberg/issues/5791) + &::after{ + content: ''; + min-height: inherit; + font-size: 0; + } } From a138b8327145dc6be9bcb10d4ed0b4158f35d9f8 Mon Sep 17 00:00:00 2001 From: Matthew Riley MacPherson Date: Tue, 21 Aug 2018 19:26:42 +0100 Subject: [PATCH 4/8] chore: Tweak code style --- packages/block-library/src/cover-image/style.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/cover-image/style.scss b/packages/block-library/src/cover-image/style.scss index b87c081619ddd..4b217210d5f1a 100644 --- a/packages/block-library/src/cover-image/style.scss +++ b/packages/block-library/src/cover-image/style.scss @@ -81,10 +81,11 @@ width: 100%; } - // Preventing IE11 issue of misplacing flex alignment (https://github.com/WordPress/gutenberg/issues/5791) - &::after{ + // Prevents misplaced flex alignment in IE11. + // See: https://github.com/WordPress/gutenberg/issues/5791 + &::after { content: ''; - min-height: inherit; font-size: 0; + min-height: inherit; } } From f6485834015fbcb213c9d5c3a6adb4edd86e13ee Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Fri, 16 Nov 2018 15:27:02 -0500 Subject: [PATCH 5/8] Add display: block, remove Github ticket mention. --- packages/block-library/src/cover/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss index 61c233f721f35..e3115d25de107 100644 --- a/packages/block-library/src/cover/style.scss +++ b/packages/block-library/src/cover/style.scss @@ -97,8 +97,8 @@ } // Prevents misplaced flex alignment in IE11. - // See: https://github.com/WordPress/gutenberg/issues/5791 &::after { + display: block; content: ""; font-size: 0; min-height: inherit; From 0954f4356bb630e93a6cd1c60b90795f87332778 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Tue, 20 Nov 2018 08:25:53 -0500 Subject: [PATCH 6/8] Ignore the IE11 cover image fix in browsers that support flex. --- packages/block-library/src/cover/style.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss index e3115d25de107..4cbf3f200bae2 100644 --- a/packages/block-library/src/cover/style.scss +++ b/packages/block-library/src/cover/style.scss @@ -102,6 +102,11 @@ content: ""; font-size: 0; min-height: inherit; + + // IE doesn't support flex so omit that. + @supports (position: sticky) { + content: none; + } } // Aligned cover blocks should not use our global alignment rules From fa85a2f195045a92de9d63558151460f8f9addf9 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Tue, 20 Nov 2018 13:23:43 -0500 Subject: [PATCH 7/8] Add a better description of the IE fix. --- packages/block-library/src/cover/style.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss index 4cbf3f200bae2..db079c55a24f2 100644 --- a/packages/block-library/src/cover/style.scss +++ b/packages/block-library/src/cover/style.scss @@ -96,7 +96,8 @@ width: 100%; } - // Prevents misplaced flex alignment in IE11. + // Using flexbox without an assigned height property breaks vertical center alignment in IE11. + // Apphending an empty ::after element tricks IE11 into giving the cover image an implicit height, which sidesteps this issue. &::after { display: block; content: ""; From fad62779794cf9740a51b7e0b68ec89e9c995132 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Tue, 20 Nov 2018 13:25:07 -0500 Subject: [PATCH 8/8] Fix typo. --- packages/block-library/src/cover/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss index db079c55a24f2..a9223bfb30c2f 100644 --- a/packages/block-library/src/cover/style.scss +++ b/packages/block-library/src/cover/style.scss @@ -97,7 +97,7 @@ } // Using flexbox without an assigned height property breaks vertical center alignment in IE11. - // Apphending an empty ::after element tricks IE11 into giving the cover image an implicit height, which sidesteps this issue. + // Appending an empty ::after element tricks IE11 into giving the cover image an implicit height, which sidesteps this issue. &::after { display: block; content: "";