فهرست منبع

Starting to build out Gutenberg editor styles and enqueue theme; update Gutenberg support code.

Laurel Fulford 7 سال پیش
والد
کامیت
f799631da9
2فایلهای تغییر یافته به همراه778 افزوده شده و 12 حذف شده
  1. 735 0
      radcliffe-2/assets/css/editor-style.css
  2. 43 12
      radcliffe-2/functions.php

+ 735 - 0
radcliffe-2/assets/css/editor-style.css

@@ -0,0 +1,735 @@
+/*!
+Editor Styles for Ohana
+--------------------------------------------------------------*/
+
+/* Widths */
+
+/*--------------------------------------------------------------
+# 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: 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;
+	margin-bottom: 18px;
+}
+
+/* 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%;
+}
+
+.mce-content-body h1 {
+	font-size: 36px;
+	line-height: 1.25;
+}
+
+.mce-content-body h2,
+#poststuff .wp-block-heading h2 {
+	font-size: 30px;
+	line-height: 1.2;
+}
+
+.mce-content-body h3 {
+	font-size: 25px;
+	line-height: 1.44;
+}
+
+.mce-content-body h4 {
+	font-size: 20px;
+	line-height: 1.8em
+}
+
+.mce-content-body h5,
+.mce-content-body h6 {
+	font-size: 15px;
+	line-height: 2.4em;
+	text-transform: uppercase;
+}
+
+.mce-content-body p {
+	margin: 0 0 1.8em;
+}
+
+.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 {
+	background: #eee;
+	font-family: "Courier 10 Pitch", Courier, monospace;
+	font-size: 16px;
+	font-size: 1.6rem;
+	line-height: 1.6;
+	margin-bottom: 1.6em;
+	max-width: 100%;
+	overflow: auto;
+	padding: 1.6em;
+}
+
+.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 {
+
+}
+
+.edit-post-visual-editor blockquote p:last-of-type {
+	margin-bottom: 0;
+}
+
+.edit-post-visual-editor table,
+.edit-post-visual-editor th,
+.edit-post-visual-editor td {
+	border: 1px solid rgba(0,0,0,.15);
+}
+
+.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 {
+	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 {
+	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.5em;
+}
+
+.mce-content-body .alignright {
+	display: inline;
+	float: right;
+	margin-left: 1.5em;
+}
+
+.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 */
+}
+
+/* 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, 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: 0.8em;
+}
+
+/* Pullquotes */
+.wp-block-pullquote {
+	border: 0;
+	font-style: italic;
+	padding: 0;
+}
+
+.wp-block-pullquote > p {
+	color: #666;
+}
+
+.wp-block-pullquote cite {
+
+}
+
+/* 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: 50vh;
+	min-height: 400px;
+}
+
+/* Tables */
+.wp-block-table {
+	display: table;
+}
+
+/* Verse */
+.wp-block-verse {
+	background-color: transparent;
+	font-family: "Alegreya", Georgia, "Times New Roman", serif;
+	font-size: 1.1em;
+	font-style: italic;
+	padding: 0;
+}
+
+/* Separator */
+.wp-block-separator {
+	border-bottom: 2px dashed rgba(0,0,0,.15);
+}
+
+/* Buttons */
+
+.wp-block-button {
+	display: block;
+}
+
+.wp-block-button .wp-block-button__link {
+	background-color: #FC814A;
+	border: 0;
+	border-radius: 3px;
+	font-weight: bold;
+	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: #c1582a;
+}
+
+.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;
+}
+
+/* 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 dashed rgba(0,0,0,0.2);
+}
+
+.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 dashed rgba(0,0,0,0.2);
+}
+
+.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;
+}

+ 43 - 12
radcliffe-2/functions.php

@@ -78,19 +78,29 @@ function radcliffe_2_setup() {
 	// Add theme support for selective refresh for widgets.
 	add_theme_support( 'customize-selective-refresh-widgets' );
 
-	// Add support for Gutenberg.
-	add_theme_support( 'gutenberg', array(
-		// Theme supports wide images, galleries and videos.
-		'wide-images' => true,
-
-		// Make specific theme colors available in the editor.
-		'colors' => array(
-			'#ffffff',
-			'#222222',
-			'#666666',
-			'#ca2017',
+
+	// Gutenberg: Add Custom Palette
+	add_theme_support( 'editor-color-palette',
+		array(
+			'name' => esc_html__( 'white', 'radcliffe-2' ),
+			'color' => '#ffffff',
 		),
-	) );
+		array(
+			'name' => esc_html__( 'dark grey', 'radcliffe-2' ),
+			'color' => '#222222',
+		),
+		array(
+			'name' => esc_html__( 'light gray', 'radcliffe-2' ),
+			'color' => '#666666',
+		),
+		array(
+			'name' => esc_html__( 'red', 'radcliffe-2' ),
+			'color' => '#ca2017',
+		)
+	);
+
+	// Gutenberg: Add support for wide alignment
+	add_theme_support( 'align-wide' );
 }
 endif;
 add_action( 'after_setup_theme', 'radcliffe_2_setup' );
@@ -172,6 +182,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.
  */