Gutenberg compatibility

assets/sass/elements/_tables.scss

@@ -1,6 +1,8 @@
 table,
 th,
-td {
+td,
+.wp-block-table th,
+.wp-block-table td {
 	border: 1px solid #D1D1D1;
 }
 
@@ -16,21 +18,27 @@ table {
 
 caption,
 th,
-td {
+td,
+.wp-block-table th,
+.wp-block-table td {
 	font-weight: normal;
 	text-align: left;
 }
 
-th {
+th,
+.wp-block-table th {
 	border-width: 0 1px 1px 0;
 	font-weight: 700;
 }
 
-td {
+td,
+.wp-block-table td {
 	border-width: 0 1px 1px 0;
 }
 
 th,
-td {
+td,
+.wp-block-table th,
+.wp-block-table td {
 	padding: 0.4375em;
 }

assets/sass/media/_galleries.scss

@@ -44,3 +44,21 @@
 .gallery-caption {
 	display: block;
 }
+
+ul.wp-block-gallery {
+	padding: 0;
+}
+
+.wp-block-gallery ul.blocks-gallery-grid img,
+ul.wp-block-gallery img {
+	margin-bottom: 0;
+}
+
+/* Gutenberg Blocks Layout.
+--------------------------------------------------------------*/
+.wp-block-gallery.alignleft, .wp-block-gallery.alignright, .wp-block-gallery.aligncenter,
+.wp-block-social-links.alignleft,
+.wp-block-social-links.alignright,
+.wp-block-social-links.aligncenter {
+	display: flex;
+}

assets/sass/navigations/_menus.scss

@@ -1073,3 +1073,7 @@
 .clients-all-content .bx-next {
 	right: 0;
 }
+
+.wp-social-link svg {
+	color: #ffffff;
+}

assets/sass/responsive/_large.scss

@@ -1,12 +1,22 @@
 @media screen and ( max-width: 1200px ) {
-	.full-width {
-		.alignwide {
+	.full-width #primary .entry-content > .alignwide
+		 {
 			margin-left: -10px;
 			margin-right: -10px;
 		}
 	}
-}
-
+
+@media screen and (max-width: 1400px) and (min-width: 1200px) {
+	.full-width #primary .entry-content > .alignwide {
+	   margin-left: -30px;
+	   margin-right: -30px;
+	}
+
+	.full-width #primary .entry-content > .alignfull {
+	   margin-left: -50px;
+	   margin-right: -50px;
+	}
+ }
 @media screen and ( min-width: 992px ) {
 	/* Make sticky header on desktop */
 	.header-sticky-desktop {
@@ -22,8 +32,6 @@
 	}
 }
 
-
-
 @media ( min-width: 768px ) {
 
 	/* Only make slider full viewport height on larger devices */
@@ -34,4 +42,4 @@
 			}
 		}
 	}
-}
+}

assets/sass/responsive/_small.scss

@@ -143,19 +143,32 @@
 
 @media screen and ( max-width: 600px ) {
 	.full-width {
-		.alignwide {
-			margin-left: 0;
-			margin-right: 0;
-		}
+		#primary {
+			.entry-content {
 
+				> .alignwide {
+					margin-left: 0;
+					margin-right: 0;
+				}
+			}
+		}
 		&.boxed {
-			.alignwide {
-				margin-left: 0;
-				margin-right: 0;
+
+			.site-content {
+				overflow: hidden;
 			}
 
+			#primary {
+
+				.entry-content {
+
+					> .alignwide {
+						margin-left: 0;
+						margin-right: 0;
+					}
+				}
+			}
 		}
-	}
 }
 
 @media screen and ( max-width: 480px ) {
@@ -250,3 +263,4 @@
 		}
 	}
 }
+}

assets/sass/site/primary/_posts.scss

@@ -420,33 +420,55 @@
 =            Gutenberg AlignWide            =
 ====================================*/
 .full-width {
-	.alignfull {
-		margin-left: calc(50% - 49.5vw);
-		margin-right: calc(50% - 49.5vw);
-		max-width: unset;
+	#primary {
+		.entry-content {
 
-		img {
-			max-width: unset;
-		}
-	}
+			> .alignfull {
+				margin-left: calc(50% - 50vw);
+				margin-right: calc(50% - 50vw);
+				max-width: unset;
 
-	.alignwide {
+				&.wp-block-cover,
+				&.wp-block-cover-image {
+					width: unset;
+				}
+			}
+
+	> .alignwide {
 		margin-left: -60px;
 		margin-right: -60px;
 		max-width: unset;
 	}
-
+}
+	}
 	&.boxed {
 		#content {
 			overflow: hidden;
 		}
 
-		.alignwide {
-			margin-left: -60px;
-			margin-right: -60px;
+	#primary {
+
+		.entry-content {
+
+			> .alignfull {
+				margin-left: -15px;
+				margin-right: -15px;
+
+				&.wp-block-cover,
+				&.wp-block-cover-image {
+					width: unset;
+				}
+			}
+
+			> .alignwide {
+				margin-left: -15px;
+				margin-right: -15px;
+				max-width: unset;
+			}
 		}
+	}
 
 	}
 }
 
-/*=====  End of Gutenberg AlignWide  ======*/
+/*=====  End of Gutenberg AlignWide  ======*/

assets/sass/typography/_copy.scss

@@ -10,7 +10,10 @@ p {
 }
 
 
-blockquote {
+blockquote,
+.wp-block-quote,
+.wp-block-quote.is-style-large,
+.wp-block-quote.has-text-align-right {
 	font-family: georgia, "Times New Roman", cursive;
 	font-size: 16px;
 	border-left: 3px solid $color-gray-lighten;

editor-style.css

@@ -285,7 +285,10 @@ p {
 	line-height: 24px;
 }
 
-blockquote {
+blockquote,
+.wp-block-quote,
+.wp-block-quote.is-style-large,
+.wp-block-quote.has-text-align-right {
 	font-family: georgia, "Times New Roman", cursive;
 	font-size: 16px;
 	border-left: 3px solid #E5E4E6;
@@ -421,6 +424,24 @@ h6 {
 	display: block;
 }
 
+ul.wp-block-gallery {
+	padding: 0;
+}
+
+.wp-block-gallery ul.blocks-gallery-grid img,
+ul.wp-block-gallery img {
+	margin-bottom: 0;
+}
+
+/* Gutenberg Blocks Layout.
+--------------------------------------------------------------*/
+.wp-block-gallery.alignleft, .wp-block-gallery.alignright, .wp-block-gallery.aligncenter,
+.wp-block-social-links.alignleft,
+.wp-block-social-links.alignright,
+.wp-block-social-links.aligncenter {
+	display: flex;
+}
+
 /*----------  Media Elements  ----------*/
 .page-content .wp-smiley,
 .entry-content .wp-smiley,

functions.php

@@ -106,9 +106,14 @@ function suffice_setup() {
 		*/
 		add_editor_style( array( 'editor-style.css', suffice_fonts_url() ) );
 
-		// Gutenberg layout support.
+		// Gutenberg wide layout support.
 		add_theme_support( 'align-wide' );
 
+		// Gutenberg block styles support.
+		add_theme_support( 'wp-block-styles' );
+
+		// Gutenberg responsive embeds support.
+		add_theme_support( 'responsive-embeds' );
 	}
 endif;
 add_action( 'after_setup_theme', 'suffice_setup' );
@@ -256,6 +261,7 @@ function suffice_scripts() {
 	wp_enqueue_style( 'perfect-scrollbar', get_template_directory_uri() . '/assets/css/perfect-scrollbar' . $suffix . '.css', array(), '0.6.16' );
 	wp_enqueue_style( 'suffice-style', get_stylesheet_uri() );
 
+
 	/* Scripts */
 	wp_enqueue_script( 'suffice-skip-link-focus-fix', get_template_directory_uri() . '/assets/js/skip-link-focus-fix.js', array(), '20151215', true );
 	wp_enqueue_script( 'swiper', get_template_directory_uri() . '/assets/js/swiper.jquery' . $suffix . '.js', array( 'jquery' ), '3.4.0', true );
@@ -289,6 +295,18 @@ function suffice_scripts() {
 
 add_action( 'wp_enqueue_scripts', 'suffice_scripts' );
 
+/**
+ * Enqueue Google fonts and editor styles.
+ */
+
+function suffice_block_editor_styles() {
+	wp_enqueue_style( 'suffice-editor-googlefonts', '//fonts.googleapis.com/css2?family=Open+Sans' );
+	wp_enqueue_style( 'suffice-block-editor-styles', get_template_directory_uri() . '/style-editor-block.css' );
+}
+
+add_action( 'enqueue_block_editor_assets', 'suffice_block_editor_styles', 1, 1 );
+
+
 /**
  * Adds css style for customizer ui
  */

gulpfile.js

@@ -137,7 +137,7 @@ function makepotfile() {
 function watch() {
     gulp.watch( paths.styles.src, sassCompile );
     gulp.watch( paths.adminscss.src, compileAdminSass );
-    gulp.watch( [paths.js.src, paths.php.src], browserSyncReload );
+    //gulp.watch( [paths.js.src, paths.php.src], browserSyncReload );
 }
 
 function deleteCSS() {