Merge pull request #655 from Automattic/fix/media-text-blocks-644

Multiple themes: Fixes hard coded column width for Media & Text Block

friendly-business/sass/blocks/_blocks.scss

@@ -794,8 +794,6 @@
 		}
 
 		@include media(tablet) {
-			// Modify the default 50-50 proportion between image and text.
-			grid-template-columns: 60% auto;
 
 			.wp-block-media-text__content {
 				:last-child {
@@ -804,7 +802,6 @@
 			}
 
 			&.has-media-on-the-right {
-				grid-template-columns: auto 60%;
 
 				.wp-block-media-text__content {
 

friendly-business/style-rtl.css

@@ -4137,15 +4137,9 @@ body.page .main-navigation {
 }
 
 @media only screen and (min-width: 768px) {
-  .entry .entry-content .wp-block-media-text {
-    grid-template-columns: 60% auto;
-  }
   .entry .entry-content .wp-block-media-text .wp-block-media-text__content :last-child {
     margin-bottom: 1rem;
   }
-  .entry .entry-content .wp-block-media-text.has-media-on-the-right {
-    grid-template-columns: auto 60%;
-  }
   .entry .entry-content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content :first-child {
     margin-top: 1rem;
   }

friendly-business/style.css

@@ -1242,17 +1242,6 @@ body.page .main-navigation {
   /* Nested sub-menu dashes */
 }
 
-.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu {
-  display: block;
-  left: 0;
-  margin-top: 0;
-  opacity: 1;
-  width: auto;
-  min-width: 100%;
-  /* Non-mobile position */
-  /* Nested sub-menu dashes */
-}
-
 .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu {
   display: block;
   left: 0;
@@ -1265,21 +1254,6 @@ body.page .main-navigation {
 }
 
 @media only screen and (min-width: 768px) {
-  .main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu {
-    display: block;
-    margin-top: 0;
-    opacity: 1;
-    position: absolute;
-    left: 0;
-    right: auto;
-    top: auto;
-    bottom: auto;
-    height: auto;
-    min-width: -moz-max-content;
-    min-width: -webkit-max-content;
-    min-width: max-content;
-    transform: none;
-  }
   .main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu {
     display: block;
     margin-top: 0;
@@ -1319,13 +1293,6 @@ body.page .main-navigation {
   position: absolute;
 }
 
-.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu.hidden-links {
-  left: 0;
-  width: 100%;
-  display: table;
-  position: absolute;
-}
-
 .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu.hidden-links {
   left: 0;
   width: 100%;
@@ -1334,12 +1301,6 @@ body.page .main-navigation {
 }
 
 @media only screen and (min-width: 768px) {
-  .main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu.hidden-links {
-    right: 0;
-    left: auto;
-    display: block;
-    width: max-content;
-  }
   .main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu.hidden-links {
     right: 0;
     left: auto;
@@ -1358,10 +1319,6 @@ body.page .main-navigation {
   display: none;
 }
 
-.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .submenu-expand {
-  display: none;
-}
-
 .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .submenu-expand {
   display: none;
 }
@@ -1376,16 +1333,6 @@ body.page .main-navigation {
   /* Non-mobile position */
 }
 
-.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .sub-menu {
-  display: block;
-  margin-top: inherit;
-  position: relative;
-  width: 100%;
-  left: 0;
-  opacity: 1;
-  /* Non-mobile position */
-}
-
 .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu {
   display: block;
   margin-top: inherit;
@@ -1397,10 +1344,6 @@ body.page .main-navigation {
 }
 
 @media only screen and (min-width: 768px) {
-  .main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .sub-menu {
-    float: none;
-    max-width: 100%;
-  }
   .main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .sub-menu {
     float: none;
     max-width: 100%;
@@ -1415,10 +1358,6 @@ body.page .main-navigation {
   counter-reset: submenu;
 }
 
-.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .sub-menu {
-  counter-reset: submenu;
-}
-
 .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu {
   counter-reset: submenu;
 }
@@ -1430,13 +1369,6 @@ body.page .main-navigation {
   counter-increment: submenu;
 }
 
-.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .sub-menu > li > a::before {
-  font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
-  font-weight: normal;
-  content: "– " counters(submenu, "– ", none);
-  counter-increment: submenu;
-}
-
 .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu > li > a::before {
   font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
   font-weight: normal;
@@ -4285,15 +4217,9 @@ body.page .main-navigation {
 }
 
 @media only screen and (min-width: 768px) {
-  .entry .entry-content .wp-block-media-text {
-    grid-template-columns: 60% auto;
-  }
   .entry .entry-content .wp-block-media-text .wp-block-media-text__content :last-child {
     margin-bottom: 1rem;
   }
-  .entry .entry-content .wp-block-media-text.has-media-on-the-right {
-    grid-template-columns: auto 60%;
-  }
   .entry .entry-content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content :first-child {
     margin-top: 1rem;
   }

modern-business/style-editor.css

@@ -390,6 +390,18 @@ figcaption,
   margin-bottom: -32px;
 }
 
+.wp-block-media-text .components-resizable-box__handle {
+  z-index: 3;
+}
+
+.wp-block-media-text .components-resizable-box__handle-right {
+  right: calc((12px - 30px) * -1);
+}
+
+.wp-block-media-text .components-resizable-box__handle-left {
+  left: calc((12px - 30px) * -1);
+}
+
 @media only screen and (min-width: 768px) {
   .wp-block-media-text {
     padding: 60px 0;

modern-business/style-editor.scss

@@ -379,6 +379,21 @@ figcaption,
 		margin-bottom: -32px;
 	}
 
+	// Make sure the box handle is clickable.
+	.components-resizable-box__handle {
+		z-index: 3;
+	}
+
+	// Move the box handle to the 'true' center.
+	.components-resizable-box__handle-right {
+		right: calc((12px - 30px) * -1);
+	}
+
+	// Move the box handle to the 'true' center.
+	.components-resizable-box__handle-left {
+		left: calc((12px - 30px) * -1);
+	}
+
 	@include media(tablet) {
 		padding: 60px 0;
 

professional-business/sass/blocks/_blocks.scss

@@ -773,15 +773,12 @@
 		}
 
 		@include media(tablet) {
-			// Modify the default 50-50 proportion between image and text.
-			grid-template-columns: 60% auto;
 
 			.wp-block-media-text__content {
 				padding-right: calc(8% + 10px);
 			}
 
 			&.has-media-on-the-right {
-				grid-template-columns: auto 60%;
 
 				.wp-block-media-text__content {
 					padding-left: calc(8% + 10px);

professional-business/style-editor.css

@@ -561,11 +561,6 @@ figcaption,
   background: #0d1b24;
   color: #fff;
   position: relative;
-  grid-template-columns: 60% auto;
-}
-
-.wp-block-media-text.has-media-on-the-right {
-  grid-template-columns: auto 60%;
 }
 
 .wp-block-media-text a,
@@ -588,6 +583,10 @@ figcaption,
   z-index: 2;
 }
 
+.wp-block-media-text .components-resizable-box__handle {
+  z-index: 3;
+}
+
 /** === Table === */
 .wp-block-table td, .wp-block-table th {
   border-color: #767676;

professional-business/style-editor.scss

@@ -578,13 +578,6 @@ figcaption,
 
 	position: relative;
 
-	// Modify the default 50-50 proportion between image and text.
-	grid-template-columns: 60% auto;
-
-	&.has-media-on-the-right {
-		grid-template-columns: auto 60%;
-	}
-
 	a,
 	a:hover {
 		color: inherit;
@@ -605,6 +598,11 @@ figcaption,
 	.editor-inner-blocks {
 		z-index: 2;
 	}
+
+	// Make sure the box handle is clickable.
+	.components-resizable-box__handle {
+		z-index: 3;
+	}
 }
 
 /** === Table === */

professional-business/style-rtl.css

@@ -4271,15 +4271,9 @@ body.page .main-navigation {
 }
 
 @media only screen and (min-width: 768px) {
-  .entry .entry-content .wp-block-media-text {
-    grid-template-columns: 60% auto;
-  }
   .entry .entry-content .wp-block-media-text .wp-block-media-text__content {
     padding-left: calc(8% + 10px);
   }
-  .entry .entry-content .wp-block-media-text.has-media-on-the-right {
-    grid-template-columns: auto 60%;
-  }
   .entry .entry-content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
     padding-right: calc(8% + 10px);
     padding-left: 8%;

professional-business/style.css

@@ -4283,15 +4283,9 @@ body.page .main-navigation {
 }
 
 @media only screen and (min-width: 768px) {
-  .entry .entry-content .wp-block-media-text {
-    grid-template-columns: 60% auto;
-  }
   .entry .entry-content .wp-block-media-text .wp-block-media-text__content {
     padding-right: calc(8% + 10px);
   }
-  .entry .entry-content .wp-block-media-text.has-media-on-the-right {
-    grid-template-columns: auto 60%;
-  }
   .entry .entry-content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
     padding-left: calc(8% + 10px);
     padding-right: 8%;

sophisticated-business/sass/blocks/_blocks.scss

@@ -814,18 +814,12 @@
 		}
 
 		@include media(tablet) {
-			// Modify the default 50-50 proportion between image and text.
-			grid-template-columns: 60% auto;
 
 			.wp-block-media-text__content {
 				padding-left: 4.5%;
 				margin-left: 7.5%;
 			}
 
-			&.has-media-on-the-right {
-				grid-template-columns: auto 60%;
-			}
-
 			&.alignfull + .wp-block-media-text {
 				margin-top: -44px;
 			}

sophisticated-business/style-editor.css

@@ -600,17 +600,6 @@ figcaption,
   color: inherit;
 }
 
-@media only screen and (min-width: 768px) {
-  [data-type="core/media-text"] .wp-block-media-text {
-    grid-template-columns: 60% auto !important;
-    /* !important to override inline styles */
-  }
-  [data-type="core/media-text"] .wp-block-media-text.has-media-on-the-right {
-    grid-template-columns: auto 60% !important;
-    /* !important to override inline styles */
-  }
-}
-
 [data-type="core/media-text"] + [data-type="core/media-text"] {
   margin-top: -32px;
 }

sophisticated-business/style-editor.scss

@@ -607,15 +607,6 @@ figcaption,
 		a:hover {
 			color: inherit;
 		}
-
-		@include media(tablet) {
-			// Modify the default 50-50 proportion between image and text.
-			grid-template-columns: 60% auto !important; /* !important to override inline styles */
-
-			&.has-media-on-the-right {
-				grid-template-columns: auto 60% !important; /* !important to override inline styles */
-			}
-		}
 	}
 
 	& + [data-type="core/media-text"] {

sophisticated-business/style-rtl.css

@@ -4198,16 +4198,10 @@ body.page .main-navigation {
 }
 
 @media only screen and (min-width: 768px) {
-  .entry .entry-content .wp-block-media-text {
-    grid-template-columns: 60% auto;
-  }
   .entry .entry-content .wp-block-media-text .wp-block-media-text__content {
     padding-right: 4.5%;
     margin-right: 7.5%;
   }
-  .entry .entry-content .wp-block-media-text.has-media-on-the-right {
-    grid-template-columns: auto 60%;
-  }
   .entry .entry-content .wp-block-media-text.alignfull + .wp-block-media-text {
     margin-top: -44px;
   }

sophisticated-business/style.css

@@ -4278,16 +4278,10 @@ body.page .main-navigation {
 }
 
 @media only screen and (min-width: 768px) {
-  .entry .entry-content .wp-block-media-text {
-    grid-template-columns: 60% auto;
-  }
   .entry .entry-content .wp-block-media-text .wp-block-media-text__content {
     padding-left: 4.5%;
     margin-left: 7.5%;
   }
-  .entry .entry-content .wp-block-media-text.has-media-on-the-right {
-    grid-template-columns: auto 60%;
-  }
   .entry .entry-content .wp-block-media-text.alignfull + .wp-block-media-text {
     margin-top: -44px;
   }