Merge pull request #285 from Automattic/radcliffe-2-gutenberg-support

Radcliffe 2 gutenberg support

radcliffe-2/assets/css/blocks-vintage.css

@@ -0,0 +1,63 @@
+.style-pack-vintage .alignwide,
+.style-pack-vintage .alignfull,
+.style-pack-vintage ul.wp-block-gallery.alignwide,
+.style-pack-vintage ul.wp-block-gallery.alignfull,
+.style-pack-vintage .wp-block-cover-image {
+	background-color: rgba(255,255,255,0.7);
+	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0.8+0,1+20,1+80,0.8+100 */
+	background: -moz-linear-gradient(top, rgba(255,255,255,0.6) 0%, rgba(255,255,255,1) 15%, rgba(255,255,255,1) 85%, rgba(255,255,255,0.6) 100%); /* FF3.6-15 */
+	background: -webkit-linear-gradient(top, rgba(255,255,255,0.6) 0%,rgba(255,255,255,1) 15%,rgba(255,255,255,1) 85%,rgba(255,255,255,0.6) 100%); /* Chrome10-25,Safari5.1-6 */
+	background: linear-gradient(to bottom, rgba(255,255,255,0.6) 0%,rgba(255,255,255,1) 15%,rgba(255,255,255,1) 85%,rgba(255,255,255,0.6) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+	border: 4px double #c7c4b4;
+	padding: 15px;
+}
+
+.style-pack-vintage .wp-block-cover-image.alignleft,
+.style-pack-vintage .wp-block-cover-image.alignright {
+	left: auto;
+	/*margin-left: 0;
+	margin-right: 0;*/
+}
+
+@media (min-width: 750px) {
+	.style-pack-vintage .alignfull,
+	.style-pack-vintage .wp-block-image.alignfull,
+	.style-pack-vintage .wp-block-text-columns.alignfull,
+	.style-pack-vintage .wp-block-table.alignfull,
+	.style-pack-vintage .wp-block-preformatted.alignfull,
+	.style-pack-vintage .wp-block-button.alignfull,
+	.style-pack-vintage .wp-block-pullquote.alignfull,
+	.style-pack-vintage .wp-block-latest-posts.alignfull,
+	.style-pack-vintage .wp-block-categories.alignfull,
+	.style-pack-vintage .wp-block-verse.alignfull,
+	.style-pack-vintage p.alignfull,
+	.style-pack-vintage .wp-block-cover-image:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
+	.style-pack-vintage .wp-block-cover-image.alignfull {
+		margin-left: calc(30% - 30vw);
+		margin-right: calc(30% - 30vw);
+		width: auto;
+		max-width: 1000%;
+	}
+
+	.style-pack-vintage .wp-block-cover-image:not(.alignwide):not(.alignfull) {
+		left: auto !important;
+		/*margin-left: 0;*/
+	}
+
+	.style-pack-vintage .alignwide,
+	.style-pack-vintage .wp-block-image.alignwide,
+	.style-pack-vintage .wp-block-text-columns.alignwide,
+	.style-pack-vintage .wp-block-table.alignwide,
+	.style-pack-vintage .wp-block-preformatted.alignwide,
+	.style-pack-vintage .wp-block-button.alignwide,
+	.style-pack-vintage .wp-block-pullquote.alignwide,
+	.style-pack-vintage .wp-block-latest-posts.alignwide,
+	.style-pack-vintage .wp-block-categories.alignwide,
+	.style-pack-vintage p.alignwide,
+	.style-pack-vintage .wp-block-cover-image.alignwide {
+		margin-left: calc(20% - 20vw);
+		margin-right: calc(20% - 20vw);
+		width: auto;
+		max-width: 1000%;
+	}
+}

radcliffe-2/assets/css/blocks.css

@@ -0,0 +1,392 @@
+/*--------------------------------------------------------------
+## Gutenberg Styles
+--------------------------------------------------------------*/
+
+#page {
+	overflow-x: hidden;
+}
+
+*[class^="wp-block-"] {
+	margin-bottom: 1.5em;
+}
+
+.alignfull,
+.alignwide,
+.aligncenter {
+	clear: both;
+}
+
+/* Text-based blocks with alignfull */
+.wp-block-text-columns.alignfull,
+.wp-block-preformatted.alignfull,
+.wp-block-button.alignfull,
+.wp-block-pullquote.alignfull,
+.wp-block-latest-posts.alignfull,
+.wp-block-categories.alignfull,
+.wp-block-verse.alignfull,
+p.alignfull {
+	margin-left: auto;
+	margin-right: auto;
+}
+
+@media (min-width: 750px) {
+	.alignfull {
+		margin-left: calc(50% - 50vw);
+		margin-right: calc(50% - 50vw);
+		width: auto;
+		max-width: 1000%;
+	}
+
+	.alignwide {
+		margin-left: calc(25% - 25vw);
+		margin-right: calc(25% - 25vw);
+		width: auto;
+		max-width: 1000%;
+	}
+
+	/* Let's reduce this a bit for blocks with text */
+	.wp-block-text-columns.alignfull,
+	.wp-block-table.alignfull,
+	.wp-block-preformatted.alignfull,
+	.wp-block-button.alignfull,
+	.wp-block-pullquote.alignfull,
+	.wp-block-latest-posts.alignfull,
+	.wp-block-categories.alignfull,
+	.wp-block-verse.alignfull,
+	p.alignfull {
+		margin-left: calc(50% - 48vw);
+		margin-right: calc(50% - 48vw);
+	}
+
+	.wp-block-text-columns.alignwide,
+	.wp-block-table.alignwide,
+	.wp-block-preformatted.alignwide,
+	.wp-block-button.alignwide,
+	.wp-block-pullquote.alignwide,
+	.wp-block-latest-posts.alignwide,
+	.wp-block-categories.alignwide,
+	p.alignwide {
+		margin-left: calc(25% - 23vw);
+		margin-right: calc(25% - 23vw);
+	}
+}
+
+.alignfull > *,
+.alignwide > * {
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.alignfull img,
+.alignwide img,
+.alignfull iframe,
+.alignwide iframe,
+.alignfull video,
+.alignwide video {
+	display: block;
+}
+
+.alignfull .jetpack-video-wrapper iframe,
+.alignwide .jetpack-video-wrapper iframe {
+	margin-left: auto !important; /* to override inline styles */
+	margin-right: auto !important;
+}
+
+/* Dropcaps */
+.has-drop-cap {}
+
+/* Images */
+.wp-block-image {}
+
+.wp-block-image figure {
+	margin-top: 0;
+}
+
+.wp-block-image img {
+	display: block;
+}
+
+.wp-block-image .alignleft {
+	margin-right: 1.6em;
+}
+
+.wp-block-image .alignright {
+	margin-left: 1.6em;
+}
+
+.wp-block-image.alignwide {}
+.wp-block-image.alignfull {
+	width: 100vw;
+	max-width: 100vw;
+	margin: 2rem calc((100% - 100vw) * .5);
+}
+
+.wp-block-image figcaption {
+	color: inherit;
+	opacity: 0.8;
+}
+
+/* Galleries */
+ul.wp-block-gallery,
+ul.wp-block-gallery li {
+	padding: 0;
+}
+
+/* Blockquotes*/
+.wp-block-quote {}
+
+.wp-block-quote.blocks-quote-style-1 {}
+.wp-block-quote.blocks-quote-style-2 {}
+.wp-block-quote cite {
+	color: inherit;
+	opacity: 0.8;
+}
+
+@media (min-width: 600px) {
+	.wp-block-pullquote.alignleft,
+	.wp-block-pullquote.alignright {
+		max-width: 40%;
+	}
+}
+
+/* Cover Images */
+@media (min-width: 750px) {
+	.wp-block-cover-image:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright) {
+		left: 50%;
+		margin-left: -50vw;
+		position: relative;
+		width: 100vw;
+	}
+}
+
+.wp-block-cover-image {
+	height: 75vh;
+	min-height: 400px;
+}
+
+.wp-block-cover-image.has-background-dim {}
+.wp-block-cover-image.has-parallax {}
+
+/* Video */
+.wp-block-video {}
+
+.wp-block-video video,
+.wp-block-video iframe {
+	max-width: 100%;
+}
+
+/* Audio */
+.wp-block-audio {}
+
+.wp-block-audio audio {
+	display: block;
+	min-width: 270px;
+	width: 100%;
+}
+
+/* Embed */
+.wp-block-embed {}
+
+/* Pullquotes */
+.wp-block-pullquote {
+	border: none;
+	color: #666;
+	padding: 0;
+	margin-bottom: 0;
+}
+
+.wp-block-pullquote cite {
+	color: inherit;
+	opacity: 0.8;
+}
+
+/* Tables */
+.wp-block-table {
+	display: table;
+}
+
+.wp-block-table td,
+.wp-block-table th {
+	border: none;
+}
+
+.wp-block-table.alignfull {
+	width: 96vw;
+}
+
+/* Preformatted */
+.wp-block-preformatted {}
+
+/* Code */
+.wp-block-code {}
+
+/* Verse */
+.wp-block-verse {
+	background-color: transparent;
+	font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Times, "Times New Roman", serif;
+	font-size: 1.1em;
+	font-style: italic;
+	line-height: 1.8;
+	padding: 0;
+}
+
+/* Separator */
+.wp-block-separator {
+	border: none;
+	max-width: 100px;
+	margin: 1.6em auto;
+}
+
+.wp-block-separator.is-style-wide {
+	max-width: 100%;
+}
+
+/* Buttons */
+.wp-block-file .wp-block-file__button,
+.wp-block-button .wp-block-button__link {
+	background: #222;
+	border-radius: 3px;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
+	font-size: 1.4rem;
+	font-size: 14px;
+	line-height: 1.29;
+	padding: 9px 18px;
+}
+
+.wp-block-file a:hover,
+.wp-block-file a:focus,
+.wp-block-button a:hover,
+.wp-block-button a:focus {
+	opacity: 1.0;
+}
+
+.wp-block-button a:not([style]) {
+	border: 0;
+	color: #fff;
+}
+
+.wp-block-button:not([style]) a:hover,
+.wp-block-button:not([style]) a:focus {
+	color: #fff;
+	text-decoration: none;
+}
+
+.wp-block-file__button:hover,
+.wp-block-file__button:focus,
+.wp-block-button__link:not(.has-background):hover,
+.wp-block-button__link:not(.has-background):focus {
+	background: #ca2017;
+}
+
+.wp-block-button.alignwide,
+.wp-block-button.alignfull,
+.wp-block-button.aligncenter {
+	display: block;
+}
+
+/* Text Columns */
+@media only screen and ( max-width: 32em ) {
+	.wp-block-text-columns,
+	.wp-block-text-columns.aligncenter {
+		display: block;
+	}
+
+	.wp-block-text-columns.columns-2 .wp-block-column,
+	.wp-block-text-columns.columns-3 .wp-block-column,
+	.wp-block-text-columns.columns-4 .wp-block-column {
+		float: none;
+		margin-left: 0;
+		margin-right: 0;
+		width: 100%;
+	}
+}
+
+/* Latest Posts */
+.wp-block-latest-posts__post-date {
+	color: inherit;
+	margin-bottom: 0;
+	opacity: 0.8;
+}
+
+.wp-block-latest-posts,
+.wp-block-latest-posts li {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+.wp-block-latest-posts li {
+	padding: 0.25em 0;
+}
+
+.wp-block-latest-posts li:not(:last-child) {
+	border-bottom: 1px solid rgba(0,0,0,0.2);
+}
+
+.wp-block-latest-posts.is-grid li {
+	border: 0;
+}
+
+/* Widget blocks */
+.wp-block-categories {}
+
+.wp-block-archives,
+.wp-block-latest-comments,
+.wp-block-categories-list {
+	list-style: none;
+	padding: 0;
+}
+
+.wp-block-archives li,
+.wp-block-categories-list li {
+	padding: 0.25em 0;
+}
+
+.wp-block-archives li:not(:last-child),
+.wp-block-categories-list li:not(:last-child) {
+	border-bottom: 1px solid rgba(0,0,0,0.075);
+}
+
+.wp-block-categories-list ul ul {
+	padding-left: 2em;
+}
+
+.wp-block-categories-list ul ul li:last-child {
+	padding-bottom: 0;
+}
+
+.wp-block-categories-dropdown {}
+
+/* Colours */
+
+.has-white-color {
+	color: #fff;
+}
+
+.has-dark-grey-color {
+	color: #222;
+}
+
+.has-light-grey-color {
+	color: #666;
+}
+
+.has-red-color {
+	color: #ca2017;
+}
+
+.has-white-background-color {
+	background-color: #fff
+}
+
+.has-dark-grey-background-color {
+	background-color: #222;
+}
+
+.has-light-grey-background-color {
+	background-color: #666;
+}
+
+.has-red-background-color {
+	background-color: #ca2017;
+}

radcliffe-2/assets/css/editor-style-colorful.css

@@ -0,0 +1,104 @@
+/*!
+Editor Styles for Radcliffe 2: Colorful Style Pack
+--------------------------------------------------------------*/
+
+/* Temporary method to include Google Fonts */
+@import url( "https://fonts.googleapis.com/css?family=Karla:400,400italic,700,700italic" );
+@import url( "https://fonts.googleapis.com/css?family=Inconsolata:400,700" );
+
+/* Widths */
+@media screen and (min-width: 768px) {
+	.edit-post-visual-editor textarea.editor-post-title__input {
+		margin-left: auto;
+		margin-right: auto;
+		padding: 0 0 72px;
+		max-width: 92%;
+		width: 1040px;
+	}
+}
+
+/*--------------------------------------------------------------
+# Typography
+--------------------------------------------------------------*/
+
+.edit-post-visual-editor,
+.edit-post-visual-editor p,
+.edit-post-visual-editor button,
+.edit-post-visual-editor input,
+.edit-post-visual-editor select,
+.edit-post-visual-editor optgroup,
+.edit-post-visual-editor textarea {
+	color: #222;
+	font-family: Inconsolata, monospace;
+}
+
+h1.mce-content-body,
+h2.mce-content-body,
+h3.mce-content-body,
+h4.mce-content-body,
+h5.mce-content-body,
+h6.mce-content-body,
+.mce-content-body h1,
+.mce-content-body h2,
+.mce-content-body h3,
+.mce-content-body h4,
+.mce-content-body h5,
+.mce-content-body h6,
+#poststuff h1,
+#poststuff h2,
+#poststuff h3,
+#poststuff h4,
+#poststuff h5,
+#poststuff h6 {
+	color: #71db9d;
+	font-family: 'Karla', 'Helvetica Neue', Helvetica, arial, sans-serif;
+}
+
+/* Post/Page title */
+.edit-post-visual-editor textarea.editor-post-title__input {
+	color: #4ba3c3;
+	font-family: 'Karla', 'Helvetica Neue', Helvetica, arial, sans-serif;
+}
+
+/*--------------------------------------------------------------
+# Navigation
+--------------------------------------------------------------*/
+/*--------------------------------------------------------------
+## Links
+--------------------------------------------------------------*/
+.mce-content-body a,
+.wp-block-freeform.core-blocks-rich-text__tinymce a,
+.wp-block-categories a,
+.wp-block-latest-posts a {
+	color: #d97059;
+}
+
+.mce-content-body a:hover,
+.mce-content-body a:focus,
+.mce-content-body a:active,
+.wp-block-freeform.core-blocks-rich-text__tinymce a:hover,
+.wp-block-freeform.core-blocks-rich-text__tinymce a:focus,
+.wp-block-freeform.core-blocks-rich-text__tinymce a:active,
+.wp-block-categories a:hover,
+.wp-block-categories a:focus,
+.wp-block-categories a:active,
+.wp-block-latest-posts a:hover,
+.wp-block-latest-posts a:focus,
+.wp-block-latest-posts a:active {
+	color: #e43a31;
+}
+
+/*--------------------------------------------------------------
+## Gutenberg Styles
+--------------------------------------------------------------*/
+
+/* Buttons */
+
+.wp-block-button .wp-block-button__link {
+	font-family: Inconsolata, monospace;
+}
+
+.wp-block-button .wp-block-button__link:hover,
+.wp-block-button .wp-block-button__link:focus {
+	background-color: #d97059;
+}

radcliffe-2/assets/css/editor-style-modern.css

@@ -0,0 +1,83 @@
+/*!
+Editor Styles for Radcliffe 2: Modern Style Pack
+--------------------------------------------------------------*/
+
+/* Temporary method to include Google Fonts */
+@import url( "https://fonts.googleapis.com/css?family=Montserrat:400,400italic,700,700italic" );
+@import url( "https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,700,700italic" );
+
+/* Widths */
+@media screen and (min-width: 768px) {
+	/* Post/Page title */
+	.edit-post-visual-editor textarea.editor-post-title__input {
+		max-width: 740px;
+		margin-left: auto;
+		margin-right: auto;
+	}
+}
+
+/*--------------------------------------------------------------
+# Typography
+--------------------------------------------------------------*/
+
+.edit-post-visual-editor,
+.edit-post-visual-editor p,
+.edit-post-visual-editor button,
+.edit-post-visual-editor input,
+.edit-post-visual-editor select,
+.edit-post-visual-editor optgroup,
+.edit-post-visual-editor textarea {
+	font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, arial, sans-serif;
+}
+
+h1.mce-content-body,
+h2.mce-content-body,
+h3.mce-content-body,
+h4.mce-content-body,
+h5.mce-content-body,
+h6.mce-content-body,
+.edit-post-visual-editor textarea.editor-post-title__input,
+.mce-content-body h1,
+.mce-content-body h2,
+.mce-content-body h3,
+.mce-content-body h4,
+.mce-content-body h5,
+.mce-content-body h6,
+#poststuff h1,
+#poststuff h2,
+#poststuff h3,
+#poststuff h4,
+#poststuff h5,
+#poststuff h6 {
+	font-family: 'Montserrat', 'Helvetica Neue', Helvetica, arial, sans-serif;
+}
+
+/* Post/Page title */
+.edit-post-visual-editor textarea.editor-post-title__input {
+	padding: 0 0 72px;
+	text-align: left;
+}
+
+/*--------------------------------------------------------------
+# Navigation
+--------------------------------------------------------------*/
+/*--------------------------------------------------------------
+## Links
+--------------------------------------------------------------*/
+.mce-content-body a,
+.wp-block-freeform.core-blocks-rich-text__tinymce a,
+.wp-block-categories a,
+.wp-block-latest-posts a {
+	color: #aaa;
+}
+
+/*--------------------------------------------------------------
+## Gutenberg Styles
+--------------------------------------------------------------*/
+
+/* Buttons */
+
+.wp-block-button .wp-block-button__link:hover,
+.wp-block-button .wp-block-button__link:focus {
+	background-color: #aaa;
+}

radcliffe-2/assets/css/editor-style-vintage.css

@@ -0,0 +1,174 @@
+/*!
+Editor Styles for Radcliffe 2: Vintage Style Pack
+--------------------------------------------------------------*/
+
+/* Temporary method to include Google Fonts */
+@import url( "https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400italic,700" );
+
+/* Widths */
+.wp-block-cover-image.alignleft,
+.wp-block-cover-image.alignright {
+	left: auto;
+	margin-left: 0;
+	margin-right: 0;
+}
+
+.edit-post-visual-editor figure {
+	margin: auto;
+}
+
+@media screen and (min-width: 600px) {
+	.editor-block-list__layout .editor-block-list__block[data-align="full"] > .editor-block-list__block-edit,
+	.edit-post-visual-editor .editor-block-list__block[data-align="full"] .editor-block-list__block-edit,
+	.editor-block-list__layout .editor-block-list__block[data-align="wide"] > .editor-block-list__block-edit,
+	.edit-post-visual-editor .editor-block-list__block[data-align="wide"] .editor-block-list__block-edit {
+		margin-left: 0;
+		margin-right: 0;
+	}
+}
+
+@media screen and (min-width: 768px) {
+	.editor-writing-flow {
+		margin-left: auto;
+		margin-right: auto;
+		max-width: 900px;
+	}
+
+	.edit-post-visual-editor textarea.editor-post-title__input {
+		margin: 50px auto 10px;
+		width: 740px;
+	}
+
+	.editor-block-list__layout .editor-block-list__block[data-align="full"],
+	.editor-block-list__layout .editor-block-list__block[data-type="core/cover-image"] {
+		margin-left: calc(30% - 30vw);
+		margin-right: calc(30% - 30vw);
+		width: auto;
+		max-width: 1000%;
+	}
+
+	/* .folded - WordPress left sidebar is closed */
+	/* .is-sidebar-opened - Gutenberg right slidebar is opened */
+
+	.editor-block-list__layout .editor-block-list__block[data-align="wide"] {
+		margin-left: calc(20% - 20vw);
+		margin-right: calc(20% - 20vw);
+		width: auto;
+		max-width: 1000%;
+	}
+}
+
+/* Editor Layout */
+.edit-post-layout {
+	background-color: #eae8dc;
+}
+
+.editor-writing-flow {
+	border: 4px double #c7c4b4;
+	background-color: rgba(255,255,255,0.3);
+	padding-bottom: 4em;
+}
+
+.editor-block-list__layout .editor-block-list__block[data-align="full"],
+.editor-block-list__layout .editor-block-list__block[data-align="wide"],
+.wp-block-cover-image {
+	background-color: rgba(255,255,255,0.7);
+	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0.8+0,1+20,1+80,0.8+100 */
+	background: -moz-linear-gradient(top, rgba(255,255,255,0.6) 0%, rgba(255,255,255,1) 15%, rgba(255,255,255,1) 85%, rgba(255,255,255,0.6) 100%); /* FF3.6-15 */
+	background: -webkit-linear-gradient(top, rgba(255,255,255,0.6) 0%,rgba(255,255,255,1) 15%,rgba(255,255,255,1) 85%,rgba(255,255,255,0.6) 100%); /* Chrome10-25,Safari5.1-6 */
+	background: linear-gradient(to bottom, rgba(255,255,255,0.6) 0%,rgba(255,255,255,1) 15%,rgba(255,255,255,1) 85%,rgba(255,255,255,0.6) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+	border: 4px double #c7c4b4;
+	padding-left: 15px;
+	padding-right: 15px;
+}
+
+.editor-block-list__layout .editor-block-list__block[data-align="full"] .is-focused,
+.editor-block-list__layout .editor-block-list__block[data-align="wide"] .is-focused,
+.wp-block-cover-image .is-focused {
+	outline: none;
+}
+
+/*--------------------------------------------------------------
+# Typography
+--------------------------------------------------------------*/
+
+.edit-post-visual-editor p,
+.edit-post-visual-editor li {
+	font-size: 18px;
+}
+
+.edit-post-visual-editor,
+.edit-post-visual-editor p,
+.edit-post-visual-editor button,
+.edit-post-visual-editor input,
+.edit-post-visual-editor select,
+.edit-post-visual-editor optgroup,
+.edit-post-visual-editor textarea {
+	color: #222;
+	font-family: 'Libre Baskerville', 'Helvetica Neue', Helvetica, arial, sans-serif;
+}
+
+h1.mce-content-body,
+h2.mce-content-body,
+h3.mce-content-body,
+h4.mce-content-body,
+h5.mce-content-body,
+h6.mce-content-body,
+.edit-post-visual-editor textarea.editor-post-title__input,
+.mce-content-body h1,
+.mce-content-body h2,
+.mce-content-body h3,
+.mce-content-body h4,
+.mce-content-body h5,
+.mce-content-body h6,
+#poststuff h1,
+#poststuff h2,
+#poststuff h3,
+#poststuff h4,
+#poststuff h5,
+#poststuff h6 {
+	font-family: 'Libre Baskerville', 'Helvetica Neue', Helvetica, arial, sans-serif;
+	font-weight: 400;
+}
+
+/* Post/Page title */
+.edit-post-visual-editor textarea.editor-post-title__input {
+	font-weight: 400;
+}
+
+/*--------------------------------------------------------------
+# Navigation
+--------------------------------------------------------------*/
+/*--------------------------------------------------------------
+## Links
+--------------------------------------------------------------*/
+.mce-content-body a,
+.wp-block-freeform.core-blocks-rich-text__tinymce a,
+.wp-block-categories a,
+.wp-block-latest-posts a {
+	color: #2b6e9d;
+}
+
+/*--------------------------------------------------------------
+## Gutenberg Styles
+--------------------------------------------------------------*/
+
+/* Buttons */
+
+.wp-block-button .wp-block-button__link {
+	border: 3px double #c7c4b4;
+	border-radius: 0;
+	font-family: 'Libre Baskerville', 'Helvetica Neue', Helvetica, arial, sans-serif;
+}
+
+.wp-block-button .wp-block-button__link:hover,
+.wp-block-button .wp-block-button__link:focus {
+	background-color: #2b6e9d;
+}
+
+
+.wp-block-pullquote,
+.wp-block-pullquote p,
+.wp-block-pullquote cite {
+	color: #666;
+}

radcliffe-2/assets/css/editor-style.css

@@ -0,0 +1,962 @@
+/*!
+Editor Styles for Radcliffe 2
+--------------------------------------------------------------*/
+
+/* Widths */
+
+@media screen and ( min-width: 788px ) {
+	/* Main column width */
+	body.gutenberg-editor-page .edit-post-visual-editor .editor-post-title__block,
+	body.gutenberg-editor-page .edit-post-visual-editor .editor-default-block-appender,
+	body.gutenberg-editor-page .edit-post-visual-editor .editor-block-list__block {
+	    max-width: 770px; /* 740px + 30px for editor block margins */
+	}
+}
+
+/*--------------------------------------------------------------
+# Typography
+--------------------------------------------------------------*/
+
+.edit-post-visual-editor,
+.edit-post-visual-editor p,
+.edit-post-visual-editor button,
+.edit-post-visual-editor input,
+.edit-post-visual-editor select,
+.edit-post-visual-editor optgroup,
+.edit-post-visual-editor textarea,
+.edit-post-visual-editor blockquote {
+	color: #222;
+	font-family: Palatino,"Palatino Linotype","Palatino LT STD","Book Antiqua",Times,"Times New Roman",serif;
+	font-size: 20px;
+	line-height: 1.8;
+}
+
+.blocks-rich-text__tinymce.mce-content-body {
+	line-height: inherit;
+}
+
+h1.mce-content-body,
+h2.mce-content-body,
+h3.mce-content-body,
+h4.mce-content-body,
+h5.mce-content-body,
+h6.mce-content-body,
+.edit-post-visual-editor textarea.editor-post-title__input,
+.mce-content-body h1,
+.mce-content-body h2,
+.mce-content-body h3,
+.mce-content-body h4,
+.mce-content-body h5,
+.mce-content-body h6,
+#poststuff h1,
+#poststuff h2,
+#poststuff h3,
+#poststuff h4,
+#poststuff h5,
+#poststuff h6 {
+	clear: both;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
+	line-height: 1.1;
+	margin-top: 0;
+}
+
+/* Post/Page title */
+.edit-post-visual-editor textarea.editor-post-title__input {
+	font-family: Palatino,"Palatino Linotype","Palatino LT STD","Book Antiqua",Times,"Times New Roman",serif;
+	font-size: 60px;
+	line-height: 1.2;
+	text-align: center;
+}
+
+.edit-post-visual-editor .editor-post-title {
+	max-width: 100%;
+}
+
+h1.editor-rich-text__tinymce.mce-content-body {
+	font-size: 36px;
+	line-height: 1.25;
+}
+
+h2.editor-rich-text__tinymce.mce-content-body,
+#poststuff .wp-block-heading h2 {
+	font-size: 30px;
+	line-height: 1.2;
+}
+
+h3.editor-rich-text__tinymce.mce-content-body {
+	font-size: 25px;
+	line-height: 1.44;
+}
+
+h4.editor-rich-text__tinymce.mce-content-body {
+	font-size: 20px;
+	line-height: 1.8em
+}
+
+h5.editor-rich-text__tinymce.mce-content-body,
+h6.editor-rich-text__tinymce.mce-content-body {
+	font-size: 15px;
+	line-height: 2.4em;
+	text-transform: uppercase;
+}
+
+.mce-content-body dfn,
+.mce-content-body cite,
+.mce-content-body em,
+.mce-content-body i {
+	font-style: italic;
+}
+
+.mce-content-body address {
+	margin: 0 0 1.8em;
+}
+
+.mce-content-body pre,
+.wp-block-code .editor-plain-text,
+.wp-block-preformatted pre {
+	font-family: "Courier 10 Pitch", Courier, monospace;
+	font-size: 16px;
+	line-height: 1.6;
+	margin-bottom: 1.6em;
+	max-width: 100%;
+	overflow: auto;
+	padding: 1.6em;
+	word-wrap: nowrap;
+}
+
+.wp-block-code .editor-plain-text {
+	margin-bottom: 0;
+}
+
+
+.mce-content-body blockquote {
+	margin: 0 1.5em;
+}
+
+.mce-content-body code,
+.mce-content-body kbd,
+.mce-content-body tt,
+.mce-content-body var {
+	font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
+	font-size: 16px;
+	font-size: 1.6rem;
+}
+
+.mce-content-body abbr,
+.mce-content-body acronym {
+	border-bottom: 1px dotted #666;
+	cursor: help;
+}
+
+.mce-content-body mark,
+.mce-content-body ins {
+	background: #fff9c0;
+	text-decoration: none;
+}
+
+.mce-content-body big {
+	font-size: 125%;
+}
+
+/*--------------------------------------------------------------
+# Elements
+--------------------------------------------------------------*/
+
+.edit-post-visual-editor *,
+.edit-post-visual-editor *:before,
+.edit-post-visual-editor *:after {
+	/* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
+	box-sizing: inherit;
+}
+
+/* Subhead */
+.edit-post-visual-editor p.wp-block-subhead {
+	color: inherit;
+}
+
+.mce-content-body hr {
+	background-color: #ccc;
+	border: 0;
+	height: 1px;
+	margin-bottom: 1.6em;
+}
+
+.mce-content-body ul,
+.mce-content-body ol {
+	margin: 0 0 1.6em;
+	padding: 0;
+}
+
+.mce-content-body ul {
+	list-style: disc;
+}
+
+.mce-content-body ol {
+	list-style: decimal;
+}
+
+.mce-content-body li > ul,
+.mce-content-body li > ol {
+	margin-bottom: 0;
+}
+
+.mce-content-body dt {
+	font-weight: bold;
+}
+
+.edit-post-visual-editor dd {
+	margin: 0 1.5em 1.5em;
+}
+
+.edit-post-visual-editor img {
+	height: auto;
+	/* Make sure images are scaled correctly. */
+	max-width: 100%;
+	/* Adhere to container width. */
+}
+
+.edit-post-visual-editor figure {
+	margin: 1em 0;
+	/* Extra wide images within figure tags don't overflow the content area. */
+}
+
+.edit-post-visual-editor table {
+	border-collapse: collapse;
+	border-spacing: 0;
+	empty-cells: show;
+	font-size: 0.9em;
+	margin: 0 0 1.6em;
+	width: 100%;
+}
+
+.edit-post-visual-editor thead {
+	vertical-align: bottom;
+	white-space: nowrap;
+}
+
+.edit-post-visual-editor tbody {
+	border-bottom: 1px solid #eee;
+	border-top: 1px solid #eee;
+}
+
+.edit-post-visual-editor th {
+	color: #444;
+	font-weight: bold;
+	text-align: left;
+}
+
+.edit-post-visual-editor th,
+.edit-post-visual-editor td {
+	border-bottom: 1px solid #eee;
+	line-height: 120%;
+	margin: 0;
+	overflow: visible;
+	padding: 2%;
+}
+
+.edit-post-visual-editor tr:last-child td {
+	border-bottom: none;
+}
+
+.wp-block-freeform.mce-content-body table tbody > tr:nth-child(2n+1) > th,
+.wp-block-freeform.mce-content-body table tbody > tr:nth-child(odd) > td,
+.edit-post-visual-editor table tbody > tr:nth-child(odd) > th,
+.edit-post-visual-editor table tbody > tr:nth-child(odd) > td {
+	background: #f9f9f9;
+}
+
+.edit-post-visual-editor blockquote {
+
+}
+
+.editor-block-list__block[data-align="right"] .wp-block-pullquote,
+.editor-block-list__block[data-align="left"] .wp-block-pullquote {
+	max-width: 300px;
+}
+
+.edit-post-visual-editor th,
+.edit-post-visual-editor td {
+	border-right: 0;
+}
+
+.edit-post-visual-editor table {
+	border-collapse: separate;
+	border-spacing: 0;
+	border-width: 1px 0 0 1px;
+	margin: 0 0 1.75em;
+	table-layout: fixed;
+	/* Prevents HTML tables from becoming too wide */
+	width: 100%;
+}
+
+.edit-post-visual-editor caption,
+.edit-post-visual-editor th,
+.edit-post-visual-editor td {
+	font-weight: normal;
+	text-align: left;
+}
+
+.edit-post-visual-editor th {
+	border-width: 0 1px 1px 0;
+	font-weight: 700;
+}
+
+.edit-post-visual-editor td {
+	border-width: 0 1px 1px 0;
+}
+
+.edit-post-visual-editor th,
+.edit-post-visual-editor td {
+	padding: 0.4375em;
+}
+
+.mce-content-body table tbody > tr:nth-child(odd) > th,
+.mce-content-body table tbody > tr:nth-child(odd) > td {
+	background: rgba(0,0,0,.15);
+}
+
+/*--------------------------------------------------------------
+# Forms
+--------------------------------------------------------------*/
+.mce-content-body button,
+.mce-content-body input[type="button"],
+.mce-content-body input[type="reset"],
+.mce-content-body input[type="submit"] {
+	border: 0;
+	border-radius: 3px;
+	background-color: #FC814A;
+	color: #fff;
+	font-weight: bold;
+	line-height: 1;
+	padding: .6em 1em;
+}
+
+.mce-content-body button:hover,
+.mce-content-body input[type="button"]:hover,
+.mce-content-body input[type="reset"]:hover,
+.mce-content-body input[type="submit"]:hover {
+	background-color: #c1582a;
+}
+
+.mce-content-body button:active,
+.mce-content-body button:focus,
+.mce-content-body input[type="button"]:active,
+.mce-content-body input[type="button"]:focus,
+.mce-content-body input[type="reset"]:active,
+.mce-content-body input[type="reset"]:focus,
+.mce-content-body input[type="submit"]:active,
+.mce-content-body input[type="submit"]:focus {
+	border-color: #aaa #bbb #bbb;
+}
+
+.mce-content-body input[type="text"],
+.mce-content-body input[type="email"],
+.mce-content-body input[type="url"],
+.mce-content-body input[type="password"],
+.mce-content-body input[type="search"],
+.mce-content-body input[type="number"],
+.mce-content-body input[type="tel"],
+.mce-content-body input[type="range"],
+.mce-content-body input[type="date"],
+.mce-content-body input[type="month"],
+.mce-content-body input[type="week"],
+.mce-content-body input[type="time"],
+.mce-content-body input[type="datetime"],
+.mce-content-body input[type="datetime-local"],
+.mce-content-body input[type="color"],
+.mce-content-body textarea {
+	color: #666;
+	border: 1px solid #ccc;
+	border-radius: 3px;
+	padding: 3px;
+}
+
+.mce-content-body input[type="text"]:focus,
+.mce-content-body input[type="email"]:focus,
+.mce-content-body input[type="url"]:focus,
+.mce-content-body input[type="password"]:focus,
+.mce-content-body input[type="search"]:focus,
+.mce-content-body input[type="number"]:focus,
+.mce-content-body input[type="tel"]:focus,
+.mce-content-body input[type="range"]:focus,
+.mce-content-body input[type="date"]:focus,
+.mce-content-body input[type="month"]:focus,
+.mce-content-body input[type="week"]:focus,
+.mce-content-body input[type="time"]:focus,
+.mce-content-body input[type="datetime"]:focus,
+.mce-content-body input[type="datetime-local"]:focus,
+.mce-content-body input[type="color"]:focus,
+.mce-content-body textarea:focus {
+	color: #111;
+}
+
+.mce-content-body select {
+	border: 1px solid #ccc;
+}
+
+.mce-content-body textarea {
+	width: 100%;
+}
+
+/*--------------------------------------------------------------
+# Navigation
+--------------------------------------------------------------*/
+/*--------------------------------------------------------------
+## Links
+--------------------------------------------------------------*/
+.mce-content-body a,
+.wp-block-freeform.core-blocks-rich-text__tinymce a,
+.wp-block-categories a,
+.wp-block-latest-posts a {
+	color: #ca2017;
+	text-decoration: none;
+}
+
+.mce-content-body a:hover,
+.mce-content-body a:focus,
+.mce-content-body a:active,
+.wp-block-freeform.core-blocks-rich-text__tinymce a:hover,
+.wp-block-freeform.core-blocks-rich-text__tinymce a:focus,
+.wp-block-freeform.core-blocks-rich-text__tinymce a:active,
+.wp-block-categories a:hover,
+.wp-block-categories a:focus,
+.wp-block-categories a:active,
+.wp-block-latest-posts a:hover,
+.wp-block-latest-posts a:focus,
+.wp-block-latest-posts a:active {
+	color: #e43a31;
+	text-decoration: underline;
+}
+
+.mce-content-body a:focus,
+.wp-block-freeform.core-blocks-rich-text__tinymce a:focus {
+	outline: thin dotted;
+	text-decoration: none;
+}
+
+.mce-content-body a:hover,
+.mce-content-body a:active,
+.wp-block-freeform.core-blocks-rich-text__tinymce a:hover,
+.wp-block-freeform.core-blocks-rich-text__tinymce a:active {
+	outline: 0;
+}
+
+/*--------------------------------------------------------------
+# Alignments
+--------------------------------------------------------------*/
+.mce-content-body .alignleft {
+	display: inline;
+	float: left;
+	margin-right: 1.6em;
+}
+
+.editor-block-list__layout .editor-block-list__block[data-align="left"] .editor-block-list__block-edit {
+	margin-right: 1.0em;
+}
+
+.mce-content-body .alignright {
+	display: inline;
+	float: right;
+	margin-left: 1.6em;
+}
+
+.editor-block-list__layout .editor-block-list__block[data-align="right"] .editor-block-list__block-edit {
+	margin-left: 1.0em;
+}
+
+.mce-content-body .aligncenter {
+	clear: both;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.mce-content-body .aligncenter:not(.wp-block-gallery) {
+	display: block;
+}
+
+/* Make sure embeds and iframes fit their containers. */
+.mce-content-body embed,
+.mce-content-body iframe,
+.mce-content-body object {
+	max-width: 100%;
+}
+
+/*--------------------------------------------------------------
+## Captions
+--------------------------------------------------------------*/
+.mce-content-body .wp-caption,
+.mce-content-body .gallery-caption {
+	font-size: 0.8em;
+	margin-bottom: 1.6em;
+	max-width: 100%;
+}
+
+.mce-content-body .wp-caption img[class*="wp-image-"] {
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.mce-content-body .wp-caption .wp-caption-text {
+	margin: 0.8075em 0;
+}
+
+.mce-content-body .wp-caption-text {
+	opacity: 0.8;
+	text-align: center;
+}
+
+/*--------------------------------------------------------------
+## Galleries
+--------------------------------------------------------------*/
+.mce-content-body .gallery {
+	margin: 0 -2% 1.6em;
+}
+
+.mce-content-body .gallery-item {
+	display: inline-block;
+	padding: 0 1% 0;
+	text-align: center;
+	vertical-align: top;
+	width: 100%;
+}
+
+.mce-content-body .gallery-columns-2 .gallery-item {
+	max-width: 50%;
+}
+
+.mce-content-body .gallery-columns-3 .gallery-item {
+	max-width: 33.33%;
+}
+
+.mce-content-body .gallery-columns-4 .gallery-item {
+	max-width: 25%;
+}
+
+.mce-content-body .gallery-columns-5 .gallery-item {
+	max-width: 20%;
+}
+
+.mce-content-body .gallery-columns-6 .gallery-item {
+	max-width: 16.66%;
+}
+
+.mce-content-body .gallery-columns-7 .gallery-item {
+	max-width: 14.28%;
+}
+
+.mce-content-body .gallery-columns-8 .gallery-item {
+	max-width: 12.5%;
+}
+
+.mce-content-body .gallery-columns-9 .gallery-item {
+	max-width: 11.11%;
+}
+
+.mce-content-body .gallery-caption {
+	display: block;
+}
+
+/*--------------------------------------------------------------
+## Gutenberg Styles
+--------------------------------------------------------------*/
+
+.mce-content-body *[class^="wp-block-"] {
+	margin-bottom: 1.5em;
+}
+
+.mce-content-body *[class^="wp-block-"].alignleft,
+.mce-content-body *[class^="wp-block-"].alignright {
+	max-width: 50%;
+}
+
+.mce-content-body .alignfull,
+.mce-content-body .alignwide,
+.mce-content-body .aligncenter {
+	clear: both;
+}
+
+/* Images */
+.wp-block-image {
+	display: inline-block; /* helps with smaller, unaligned images */
+}
+
+/* Override inline width on un-aligned images */
+.wp-block-image div {
+	max-height: 100% !important;
+	max-width: 100% !important;
+}
+
+/* Audio */
+
+.wp-block-audio audio {
+	display: block;
+	min-width: 270px;
+	width: 100%;
+}
+
+/* Blockquotes*/
+
+.edit-post-visual-editor .wp-block-quote:not(.is-large) {
+	border-left: 0;
+	padding-left: 0;
+}
+
+.wp-block-freeform.core-blocks-rich-text__tinymce blockquote {
+	border: 0;
+	padding: 0;
+	text-align: center;
+}
+
+.wp-block-freeform.core-blocks-rich-text__tinymce blockquote {
+	color: #666;
+}
+
+.edit-post-visual-editor .wp-block-quote,
+.editor-post-visual-editor blockquote {
+	font-style: italic;
+	margin: 0 1.5em;
+	text-align: center;
+}
+
+.edit-post-visual-editor blockquote::before,
+.edit-post-visual-editor blockquote::after {
+	background: #ddd;
+	content: "";
+	display: block;
+	height: 2px;
+	margin: 20px auto;
+	width: 80px;
+}
+
+
+@media (min-width: 600px) {
+	.edit-post-visual-editor blockquote::before,
+	.edit-post-visual-editor blockquote::after {
+		margin: 36px auto;
+		width: 108px;
+	}
+}
+
+.edit-post-visual-editor .wp-block-quote p,
+.editor-post-visual-editor blockquote p {
+	color: #666;
+	font-size: 22px;
+}
+
+.edit-post-visual-editor .wp-block-quote cite,
+.editor-post-visual-editor blockquote cite {
+	color: #999;
+	font-size: 13px;
+}
+
+/* Pullquotes */
+.wp-block-pullquote {
+	border: 0;
+	font-style: italic;
+	padding: 0;
+}
+
+.edit-post-visual-editor .wp-block-pullquote p {
+	color: #666;
+	margin-bottom: 1.8em;
+}
+
+.edit-post-visual-editor .wp-block-pullquote__citation {
+	color: #666;
+	font-size: 1.1em;
+	font-style: italic;
+	opacity: 0.8;
+	text-transform: capitalize;
+}
+
+/* Cover Images */
+.edit-post-visual-editor .editor-block-list__block[data-type="core/cover-image"] {
+	max-width: 100%;
+}
+
+.editor-block-list__block .wp-block-cover-image {
+	height: 75vh;
+	min-height: 400px;
+}
+
+.editor-block-list__block .wp-block-cover-image p,
+.editor-block-list__block .wp-block-cover-image h2 {
+	line-height: 1.2;
+}
+
+/* Tables */
+.wp-block-table {
+	display: table;
+}
+
+/* Verse */
+.wp-block-verse {
+	background-color: transparent;
+	font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Times, "Times New Roman", serif;
+	font-size: 22px;
+	font-style: italic;
+	padding: 0;
+}
+
+/* Separator */
+.wp-block-separator {
+	background: #ccc;
+	border: none;
+	height: 1px;
+	max-width: none;
+	margin: 0 auto;
+}
+
+/* Buttons */
+
+.wp-block-button {
+	display: block;
+}
+
+.wp-block-button .wp-block-button__link {
+	background-color: #222;
+	border: 0;
+	border-radius: 3px;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
+	font-size: 1.4rem;
+	font-size: 14px;
+	line-height: 1.25;
+	padding: .6em 1em;
+	text-align: center;
+}
+
+.wp-block-button .wp-block-button__link:hover,
+.wp-block-button .wp-block-button__link:focus {
+	background-color: #ca2017;
+}
+
+.wp-block-button .wp-block-button__link[data-align="wide"],
+.wp-block-button .wp-block-button__link[data-align="full"],
+.wp-block-button.alignwide,
+.wp-block-button.alignfull {
+	display: block;
+}
+
+@media ( min-width: 600px ) {
+	.editor-block-list__layout .editor-block-list__block[data-align="full"] {
+		max-width: calc( 100% + 100px );
+	}
+}
+
+/* Latest Posts */
+.wp-block-latest-posts__post-date {
+	color: inherit;
+	margin-bottom: 0;
+	opacity: 0.8;
+}
+
+.editor-block-list__block[data-type="core/latest-posts"] .wp-block-latest-posts,
+.wp-block-latest-posts li {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+.wp-block-latest-posts li {
+	padding: 0.25em 0;
+}
+
+.wp-block-latest-posts li:not(:last-child) {
+	border-bottom: 1px solid rgba(0,0,0,0.075);
+}
+
+.wp-block-latest-posts.is-grid li {
+	border: 0;
+	padding: 0.25em 0;
+}
+/* Categories */
+
+.editor-block-list__block[data-type="core/categories"] .wp-block-categories ul,
+.editor-block-list__block[data-type="core/categories"] .wp-block-categories li {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+.editor-block-list__block[data-type="core/categories"] .wp-block-categories__list li,
+.editor-block-list__block[data-type="core/categories"] .wp-block-categories li {
+	padding: 0.25em 0;
+}
+
+.editor-block-list__block[data-type="core/categories"] .wp-block-categories__list li:not(:last-child),
+.editor-block-list__block[data-type="core/categories"] .wp-block-categories li:not(:last-child) {
+	border-bottom: 1px solid rgba(0,0,0,0.075);
+}
+
+.editor-block-list__block[data-type="core/categories"] .wp-block-categories__list ul ul li:last-child,
+.editor-block-list__block[data-type="core/categories"] .wp-block-categories ul ul li:last-child {
+	padding-bottom: 0;
+}
+
+.editor-block-list__block[data-type="core/categories"] .wp-block-categories__list ul ul,
+.editor-block-list__block[data-type="core/categories"] .wp-block-categories ul ul {
+	padding-left: 2em;
+}
+
+/* Colours - defualt color palette */
+
+.has-white-color,
+.edit-post-visual-editor .has-colorful-white-color,
+.edit-post-visual-editor .has-modern-white-color,
+.wp-block-button .wp-block-button__link.has-white-color,
+.wp-block-button .wp-block-button__link.has-colorful-white-color,
+.wp-block-button .wp-block-button__link.has-modern-white-color {
+	color: #fff;
+}
+
+.has-dark-grey-color,
+.edit-post-visual-editor .has-colorful-dark-grey-color,
+.edit-post-visual-editor .has-vintage-dark-grey-color,
+.edit-post-visual-editor .has-modern-dark-grey-color,
+.wp-block-button .wp-block-button__link.has-dark-grey-color,
+.wp-block-button .wp-block-button__link.has-colorful-dark-grey-color,
+.wp-block-button .wp-block-button__link.has-vintage-dark-grey-color,
+.wp-block-button .wp-block-button__link.has-modern-dark-grey-color {
+	color: #222;
+}
+
+.has-light-grey-color,
+.edit-post-visual-editor .has-vintage-light-grey-color,
+.wp-block-button .wp-block-button__link.has-vintage-light-grey-color {
+	color: #666;
+}
+
+.has-red-color,
+.wp-block-button .wp-block-button__link.has-red-color {
+	color: #ca2017;
+}
+
+.has-white-background-color,
+.has-colorful-white-background-color,
+.has-modern-white-background-color,
+.wp-block-button .wp-block-button__link.has-white-background-color,
+.wp-block-button .wp-block-button__link.has-colorful-white-background-color,
+.wp-block-button .wp-block-button__link.has-modern-white-background-color {
+	background-color: #fff
+}
+
+.has-dark-grey-background-color,
+.has-colorful-dark-grey-background-color,
+.has-vinatge-dark-grey-background-color,
+.has-modern-dark-grey-background-color,
+.wp-block-button .wp-block-button__link.has-dark-grey-background-color,
+.wp-block-button .wp-block-button__link.has-colorful-dark-grey-background-color,
+.wp-block-button .wp-block-button__link.has-vintage-dark-grey-background-color,
+.wp-block-button .wp-block-button__link.has-modern-dark-grey-background-color {
+	background-color: #222;
+}
+
+.has-light-grey-background-color,
+.has-vintage-light-grey-background-color,
+.wp-block-button .wp-block-button__link.has-light-grey-background-color,
+.wp-block-button .wp-block-button__link.has-vintge-light-grey-background-color {
+	background-color: #666;
+}
+
+.has-red-background-color,
+.wp-block-button .wp-block-button__link.has-red-background-color {
+	background-color: #ca2017;
+}
+
+/* Colours - Colorful color palette */
+
+.edit-post-visual-editor .has-colorful-light-grey-color,
+.wp-block-button .wp-block-button__link.has-colorful-light-grey-color {
+	color: #e5e5e5;
+}
+
+.has-colorful-light-grey-background-color,
+.wp-block-button .wp-block-button__link.has-colorful-light-grey-background-color {
+	background-color: #e5e5e5;
+}
+
+.edit-post-visual-editor .has-colorful-orange-color,
+.wp-block-button .wp-block-button__link.has-colorful-orange-color {
+	color: #d97059;
+}
+
+.has-colorful-orange-background-color,
+.wp-block-button .wp-block-button__link.has-coloful-orange-background-color {
+	background-color: #d97059;
+}
+
+.edit-post-visual-editor .has-colorful-green-color,
+.wp-block-button .wp-block-button__link.has-colorful-green-color {
+	color: #71db9d;
+}
+
+.has-colorful-green-background-color,
+.wp-block-button .wp-block-button__link.has-colorful-green-background-color {
+	background-color: #71db9d;
+}
+
+.edit-post-visual-editor .has-colorful-blue-color,
+.wp-block-button .wp-block-button__link.has-colorful-blue-color {
+	color: #4ba3c3;
+}
+
+.has-colorful-blue-background-color,
+.wp-block-button .wp-block-button__link.has-colorful-blue-background-color {
+	background-color: #4ba3c3;
+}
+
+/* Colours - Vintage color palette */
+
+.edit-post-visual-editor .has-vintage-off-white-color,
+.wp-block-button .wp-block-button__link.has-vintage-off-white-color {
+	color: #eae8dc;
+}
+
+.has-vintage-off-white-background-color,
+.wp-block-button .wp-block-button__link.has-vintage-off-white-background-color {
+	background-color: #eae8dc;
+}
+
+.edit-post-visual-editor .has-vintage-light-brown-color,
+.wp-block-button .wp-block-button__link.has-vintage-light-brown-color {
+	color: #c7c4b4;
+}
+
+.has-vintage-light-brown-background-color,
+.wp-block-button .wp-block-button__link.has-vintage-light-brown-background-color {
+	background-color: #c7c4b4;
+}
+
+.edit-post-visual-editor .has-vintage-blue-color,
+.wp-block-button .wp-block-button__link.has-vintage-blue-color {
+	color: #2b6e9d;
+}
+
+.has-vintage-blue-background-color,
+.wp-block-button .wp-block-button__link.has-vintage-blue-background-color {
+	background-color: #2b6e9d;
+}
+
+/* Colours - Modern color palette */
+
+.edit-post-visual-editor .has-modern-light-grey-color,
+.wp-block-button .wp-block-button__link.has-modern-light-grey-color {
+	color: #f1f1f1;
+}
+
+.has-modern-light-grey-background-color,
+.wp-block-button .wp-block-button__link.has-modern-light-grey-background-color {
+	background-color: #f1f1f1;
+}
+
+.edit-post-visual-editor .has-modern-medium-grey-color,
+.wp-block-button .wp-block-button__link.has-modern-medium-grey-color {
+	color: #aaa;
+}
+
+.has-modern-medium-grey-background-color,
+.wp-block-button .wp-block-button__link.has-modern-medium-grey-background-color {
+	background-color: #aaa;
+}
+

radcliffe-2/functions.php

@@ -77,6 +77,102 @@ function radcliffe_2_setup() {
 
 	// Add theme support for selective refresh for widgets.
 	add_theme_support( 'customize-selective-refresh-widgets' );
+
+	// Gutenberg: Add Custom Palette
+	$stylepack = get_theme_mod( 'active_style_pack' );
+
+	if ( 'default' === $stylepack ) {
+		add_theme_support( 'editor-color-palette',
+			array(
+				'name' => 'white',
+				'color' => '#ffffff',
+			),
+			array(
+				'name' => 'dark grey',
+				'color' => '#222222',
+			),
+			array(
+				'name' => 'light gray',
+				'color' => '#666666',
+			),
+			array(
+				'name' => 'red',
+				'color' => '#ca2017',
+			)
+		);
+	} else if ( 'vintage' === $stylepack ) {
+		add_theme_support( 'editor-color-palette',
+			array(
+				'name' => 'vintage off-white',
+				'color' => '#eae8dc',
+			),
+			array(
+				'name' => 'vintage light brown',
+				'color' => '#c7c4b4',
+			),
+			array(
+				'name' => 'vintage light grey',
+				'color' => '#666666',
+			),
+			array(
+				'name' => 'vintage dark grey',
+				'color' => '#222222',
+			),
+			array(
+				'name' => 'vintage blue',
+				'color' => '#2b6e9d',
+			)
+		);
+	} else if ( 'colorful' === $stylepack ) {
+		add_theme_support( 'editor-color-palette',
+			array(
+				'name' => 'colorful white',
+				'color' => '#ffffff',
+			),
+			array(
+				'name' => 'colorful light grey',
+				'color' => '#e5e5e5',
+			),
+			array(
+				'name' => 'colorful dark grey',
+				'color' => '#222222',
+			),
+			array(
+				'name' => 'colorful blue',
+				'color' => '#4ba3c3',
+			),
+			array(
+				'name' => 'colorful green',
+				'color' => '#71db9d',
+			),
+			array(
+				'name' => 'colorful orange',
+				'color' => '#d97059',
+			)
+		);
+	} else if ( 'modern' === $stylepack ) {
+		add_theme_support( 'editor-color-palette',
+			array(
+				'name' => 'modern white',
+				'color' => '#ffffff',
+			),
+			array(
+				'name' => 'modern light grey',
+				'color' => '#f1f1f1',
+			),
+			array(
+				'name' => 'modern medium grey',
+				'color' => '#aaaaaa',
+			),
+			array(
+				'name' => 'modern dark grey',
+				'color' => '#222222',
+			)
+		);
+	}
+
+	// Gutenberg: Add support for wide alignment
+	add_theme_support( 'align-wide' );
 }
 endif;
 add_action( 'after_setup_theme', 'radcliffe_2_setup' );
@@ -137,6 +233,14 @@ add_action( 'widgets_init', 'radcliffe_2_widgets_init' );
 function radcliffe_2_scripts() {
 	wp_enqueue_style( 'radcliffe-2-style', get_stylesheet_uri() );
 
+	wp_enqueue_style( 'radcliffe-2-block-styles', get_template_directory_uri() . '/assets/css/blocks.css' );
+
+	$stylepack = get_theme_mod( 'active_style_pack' );
+
+	if ( 'vintage' === $stylepack ) {
+		wp_enqueue_style( 'radcliffe-2-block-vintage-styles', get_template_directory_uri() . '/assets/css/blocks-vintage.css' );
+	}
+
 	wp_enqueue_script( 'radcliffe-2-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), '20151215', true );
 
 	wp_localize_script( 'radcliffe-2-navigation', 'screenReaderText', array(
@@ -156,6 +260,27 @@ function radcliffe_2_scripts() {
 }
 add_action( 'wp_enqueue_scripts', 'radcliffe_2_scripts' );
 
+
+/**
+ * Enqueue editor styles for Gutenberg
+ */
+function radcliffe_2_editor_styles() {
+	wp_enqueue_style( 'radcliffe-2-editor-style', get_template_directory_uri() . '/assets/css/editor-style.css' );
+
+	$stylepack = get_theme_mod( 'active_style_pack' );
+
+	if ( 'colorful' === $stylepack ) {
+		wp_enqueue_style( 'radcliffe-2-editor-style-colorful', get_template_directory_uri() . '/assets/css/editor-style-colorful.css' );
+	} else if ( 'modern' === $stylepack ) {
+		wp_enqueue_style( 'radcliffe-2-editor-style-modern', get_template_directory_uri() . '/assets/css/editor-style-modern.css' );
+	} else if ( 'vintage' === $stylepack ) {
+		wp_enqueue_style( 'radcliffe-2-editor-style-vintage', get_template_directory_uri() . '/assets/css/editor-style-vintage.css' );
+	}
+
+}
+add_action( 'enqueue_block_editor_assets', 'radcliffe_2_editor_styles' );
+
+
 /**
  * Enqueue stylesheet inside the Customizer.
  */

radcliffe-2/styles/colorful.css

@@ -30,6 +30,7 @@ button,
 input[type="button"],
 input[type="reset"],
 input[type="submit"],
+.wp-block-button .wp-block-button__link,
 #infinite-handle span {
 	font-family: Inconsolata, monospace;
 }
@@ -143,16 +144,19 @@ button:hover,
 input[type="button"]:hover,
 input[type="reset"]:hover,
 input[type="submit"]:hover,
+.wp-block-button .wp-block-button__link:hover,
 button:focus,
 .button:focus,
 input[type="button"]:focus,
 input[type="reset"]:focus,
 input[type="submit"]:focus,
+.wp-block-button .wp-block-button__link:focus,
 button:active,
 .button:active,
 input[type="button"]:active,
 input[type="reset"]:active,
 input[type="submit"]:active,
+.wp-block-button .wp-block-button__link:active,
 .bypostauthor .by-post-author {
 	background-color: #d97059;
 }

radcliffe-2/styles/modern.css

@@ -93,16 +93,19 @@ button:hover,
 input[type="button"]:hover,
 input[type="reset"]:hover,
 input[type="submit"]:hover,
+.wp-block-button .wp-block-button__link:hover,
 button:focus,
 .button:focus,
 input[type="button"]:focus,
 input[type="reset"]:focus,
 input[type="submit"]:focus,
+.wp-block-button .wp-block-button__link:focus,
 button:active,
 .button:active,
 input[type="button"]:active,
 input[type="reset"]:active,
 input[type="submit"]:active,
+.wp-block-button .wp-block-button__link:active,
 .bypostauthor .by-post-author,
 #infinite-handle span:hover {
 	background-color: #aaa;
@@ -175,6 +178,7 @@ button,
 input[type="button"],
 input[type="reset"],
 input[type="submit"],
+.wp-block-button .wp-block-button__link,
 #infinite-handle span {
 	font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, arial, sans-serif;
 }

radcliffe-2/styles/vintage.css

@@ -21,7 +21,9 @@ button,
 .button,
 input[type="button"],
 input[type="reset"],
-input[type="submit"] {
+input[type="submit"],
+.wp-block-button .wp-block-button__link,
+.wp-block-button a:not([style]) {
 	border-radius: 0;
 	border: 3px double #c7c4b4;
 }
@@ -36,6 +38,8 @@ input[type="reset"]:hover,
 input[type="reset"]:focus,
 input[type="submit"]:hover,
 input[type="submit"]:focus,
+.wp-block-button .wp-block-button__link:hover,
+.wp-block-button .wp-block-button__link:focus,
 #infinite-handle span:hover,
 .bypostauthor .by-post-author {
 	background-color: #2b6e9d;
@@ -267,6 +271,7 @@ button,
 input[type="button"],
 input[type="reset"],
 input[type="submit"],
+.wp-block-button .wp-block-button__link,
 #infinite-handle span {
 	font-family: 'Libre Baskerville', 'Helvetica Neue', Helvetica, arial, sans-serif;
 }