Jelajahi Sumber

Photos: Minor fixes to Gutenberg implementation, including:
* Add support for responsive embeds, and styles to makes sure wide and full videos fill available space.
* Update button style selectors, and custom colour selectors, to make sure buttons have fallback when they have colour classes from previous themes.
* Centre text, bullets in centred widgets, to match editor styles.
* Update selector for links in editor.
* Align text left/right for full-aligned latest comments widget.
* Add a max-content width for the blocks in the editor.
* Remove border radius from code block in editor.

Laurel Fulford 6 tahun lalu
induk
melakukan
59bf81df98
3 mengubah file dengan 115 tambahan dan 25 penghapusan
  1. 94 19
      photos/blocks.css
  2. 18 6
      photos/editor-blocks.css
  3. 3 0
      photos/functions.php

+ 94 - 19
photos/blocks.css

@@ -39,44 +39,98 @@ Description: Gutenberg Block Styles
 	}
 }
 
+.wp-block-embed.is-type-video iframe,
+.wp-block-embed.is-type-video iframe {
+	max-height: 100%;
+}
+
+.wp-block-embed.is-type-video.alignwide iframe,
+.wp-block-embed.is-type-video.alignwide iframe,
+.wp-block-embed.is-type-video.alignfull iframe,
+.wp-block-embed.is-type-video.alignfull iframe {
+	width: 100% !important;
+	height: 100% !important;
+}
+
+
 /* Colors */
-.has-red-color {
+.has-red-color,
+.has-red-color:hover,
+.has-red-color:active,
+.has-red-color:focus,
+.has-red-color:visited {
 	color: #d63031;
 }
 
-.has-red-background-color {
+.has-red-background-color,
+.has-red-background-color:hover,
+.has-red-background-color:active,
+.has-red-background-color:focus,
+.has-red-background-color:visited {
 	background-color: #d63031;
 }
 
-.has-charcoal-color {
+.has-charcoal-color,
+.has-charcoal-color:hover,
+.has-charcoal-color:active,
+.has-charcoal-color:focus,
+.has-charcoal-color:visited {
 	color: #111;
 }
 
-.has-charcoal-background-color {
+.has-charcoal-background-color,
+.has-charcoal-background-color:hover,
+.has-charcoal-background-color:active,
+.has-charcoal-background-color:focus,
+.has-charcoal-background-color:visited {
 	background-color: #111;
 }
 
-.has-very-light-gray-color {
+.has-very-light-gray-color,
+.has-very-light-gray-color:hover,
+.has-very-light-gray-color:active,
+.has-very-light-gray-color:focus,
+.has-very-light-gray-color:visited {
 	color: #f0f0f0;
 }
 
-.has-very-light-gray-background-color {
+.has-very-light-gray-background-color,
+.has-very-light-gray-background-color:hover,
+.has-very-light-gray-background-color:active,
+.has-very-light-gray-background-color:focus,
+.has-very-light-gray-background-color:visited {
 	background-color: #f0f0f0;
 }
 
-.has-very-dark-gray-color {
+.has-very-dark-gray-color,
+.has-very-dark-gray-color:hover,
+.has-very-dark-gray-color:active,
+.has-very-dark-gray-color:focus,
+.has-very-dark-gray-color:visited {
 	color: #404040;
 }
 
-.has-very-dark-gray-background-color {
+.has-very-dark-gray-background-color,
+.has-very-dark-gray-background-color:hover,
+.has-very-dark-gray-background-color:active,
+.has-very-dark-gray-background-color:focus,
+.has-very-dark-gray-background-color:visited {
 	background-color: #404040;
 }
 
-.has-medium-gray-color {
+.has-medium-gray-color,
+.has-medium-gray-color:hover,
+.has-medium-gray-color:active,
+.has-medium-gray-color:focus,
+.has-medium-gray-color:visited {
 	color: #606060;
 }
 
-.has-medium-gray-background-color {
+.has-medium-gray-background-color,
+.has-medium-gray-background-color:hover,
+.has-medium-gray-background-color:active,
+.has-medium-gray-background-color:focus,
+.has-medium-gray-background-color:visited {
 	background-color: #606060;
 }
 
@@ -330,30 +384,30 @@ p.has-drop-cap:not(:focus):first-letter {
 }
 
 .wp-block-file .wp-block-file__button,
-.wp-block-button__link:not(.has-text-color) {
+.wp-block-button__link {
 	color: #d63031;
 }
 
 .wp-block-file .wp-block-file__button:active,
 .wp-block-file .wp-block-file__button:focus,
 .wp-block-file .wp-block-file__button:hover,
-.wp-block-button__link:not(.has-text-color):active,
-.wp-block-button__link:not(.has-text-color):focus,
-.wp-block-button__link:not(.has-text-color):hover {
+.wp-block-button__link:active,
+.wp-block-button__link:focus,
+.wp-block-button__link:hover {
 	color: #fff;
 }
 
 .wp-block-file .wp-block-file__button,
-.wp-block-button__link:not(.has-background) {
+.wp-block-button__link {
 	background: #f0f0f0;
 }
 
 .wp-block-file .wp-block-file__button:active,
 .wp-block-file .wp-block-file__button:focus,
 .wp-block-file .wp-block-file__button:hover,
-.wp-block-button__link:not(.has-background):active,
-.wp-block-button__link:not(.has-background):focus,
-.wp-block-button__link:not(.has-background):hover {
+.wp-block-button__link:active,
+.wp-block-button__link:focus,
+.wp-block-button__link:hover {
 	background-color: #d63031;
 }
 
@@ -369,7 +423,28 @@ p.has-drop-cap:not(:focus):first-letter {
 /*--------------------------------------------------------------
 Widgets
 --------------------------------------------------------------*/
+
+/* Categories, Latest Posts & Archives */
+
+.wp-block-categories.aligncenter,
+.wp-block-categories.aligncenter ul,
+.wp-block-latest-posts.aligncenter,
+.wp-block-archives.aligncenter {
+	list-style-position: inside;
+	text-align: center;
+}
+
+/* Latest comments */
+
 .wp-block-latest-comments {
 	padding-left: 0;
 	padding-right: 0;
-}
+}
+
+.wp-block-latest-comments.alignfull {
+	text-align: left;
+}
+
+.rtl .wp-block-latest-comments.alignfull {
+	text-align: right;
+}

+ 18 - 6
photos/editor-blocks.css

@@ -72,12 +72,9 @@ Description: Gutenberg Block Editor Styles
 	margin-right: auto;
 }
 
-a,
-a:link,
-a:visited,
-a:hover,
-a:focus,
-a:active {
+.edit-post-visual-editor a,
+.editor-block-list__block a,
+.wp-block-freeform.block-library-rich-text__tinymce a {
 	color: #d63031;
 }
 
@@ -180,6 +177,12 @@ a:active {
 2.0 General Block Styles
 --------------------------------------------------------------*/
 
+/* Main content width */
+
+.wp-block {
+	max-width: 670px; /* 640px + 30px for editor padding */
+}
+
 /* Alignments */
 .alignfull {
 	max-width: 100%;
@@ -527,6 +530,7 @@ blockquote p:last-child {
 
 .wp-block-code {
 	border: none;
+	border-radius: 0;
 }
 
 .wp-block-code .editor-plain-text {
@@ -752,12 +756,20 @@ blockquote p:last-child {
 4.0 Blocks - Widgets
 --------------------------------------------------------------*/
 
+/* Categories, Latest Posts & Archives */
+
 .block-editor ul.wp-block-archives,
 .block-editor ul.wp-block-categories,
 .block-editor ul.wp-block-latest-posts {
 	padding-left: 1em;
 }
 
+[data-align="center"] .wp-block-categories ul,
+[data-align="center"] .wp-block-latest-posts ul,
+[data-align="center"] .wp-block-archives ul {
+	list-style-position: inside;
+}
+
 .rtl .block-editor ul.wp-block-archives,
 .rtl .block-editor ul.wp-block-categories,
 .rtl .block-editor ul.wp-block-latest-posts {

+ 3 - 0
photos/functions.php

@@ -101,6 +101,9 @@ if ( ! function_exists( 'photos_setup' ) ) :
 		/* Gutenberg! */
 		add_theme_support( 'align-wide' );
 
+		// Add support for responsive embeds.
+		add_theme_support( 'responsive-embeds' );
+
 	    add_theme_support( 'editor-color-palette', array(
 			array(
 				'name' => esc_html__( 'red', 'photos' ),