Blank Canvas Blocks: Use Gutenberg breakpoints. (#3505)

* Blank Canvas Blocks: Replace our custom breakpoints with the gutenberg defaults

blank-canvas-blocks/assets/ponyfill.css

@@ -20,9 +20,6 @@ img {
 	box-sizing: border-box;
 }
 
-/**
- * Required Variables
- */
 .screen-reader-text {
 	/* Text meant only for screen readers. */
 	border: 0;
@@ -64,6 +61,40 @@ img {
 	outline: 0;
 }
 
+/**
+ * Breakpoints & Media Queries
+ */
+/**
+ * Breakpoint mixins
+ */
+/**
+ * Long content fade mixin
+ *
+ * Creates a fading overlay to signify that the content is longer
+ * than the space allows.
+ */
+/**
+ * Focus styles.
+ */
+/**
+ * Applies editor left position to the selector passed as argument
+ */
+/**
+ * Styles that are reused verbatim in a few places
+ */
+/**
+ * Allows users to opt-out of animations via OS-level preferences.
+ */
+/**
+ * Reset default styles for JavaScript UI based pages.
+ * This is a WP-admin agnostic reset
+ */
+/**
+ * Reset the WP Admin page styles for Gutenberg-like pages.
+ */
+/**
+ * These are default block editor widths in case the theme doesn't provide them.
+ */
 .wp-block-post-content > .alignfull {
 	margin-left: calc(-1 * var(--wp--custom--margin--horizontal));
 	margin-right: calc(-1 * var(--wp--custom--margin--horizontal));
@@ -267,14 +298,14 @@ ol {
 	padding: var(--wp--custom--navigation--submenu--padding);
 }
 
-@media only screen and (min-width: 482px) {
+@media (min-width: 480px) {
 	header .wp-block-navigation .wp-block-navigation__mobile-menu-open-button,
 	header .wp-block-navigation .wp-block-navigation__mobile-menu-close-button {
 		display: none;
 	}
 }
 
-@media only screen and (max-width: 481px) {
+@media (max-width: 479px) {
 	header .wp-block-navigation:not(.show) {
 		text-align: right;
 		padding-left: var(--wp--custom--margin--horizontal);

blank-canvas-blocks/package.json

@@ -7,9 +7,11 @@
   },
   "homepage": "https://github.com/Automattic/themes#readme",
   "devDependencies": {
+    "@wordpress/base-styles": "^3.3.0",
     "@wordpress/browserslist-config": "^2.2.2",
     "chokidar-cli": "^2.1.0",
     "node-sass": "^4.13.1",
+    "node-sass-package-importer": "^5.3.2",
     "rtlcss": "^2.4.0"
   },
   "rtlcssConfig": {
@@ -30,6 +32,6 @@
   ],
   "scripts": {
     "start": "chokidar \"**/*.scss\" -c \"npm run build\" --initial",
-    "build": "node-sass sass/ponyfill.scss assets/ponyfill.css --output-style expanded --indent-type tab --indent-width 1 --source-map true"
+    "build": "node-sass --importer node_modules/node-sass-package-importer/dist/cli.js sass/ponyfill.scss assets/ponyfill.css --output-style expanded --indent-type tab --indent-width 1 --source-map true"
   }
 }

blank-canvas-blocks/sass/base/_breakpoints.scss

@@ -1,50 +1,8 @@
-// Responsive breakpoints mixin
-// Because Media Queries aren't able to use CSS Variables those breakpoints need to be defined upon SCSS compilation.
-// Unfortunately that introduces unalterable opinion as to where those breakpoints should be.
-/**
- * Required Variables
- */
- $breakpoint_mobile: 482px;
- $breakpoint_laptop: 1020px;
- $breakpoint_desktop: 1290px;
-
- // Responsive breakpoints mixin
- @mixin media( $res ) {
-
-	 @if mobile-only == $res {
-		 @media only screen and (max-width: #{$breakpoint_mobile - 1}) {
-			 @content;
-		 }
-	 }
-
-	 @if mobile == $res {
-		 @media only screen and (min-width: #{$breakpoint_mobile}) {
-			 @content;
-		 }
-	 }
-
-	 @if laptop-only == $res {
-		 @media only screen and (max-width: #{$breakpoint_laptop - 1}) {
-			 @content;
-		 }
-	 }
-
-	 @if laptop == $res {
-		 @media only screen and (min-width: #{$breakpoint_laptop}) {
-			 @content;
-		 }
-	 }
-
-	 @if desktop-only == $res {
-		 @media only screen and (max-width: #{$breakpoint_desktop - 1}) {
-			 @content;
-		 }
-	 }
-
-	 @if desktop == $res {
-		 @media only screen and (min-width: #{$breakpoint_desktop}) {
-			 @content;
-		 }
-	 }
-
- }
+@import '~@wordpress/base-styles/breakpoints';
+@import '~@wordpress/base-styles/mixins';
+
+ @mixin break-mobile-only() {
+	@media (max-width: #{ ($break-mobile - 1) }) {
+		@content;
+	}
+}

blank-canvas-blocks/sass/base/_style.scss

@@ -5,9 +5,8 @@
 
 @import "normalize";
 
-@import "breakpoints";
 @import "accessibility";
-
+@import "breakpoints";
 @import "alignment";
 @import "text-selection";
 

blank-canvas-blocks/sass/blocks/_navigation.scss

@@ -1,5 +1,3 @@
-
-
 .wp-block-navigation {
 	a {
 		border-bottom: none;
@@ -22,7 +20,7 @@
 				color: var(--wp--custom--navigation--color--hover-text);
 				background-color: var(--wp--custom--navigation--color--hover-background);
 			}
-		}	
+		}
 		.has-child {
 			.wp-block-navigation-link__container {
 				padding: 0;
@@ -45,7 +43,7 @@
 	}
 }
 
-@include media(mobile) {
+@include break-mobile {
 	header .wp-block-navigation {
 		.wp-block-navigation__mobile-menu-open-button,
 		.wp-block-navigation__mobile-menu-close-button {
@@ -54,7 +52,7 @@
 	}
 }
 
-@include media(mobile-only) {
+@include break-mobile-only {
 	header .wp-block-navigation:not(.show) {
 		text-align: right;
 		padding-left: var(--wp--custom--margin--horizontal);
@@ -80,9 +78,9 @@
 	header .wp-block-navigation.show {
 		opacity: 1;
 		position:absolute;
-		top: 0; 
+		top: 0;
 		bottom: 0;
-		right: 0;	
+		right: 0;
 		width: 100%;
 
 		.wp-block-navigation__mobile-menu-close-button {
@@ -106,7 +104,7 @@
 			top: 0;
 			bottom: 0;
 			left: 0;
-			right: 0;	
+			right: 0;
 			z-index: 99999;
 			overflow-y: scroll;
 		}