Begins implementation of editor style. Ref. #10.

compile-sass.sh

@@ -20,6 +20,8 @@ echo "Compiling Sass..."
 cd src/assets/scss
 sass -E 'UTF-8' style.scss:../../style.css
 echo "Style of Tainacan Compiled";
+sass -E 'UTF-8' editor-style.scss:../../editor-style.css
+echo "Style of Tainacan for Gutenberg Editor Compiled";
 sass bootstrap_custom.scss:../vendor/bootstrap/scss/bootstrap.min.css --style compressed
 echo "Bootstrap Compiled";
 rm -rf .sass-cache
@@ -30,6 +32,7 @@ echo "Slick for slider carousel Compiled";
 rm -rf slick-theme.min.css.map slick.min.css.map .sass-cache/
 cd ../../../scss
 rm -rf ../../style.css.map
+# rm -rf ../../editor-style.css.map
 
 echo "Sass compilation Completed!"
 exit 0

src/assets/scss/editor-style.scss

@@ -0,0 +1,42 @@
+.edit-post-visual-editor.editor-styles-wrapper {
+
+    font-family: 'Roboto', sans-serif !important;
+
+    .editor-block-list__layout {
+        padding-left: 4.16667%;
+        padding-right: 4.16667%;
+    }
+
+    /* Main column width */
+    .wp-block {
+        max-width: 1400px;
+        margin-left: 8.3333333333%;
+        margin-right: 8.3333333333%; 
+    }
+
+    /* Width of "wide" blocks */
+    .wp-block[data-align="wide"] {
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    /* Width of "full" blocks */
+    .wp-block[data-align="full"] {
+        max-width: calc(100% + 8.333333333%);
+        width: calc(100% + 8.333333333%);
+        margin-left: -4.16667%;
+        margin-right: -4.16667%;
+    }
+
+    /* Post title */
+    .wp-block.editor-post-title__block,
+    .wp-block.editor-post-title__input {
+        font-size: 14px;
+        font-family: 'Roboto', sans-serif;   
+    }
+    .wp-block.editor-post-title__block {
+        border-bottom: 2px solid #3f3f3f; 
+        margin-bottom: 24px;
+    }
+
+}

src/editor-style.css

@@ -0,0 +1,30 @@
+.edit-post-visual-editor.editor-styles-wrapper {
+  font-family: 'Roboto', sans-serif !important;
+  /* Main column width */
+  /* Width of "wide" blocks */
+  /* Width of "full" blocks */
+  /* Post title */ }
+  .edit-post-visual-editor.editor-styles-wrapper .editor-block-list__layout {
+    padding-left: 4.16667%;
+    padding-right: 4.16667%; }
+  .edit-post-visual-editor.editor-styles-wrapper .wp-block {
+    max-width: 1400px;
+    margin-left: 8.3333333333%;
+    margin-right: 8.3333333333%; }
+  .edit-post-visual-editor.editor-styles-wrapper .wp-block[data-align="wide"] {
+    margin-left: auto;
+    margin-right: auto; }
+  .edit-post-visual-editor.editor-styles-wrapper .wp-block[data-align="full"] {
+    max-width: calc(100% + 8.333333333%);
+    width: calc(100% + 8.333333333%);
+    margin-left: -4.16667%;
+    margin-right: -4.16667%; }
+  .edit-post-visual-editor.editor-styles-wrapper .wp-block.editor-post-title__block,
+  .edit-post-visual-editor.editor-styles-wrapper .wp-block.editor-post-title__input {
+    font-size: 14px;
+    font-family: 'Roboto', sans-serif; }
+  .edit-post-visual-editor.editor-styles-wrapper .wp-block.editor-post-title__block {
+    border-bottom: 2px solid #3f3f3f;
+    margin-bottom: 24px; }
+
+/*# sourceMappingURL=editor-style.css.map */

src/editor-style.css.map

@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "AAAA,8CAA+C;EAE3C,WAAW,EAAE,+BAA+B;EAO5C,uBAAuB;EAOvB,4BAA4B;EAM5B,4BAA4B;EAQ5B,gBAAgB;EA1BhB,yEAA2B;IACvB,YAAY,EAAE,QAAQ;IACtB,aAAa,EAAE,QAAQ;EAI3B,wDAAU;IACN,SAAS,EAAE,MAAM;IACjB,WAAW,EAAE,aAAa;IAC1B,YAAY,EAAE,aAAa;EAI/B,2EAA6B;IACzB,WAAW,EAAE,IAAI;IACjB,YAAY,EAAE,IAAI;EAItB,2EAA6B;IACzB,SAAS,EAAE,yBAAyB;IACpC,KAAK,EAAE,yBAAyB;IAChC,WAAW,EAAE,SAAS;IACtB,YAAY,EAAE,SAAS;EAI3B;mFACmC;IAC/B,SAAS,EAAE,IAAI;IACf,WAAW,EAAE,oBAAoB;EAErC,iFAAmC;IAC/B,aAAa,EAAE,iBAAiB;IAChC,aAAa,EAAE,IAAI",
+"sources": ["assets/scss/editor-style.scss"],
+"names": [],
+"file": "editor-style.css"
+}

src/functions.php

@@ -294,11 +294,20 @@ function tainacan_setup_theme_supported_features() {
         ),
 	) );
 	add_theme_support( 'align-wide' );
-	
+	add_theme_support( 'editor-style' );
+	add_editor_style( 'editor-style.css' );
 }
 
 add_action( 'after_setup_theme', 'tainacan_setup_theme_supported_features' );
 
+/**
+* Enqueue editor styles for Gutenberg
+*/
+ 
+function tainacan_editor_styles() {
+    wp_enqueue_style( 'tainacan-editor-style', get_template_directory_uri() . '/editor-style.css' );
+}
+add_action( 'enqueue_block_editor_assets', 'tainacan_editor_styles' );
 
 require get_template_directory() . '/functions/customizer.php';
 require get_template_directory() . '/functions/single-functions.php';