Shoreditch: Complete building out Gutenberg styles and support for Shoreditch.

shoreditch/css/blocks.css

@@ -26,9 +26,12 @@ Description: Used to style Gutenberg Blocks.
 .alignfull,
 .alignwide {
 	clear: both;
+	margin: 0;
 }
 
-.can-align-wide .alignfull {
+.can-align-wide .alignfull,
+.page-template-full-width-page .alignfull,
+.page-template-panel-page .alignfull {
 	margin-left: calc(50% - 50vw);
 	margin-right: calc(50% - 50vw);
 	width: auto;
@@ -37,12 +40,26 @@ Description: Used to style Gutenberg Blocks.
 /* Make non image-based blocks a bit narrower, so they don't get cut off. */
 
 .can-align-wide .wp-block-columns.alignfull,
+.page-template-full-width-page .wp-block-columns.alignfull,
+.page-template-panel-page .wp-block-columns.alignfull,
 .can-align-wide .wp-block-audio.alignfull,
+.page-template-full-width-page .wp-block-audio.alignfull,
+.page-template-panel-page .wp-block-audio.alignfull,
 .can-align-wide .wp-block-table.alignfull,
+.page-template-full-width-page .wp-block-table.alignfull,
+.page-template-panel-page .wp-block-table.alignfull,
 .can-align-wide .wp-block-latest-comments.alignfull,
+.page-template-full-width-page .wp-block-latest-comments.alignfull,
+.page-template-panel-page .wp-block-latest-comments.alignfull,
 .can-align-wide .wp-block-latest-posts.alignfull,
+.page-template-full-width-page .wp-block-latest-posts.alignfull,
+.page-template-panel-page .wp-block-latest-posts.alignfull,
 .can-align-wide .wp-block-categories.alignfull,
-.can-align-wide .wp-block-archives.alignfull {
+.page-template-full-width-page .wp-block-categories.alignfull,
+.page-template-panel-page .wp-block-categories.alignfull,
+.can-align-wide .wp-block-archives.alignfull,
+.page-template-full-width-page .wp-block-archives.alignfull,
+.page-template-panel-page .wp-block-archives.alignfull {
 	margin-left: calc(50% - 48vw );
 	margin-right: calc(50% - 48vw );
 }
@@ -65,11 +82,19 @@ Description: Used to style Gutenberg Blocks.
 	}
 
 	.can-align-wide .alignwide {
+		margin-left: 0;
 		margin-right: calc(25% - 25vw);
 		width: auto;
 		max-width: 900px;
 	}
 
+	.page-template-full-width-page .alignwide,
+	.page-template-panel-page .alignwide {
+		margin-left: calc(25% - 25vw);
+		margin-right: calc(25% - 25vw);
+		width: auto;
+	}
+
 	.rtl.can-align-wide .alignfull {
 		margin-left: calc(50% - 50vw - 150px - 0.5em );
 		margin-right: calc(50% - 50vw + 150px + 0.5em );
@@ -115,11 +140,15 @@ Description: Used to style Gutenberg Blocks.
 	padding-bottom: 0.25em;
 }
 
-.can-align-wide [class^="wp-block-"]:not(.wp-block-gallery):not(.alignfull) figcaption {
+.can-align-wide [class^="wp-block-"]:not(.wp-block-gallery):not(.alignfull) figcaption,
+.page-template-full-width-page [class^="wp-block-"]:not(.wp-block-gallery):not(.alignfull) figcaption,
+.page-template-panel-page [class^="wp-block-"]:not(.wp-block-gallery):not(.alignfull) figcaption {
 	text-align: left;
 }
 
-.rtl.can-align-wide  [class^="wp-block-"]:not(.wp-block-gallery):not(.alignfull) figcaption {
+.rtl.can-align-wide [class^="wp-block-"]:not(.wp-block-gallery):not(.alignfull) figcaption,
+.rtl.page-template-full-width-page [class^="wp-block-"]:not(.wp-block-gallery):not(.alignfull) figcaption,
+.rtl.page-template-panel-page [class^="wp-block-"]:not(.wp-block-gallery):not(.alignfull) figcaption {
 	text-align: right;
 }
 
@@ -153,11 +182,11 @@ p.has-drop-cap:not(:focus)::first-letter {
 	margin-bottom: 1.5em;
 }
 
-.wp-block-gallery:not(.alignfull) {
+.wp-block-gallery:not(.alignfull):not(.alignwide) {
 	margin-left: 0;
 }
 
-.rtl .wp-block-gallery:not(.alignfull) {
+.rtl .wp-block-gallery:not(.alignfull):not(.alignwide) {
 	margin-right: 0;
 }
 
@@ -252,6 +281,18 @@ p.has-drop-cap:not(:focus)::first-letter {
 	outline: none;
 }
 
+.rtl .wp-block-file * + .wp-block-file__button {
+	margin-left: 0.75em;
+	margin-right: 0;
+}
+
+@media (min-width: 768px) {
+	.wp-block-file a.wp-block-file__button,
+	.wp-block-file a.wp-block-file__button:visited {
+		font-size: 16px;
+	}
+}
+
 /* Video */
 
 .wp-block-video video {
@@ -287,10 +328,6 @@ p.has-drop-cap:not(:focus)::first-letter {
 
 /* Table */
 
-.wp-block-table th {
-	text-align: left;
-}
-
 .wp-block-table.alignfull {
 	width: 96vw;
 }
@@ -347,6 +384,12 @@ p.has-drop-cap:not(:focus)::first-letter {
 	outline: none;
 }
 
+@media (min-width: 768px) {
+	.wp-block-button .wp-block-button__link {
+		font-size: 16px;
+	}
+}
+
 /* Separator */
 
 .wp-block-separator {

shoreditch/css/editor-blocks.css

@@ -79,6 +79,7 @@ Description: Used to style Gutenberg Blocks in the editor.
 	color: #2c313f;
 	font-family: Poppins, sans-serif;
 	font-weight: bold;
+	margin: 0 0 1.875rem;
 }
 
 .edit-post-visual-editor h1,
@@ -164,28 +165,54 @@ Description: Used to style Gutenberg Blocks in the editor.
 
 /* Table styles */
 
-.wp-block-freeform.block-library-rich-text__tinymce table,
-.wp-block-freeform.block-library-rich-text__tinymce table th,
-.wp-block-freeform.block-library-rich-text__tinymce table td {
+.wp-block-freeform.block-library-rich-text__tinymce table {
+	border-collapse: collapse;
 }
 
 .wp-block-freeform.block-library-rich-text__tinymce table th,
 .wp-block-freeform.block-library-rich-text__tinymce table td {
+	border-color: #f3f3f3;
 }
 
-.rtl .wp-block-freeform.block-library-rich-text__tinymce td,
-.rtl .wp-block-freeform.block-library-rich-text__tinymce th {
-	text-align: right;
+.wp-block-freeform.block-library-rich-text__tinymce table th {
+	text-align: center;
 }
 
 /* Quote styles */
 
 .wp-block-freeform.block-library-rich-text__tinymce blockquote {
+	border: 0 solid #3e69dc;
+	border-left-width: 2px;
+	color: inherit;
+	font-style: italic;
+	line-height: 1.5;
+	margin: 0 0 1.5rem;
+	padding-left: 1.5rem;
+}
 
+.wp-block-freeform.block-library-rich-text__tinymce cite {
+	color: #2c313f;
+	font-size: 20px;
+	font-style: italic;
 }
 
 .edit-post-visual-editor .editor-block-list__block .wp-block-freeform.block-library-rich-text__tinymce blockquote p {
+	font-size: 20px;
+}
+
+
+@media (min-width: 768px) {
+	.edit-post-visual-editor .editor-block-list__block .wp-block-freeform.block-library-rich-text__tinymce blockquote p,
+	.wp-block-freeform.block-library-rich-text__tinymce cite  {
+		font-size: 25px;
+	}
+}
 
+.rtl .wp-block-freeform.block-library-rich-text__tinymce blockquote {
+	border-left-width: 0;
+	border-right-width: 2px;
+	padding-left: 0;
+	padding-right: 1.5rem;
 }
 
 /* List styles */
@@ -215,11 +242,11 @@ Description: Used to style Gutenberg Blocks in the editor.
 	padding-bottom: 0.25em;
 }
 
-.wp-block:not[data-align="full"] [class^="wp-block-"]:not(.wp-block-gallery) figcaption {
+.wp-block:not([data-align="full"]) [class^="wp-block-"]:not(.wp-block-gallery) figcaption {
 	text-align: left;
 }
 
-.rtl .wp-block:not[data-align="full"] [class^="wp-block-"]:not(.wp-block-gallery) figcaption {
+.rtl .wp-block:not([data-align="full"]) [class^="wp-block-"]:not(.wp-block-gallery) figcaption {
 	text-align: right;
 }
 
@@ -231,14 +258,46 @@ Description: Used to style Gutenberg Blocks in the editor.
 }
 
 .wp-block-freeform.block-library-rich-text__tinymce dd {
-	margin-left: 0;
-	margin-right: 0;
+	margin-left: 1.5em;
+	margin-right: 1.5em;
 }
 
 /* Pre styles */
 
 .wp-block-freeform.block-library-rich-text__tinymce pre {
+	border: 1px solid #f3f3f3;
+	color: #7a7c84;
+	font-family: Inconsolata, monospace;
+	font-size: 16px;
+	padding: 1.5em;
+}
 
+@media (min-width: 768px) {
+	.wp-block-freeform.block-library-rich-text__tinymce pre {
+		font-size: 20px;
+	}
+}
+
+/* Code, etc styles */
+
+.wp-block-freeform.block-library-rich-text__tinymce code,
+.wp-block-freeform.block-library-rich-text__tinymce kbd,
+.wp-block-freeform.block-library-rich-text__tinymce tt,
+.wp-block-freeform.block-library-rich-text__tinymce var {
+	background: #f3f3f3;
+	font-family: Inconsolata, monospace;
+	font-size: inherit;
+	padding: 0 0.25em;
+}
+
+/* Mark & Ins styles */
+
+.wp-block-freeform.block-library-rich-text__tinymce mark,
+.wp-block-freeform.block-library-rich-text__tinymce ins {
+	background: #3e69dc;
+	color: #fff;
+	padding: 0 0.25em;
+	text-decoration: none;
 }
 
 /*--------------------------------------------------------------
@@ -258,7 +317,7 @@ p.has-drop-cap:not(:focus)::first-letter {
 .wp-block-quote.is-large,
 .wp-block-quote.is-style-large {
 	border: 0 solid #3e69dc;
-	border-left-width: 3px;
+	border-left-width: 2px;
 	color: inherit;
 	font-style: italic;
 	line-height: 1.5;
@@ -289,6 +348,19 @@ p.has-drop-cap:not(:focus)::first-letter {
 	font-size: 26px
 }
 
+.rtl .wp-block-quote:not(.is-large):not(.is-style-large),
+.rtl .wp-block-quote.is-large,
+.rtl .wp-block-quote.is-style-large {
+	border-left-width: 0;
+	border-right-width: 2px;
+	padding-left: 0;
+	padding-right: 1.5rem;
+}
+
+.rtl .wp-block-quote .wp-block-quote__citation {
+	text-align: right;
+}
+
 @media (min-width: 768px) {
 	.wp-block-quote:not(.is-large):not(.is-style-large) p {
 		font-size: 25px;
@@ -309,10 +381,6 @@ p.has-drop-cap:not(:focus)::first-letter {
 	}
 }
 
-.rtl .wp-block-quote .wp-block-quote__citation {
-	text-align: left;
-}
-
 /* Cover */
 
 .edit-post-visual-editor .editor-block-list__block .wp-block-cover-image .wp-block-cover-image-text,
@@ -352,6 +420,13 @@ p.has-drop-cap:not(:focus)::first-letter {
 	outline: none;
 }
 
+@media (min-width: 768px) {
+	.wp-block-file .wp-block-file__button,
+	.wp-block-file .wp-block-file__button:visited {
+		font-size: 16px;
+	}
+}
+
 /*--------------------------------------------------------------
 4.0 Blocks - Formatting
 --------------------------------------------------------------*/
@@ -359,63 +434,89 @@ p.has-drop-cap:not(:focus)::first-letter {
 /* Verse */
 
 .wp-block-verse pre {
-
+	color: #7a7c84;
+	font-style: italic;
 }
 
 /* Code */
 
 .wp-block-code {
-	border: none;
+	border: 1px solid #f3f3f3;
 	border-radius: 0;
+	padding: 1.5em;
+	position: relative;
 }
 
-.wp-block-code textarea {
+.wp-block-code .editor-plain-text {
 	background: transparent;
+	color: #7a7c84;
+	font-family: Inconsolata, monospace;
+	font-size: 16px;
+}
+
+@media (min-width: 768px) {
+	.wp-block-code .editor-plain-text {
+		font-size: 20px;
+	}
 }
 
 /* Preformatted */
 
 .wp-block-preformatted {
+	border: 1px solid #f3f3f3;
+	border-radius: 0;
+	padding: 1.5em;
+	position: relative;
+}
+
+.wp-block-preformatted pre {
+	background: transparent;
+	color: #7a7c84;
+	font-family: Inconsolata, monospace;
+	font-size: 16px;
+}
 
+@media (min-width: 768px) {
+	.wp-block-preformatted pre {
+		font-size: 20px;
+	}
 }
 
 /* Pullquote */
 
 .wp-block-pullquote {
-
+	border: 0;
+	padding-left: 0;
+	padding-right: 0;
 }
 
 .wp-block-pullquote blockquote {
-
+	color: #7a7c84;
+	font-style: italic;
 }
 
-
 .wp-block-pullquote__citation {
-
+	font-style: italic;
+	text-transform: none;
 }
 
 .wp-block-pullquote.alignleft blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
 .wp-block-pullquote.alignright blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
 .wp-block-pullquote.alignleft blockquote > .editor-rich-text p,
-.wp-block-pullquote.alignright blockquote > .editor-rich-text p {
-	font-size: 20px;
+.wp-block-pullquote.alignright blockquote > .editor-rich-text p,
+.wp-block-pullquote__citation{
+	font-size: 28px;
 }
 
 /* Table */
 
 .wp-block-table th,
 .wp-block-table td {
-}
-
-.wp-block-table th {
-	text-align: left;
+	border-color: #f3f3f3;
 }
 
 .wp-block-table__cell-content {
-}
-
-.rtl .wp-block-table th {
-	text-align: right;
+	padding: 0.1em 0.25em;
 }
 
 /*--------------------------------------------------------------
@@ -424,22 +525,37 @@ p.has-drop-cap:not(:focus)::first-letter {
 
 /* Buttons */
 
-.wp-block-button .editor-rich-text__tinymce.mce-content-body {
-}
-
 .wp-block-button .wp-block-button__link {
+	background: #3e69dc;
+	border: 0;
+	border-radius: 5em;
+	color: #fff;
+	font-size: 13px;
+	font-size: 0.8125rem;
+	font-weight: bold;
+	letter-spacing: 0.0625em;
+	line-height: 1.3847;
+	padding: 0.5625rem 1.5em;
+	text-transform: uppercase;
 }
 
-.wp-block-button__link:hover {
+.wp-block-button__link:hover,
+.wp-block-button__link:focus {
+	background: #2c313f;
+	outline: none;
 }
 
-.wp-block-button__link:focus,
-.wp-block-button__link:active {
+@media (min-width: 768px) {
+	.wp-block-button .wp-block-button__link {
+		font-size: 16px;
+	}
 }
 
 /* Separator */
 
 .wp-block-separator {
+	border-color: #f3f3f3;
+	border-width: 1px;
 }
 
 /*--------------------------------------------------------------
@@ -461,6 +577,10 @@ p.has-drop-cap:not(:focus)::first-letter {
 	padding-right: 0;
 }
 
+.wp-block-latest-comments__comment {
+	font-size: inherit;
+}
+
 .wp-block-latest-comments__comment-date {
-	color: inherit;
+	font-size: 80%;
 }

shoreditch/inc/extras.php

@@ -37,7 +37,9 @@ function shoreditch_body_classes( $classes ) {
 	}
 
 	// Adds a class of no-sidebar specifically to be used for Gutenberg styles, without interfering with the above.
-	if ( ( is_home() || is_singular() || is_archive() ) && ! is_active_sidebar( 'sidebar-1' ) ) {
+	if ( ( ! is_page_template( 'panel-page.php' ) && ! is_page_template( 'full-width-page.php' ) )
+		&& ( ( ( is_front_page() && is_home() ) || is_singular() || is_archive() )
+		&& ! is_active_sidebar( 'sidebar-1' ) ) ) {
 		$classes[] = 'can-align-wide';
 	}