Merge pull request #1331 from derweili/gutenberg

Gutenberg Support

functions.php

@@ -51,5 +51,8 @@
 /** Configure responsive image sizes */
 require_once( 'library/responsive-images.php' );
 
+/** Gutenberg editor support */
+require_once( 'library/gutenberg.php' );
+
 /** If your site requires protocol relative url's for theme assets, uncomment the line below */
 // require_once( 'library/class-foundationpress-protocol-relative-theme-assets.php' );

gulpfile.babel.js

@@ -77,7 +77,7 @@ function copy() {
 // Compile Sass into CSS
 // In production, the CSS is compressed
 function sass() {
-  return gulp.src('src/assets/scss/app.scss')
+  return gulp.src(['src/assets/scss/app.scss','src/assets/scss/editor.scss'])
     .pipe($.sourcemaps.init())
     .pipe($.sass({
       includePaths: PATHS.sass

library/foundation.php

@@ -156,71 +156,7 @@ function foundationpress_active_list_pages_class( $input ) {
 	add_filter( 'wp_list_pages', 'foundationpress_active_list_pages_class', 10, 2 );
 endif;
 
-/**
- * Enable Foundation responsive embeds for WP video embeds
- */
-
-if ( ! function_exists( 'foundationpress_responsive_video_oembed_html' ) ) :
-	function foundationpress_responsive_video_oembed_html( $html, $url, $attr, $post_id ) {
-
-		// Whitelist of oEmbed compatible sites that **ONLY** support video.
-		// Cannot determine if embed is a video or not from sites that
-		// support multiple embed types such as Facebook.
-		// Official list can be found here https://codex.wordpress.org/Embeds
-		$video_sites = array(
-			'youtube', // first for performance
-			'collegehumor',
-			'dailymotion',
-			'funnyordie',
-			'ted',
-			'videopress',
-			'vimeo',
-		);
-
-		$is_video = false;
-
-		// Determine if embed is a video
-		foreach ( $video_sites as $site ) {
-			// Match on `$html` instead of `$url` because of
-			// shortened URLs like `youtu.be` will be missed
-			if ( strpos( $html, $site ) ) {
-				$is_video = true;
-				break;
-			}
-		}
-
-		// Process video embed
-		if ( true == $is_video ) {
-
-			// Find the `<iframe>`
-			$doc = new DOMDocument();
-			$doc->loadHTML( $html );
-			$tags = $doc->getElementsByTagName( 'iframe' );
 
-			// Get width and height attributes
-			foreach ( $tags as $tag ) {
-				$width  = $tag->getAttribute( 'width' );
-				$height = $tag->getAttribute( 'height' );
-				break; // should only be one
-			}
-
-			$class = 'responsive-embed'; // Foundation class
-
-			// Determine if aspect ratio is 16:9 or wider
-			if ( is_numeric( $width ) && is_numeric( $height ) && ( $width / $height >= 1.7 ) ) {
-				$class .= ' widescreen'; // space needed
-			}
-
-			// Wrap oEmbed markup in Foundation responsive embed
-			return '<div class="' . $class . '">' . $html . '</div>';
-
-		} else { // not a supported embed
-			return $html;
-		}
-
-	}
-	add_filter( 'embed_oembed_html', 'foundationpress_responsive_video_oembed_html', 10, 4 );
-endif;
 
 /**
  * Get mobile menu ID

library/gutenberg.php

@@ -0,0 +1,38 @@
+<?php
+
+if ( ! function_exists( 'foundationpress_gutenberg_support' ) ) :
+	function foundationpress_gutenberg_support() {
+
+    // Add foundation color palette to the editor
+    add_theme_support( 'editor-color-palette', array(
+        array(
+            'name' => __( 'Primary Color', 'foundationpress' ),
+            'slug' => 'primary',
+            'color' => '#1779ba',
+        ),
+        array(
+            'name' => __( 'Secondary Color', 'foundationpress' ),
+            'slug' => 'secondary',
+            'color' => '#767676',
+        ),
+        array(
+            'name' => __( 'Success Color', 'foundationpress' ),
+            'slug' => 'success',
+            'color' => '#3adb76',
+        ),
+        array(
+            'name' => __( 'Warning color', 'foundationpress' ),
+            'slug' => 'warning',
+            'color' => '#ffae00',
+        ),
+        array(
+            'name' => __( 'Alert color', 'foundationpress' ),
+            'slug' => 'alert',
+            'color' => '#cc4b37',
+        )
+    ) );
+
+	}
+
+	add_action( 'after_setup_theme', 'foundationpress_gutenberg_support' );
+endif;

library/theme-support.php

@@ -42,8 +42,12 @@ function foundationpress_theme_support() {
 		add_theme_support( 'wc-product-gallery-lightbox' );
 		add_theme_support( 'wc-product-gallery-slider' );
 
+		add_theme_support( 'editor-styles' );
+
+		add_editor_style( get_stylesheet_directory_uri() . '/dist/assets/css/editor.css' );
+
 		// Add foundation.css as editor style https://codex.wordpress.org/Editor_Style
-		add_editor_style( 'dist/assets/css/' . foundationpress_asset_path( 'app.css' ) );
+		// add_editor_style( 'dist/assets/css/' . foundationpress_asset_path( 'editor.css' ) );
 	}
 
 	add_action( 'after_setup_theme', 'foundationpress_theme_support' );

src/assets/scss/app.scss

@@ -63,6 +63,7 @@
 @import "global/colors";
 @import "global/wp-admin";
 @import "global/wp-overrides";
+@import "global/gutenberg";
 
 // Modules
 @import "modules/navigation";

src/assets/scss/editor.scss

@@ -0,0 +1,86 @@
+/*!
+ * Gutenberg Editor Styles
+ */
+
+/** === Includes === */
+
+@charset 'utf-8';
+
+@import 'settings';
+@import 'foundation';
+
+@include foundation-typography;
+@include foundation-button;
+@include foundation-table;
+
+
+/** === Content Width === */
+.wp-block {
+	width: calc(100vw - (2 * 10));
+	@each $breakpoint, $size in $grid-margin-gutters {
+
+		@include breakpoint($breakpoint) {
+			width: calc(100vw - ($size));
+		}
+
+	}
+}
+
+/** === Base Typography === */
+body {
+	font-size: $global-font-size;
+	font-family: $body-font-family;
+	color: $body-font-color;
+}
+
+/** === Post Title === */
+.editor-post-title__block .editor-post-title__input{
+  @extend h1;
+}
+
+/** === Button === */
+.wp-block-button {
+
+	// add general foundation button styling to button in editor
+	.wp-block-button__link {
+		@extend .button;
+	}
+
+	// add special styling for squared buttons
+	&.is-style-squared .wp-block-button__link {
+		border-radius: 0;
+	}
+
+	// add outline styles
+	&.is-style-outline .wp-block-button__link{
+		@extend .hollow;
+	}
+
+	// set transparent background to block for outline button
+	&.is-style-outline,
+	&.is-style-outline:hover,
+	&.is-style-outline:focus,
+	&.is-style-outline:active {
+		background: transparent;
+	}
+}
+
+/** === File === */
+.wp-block-file__button{
+	@include button();
+}
+
+/** === Pullquote === */
+.wp-block-paragraph.has-background{
+	padding: rem-calc(20px 30px);
+}
+
+/** === Table === */
+.wp-block-table td{
+	border: none;
+}
+
+/** === Latest Posts grid view === */
+.wp-block-latest-posts.is-grid{
+	list-style: none;
+}

src/assets/scss/global/_gutenberg.scss

@@ -0,0 +1,60 @@
+/*
+Frontend styles for gutenberg blocks
+*/
+
+/** === Base Color Palatte === */
+@each $color, $code in $foundation-palette {
+
+  .has-#{$color}-background-color {
+      background-color: $code;
+  }
+
+  .has-#{$color}-color {
+      color: $code;
+  }
+}
+
+/** === Button === */
+.wp-block-button {
+
+	// add general foundation button styling
+	.wp-block-button__link {
+		@extend .button;
+    @each $color, $code in $foundation-palette {
+
+      &.has-#{$color}-background-color {
+          background-color: $code;
+      }
+
+      &.has-#{$color}-color {
+          color: $code;
+      }
+    }
+	}
+
+	// add special styling for squared buttons
+	&.is-style-squared .wp-block-button__link {
+		border-radius: 0;
+	}
+
+	// add outline styles
+	&.is-style-outline .wp-block-button__link{
+		@extend .hollow;
+	}
+
+	// set transparent background to block for outline button
+	&.is-style-outline,
+	&.is-style-outline:hover,
+	&.is-style-outline:focus,
+	&.is-style-outline:active {
+    // background: transparent;
+    .wp-block-button__link{
+      // background: transparent;
+    }
+	}
+}
+
+/** === File === */
+.wp-block-file .wp-block-file__button{
+  @include button();
+}