Altofocus: Correcting header sizes in Gutenberg blocks; make sure custom colour palettes can actually be applied to buttons on the front-end. Add hover styles for buttons to the editor styles.

altofocus/assets/stylesheets/blocks.css

@@ -92,8 +92,8 @@ p.has-drop-cap:not(:focus)::first-letter {
 
 /* File */
 
-.wp-block-file a.wp-block-file__button,
-.wp-block-file a.wp-block-file__button:visited {
+a.wp-block-file__button,
+a.wp-block-file__button:visited {
 	-webkit-border-radius: 30px;
 	-moz-border-radius: 30px;
 	border-radius: 30px;
@@ -119,7 +119,7 @@ p.has-drop-cap:not(:focus)::first-letter {
 	word-break: break-word;
 }
 
-.wp-block-file a.wp-block-file__button:hover {
+a.wp-block-file__button:hover {
 	-webkit-animation: bounce-reveal 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
 	-moz-animation: bounce-reveal 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
 	-o-animation: bounce-reveal 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
@@ -129,8 +129,8 @@ p.has-drop-cap:not(:focus)::first-letter {
 	color: #fff;
 }
 
-.wp-block-file a.wp-block-file__button:focus,
-.wp-block-file a.wp-block-file__button:active {
+a.wp-block-file__button:focus,
+a.wp-block-file__button:active {
 	border-color: #aaa #bbb #bbb;
 	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.125);
 	-webkit-transform: scale(0.925);
@@ -173,7 +173,7 @@ p.has-drop-cap:not(:focus)::first-letter {
 
 /* Buttons */
 
-.wp-block-button .wp-block-button__link {
+.wp-block-button__link {
 	-webkit-border-radius: 30px;
 	-moz-border-radius: 30px;
 	border-radius: 30px;
@@ -199,7 +199,7 @@ p.has-drop-cap:not(:focus)::first-letter {
 	word-break: break-word;
 }
 
-.wp-block-button .wp-block-button__link:hover {
+.wp-block-button__link:hover {
 	-webkit-animation: bounce-reveal 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
 	-moz-animation: bounce-reveal 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
 	-o-animation: bounce-reveal 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
@@ -209,8 +209,8 @@ p.has-drop-cap:not(:focus)::first-letter {
 	color: #fff;
 }
 
-.wp-block-button .wp-block-button__link:focus,
-.wp-block-button .wp-block-button__link:active {
+.wp-block-button__link:focus,
+.wp-block-button__link:active {
 	border-color: #aaa #bbb #bbb;
 	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.125);
 	-webkit-transform: scale(0.925);
@@ -280,43 +280,43 @@ hr.wp-block-separator {
 --------------------------------------------------------------*/
 
 .has-orange-color {
-	color: #e38900;
+	color: #e38900 !important;
 }
 
 .has-orange-background-color {
-	background-color: #e38900;
+	background-color: #e38900 !important;
 }
 
 .has-dark-gray-color {
-	color: #111;
+	color: #111 !important;
 }
 
 .has-dark-gray-background-color {
-	background-color: #111;
+	background-color: #111 !important;
 }
 
 .has-medium-888-color {
-	color: #111111;
+	color: #111111 !important;
 }
 
 .has-medium-gray-background-color {
-	background-color: #888;
+	background-color: #888 !important;
 }
 
 .has-light-gray-color {
-	color: #ccc;
+	color: #ccc !important;
 }
 
 .has-light-gray-background-color {
-	background-color: #ccc;
+	background-color: #ccc !important;
 }
 
 .has-white-color {
-	color: #fff;
+	color: #fff !important;
 }
 
 .has-white-background-color {
-	background-color: #fff;
+	background-color: #fff !important;
 }
 
 /*--------------------------------------------------------------

altofocus/assets/stylesheets/editor-blocks.css

@@ -12,6 +12,7 @@ Description: Used to style Gutenberg Blocks in the editor.
 4.0 Blocks - Formatting
 5.0 Blocks - Layout Elements
 6.0 Blocks - Widgets
+7.0 Blocks - Animations
 --------------------------------------------------------------*/
 
 /*--------------------------------------------------------------
@@ -20,13 +21,16 @@ Description: Used to style Gutenberg Blocks in the editor.
 
 .edit-post-visual-editor .editor-block-list__block,
 .editor-default-block-appender input[type="text"].editor-default-block-appender__content {
-	color: #111111;
 	font-size: 13.875px;
 	font-family: "Libre Baskerville", "Georgia", Georgia, "Times New Roman", Times, serif;
 	font-weight: 300;
 	line-height: 1.75em;
 }
 
+.edit-post-visual-editor .editor-block-list__block {
+	color: #111;
+}
+
 .edit-post-visual-editor .editor-block-list__block p {
 	font-size: 13.875px;
 }
@@ -35,14 +39,6 @@ Description: Used to style Gutenberg Blocks in the editor.
 	margin-bottom: 1.75em
 }
 
-@media screen and (min-width: 37.5em) {
-	.edit-post-visual-editor .editor-block-list__block,
-	.edit-post-visual-editor .editor-block-list__block p,
-	.editor-default-block-appender input[type="text"].editor-default-block-appender__content  {
-		font-size: 16.875px;
-	}
-}
-
 .editor-post-title__block .editor-post-title__input {
 	font-size: 19.6875px;
 	font-family: "Libre Baskerville", "Georgia", Georgia, "Times New Roman", Times, serif;
@@ -50,10 +46,76 @@ Description: Used to style Gutenberg Blocks in the editor.
 	line-height: 1.25;
 }
 
+.wp-block-heading h1,
+.wp-block-freeform.block-library-rich-text__tinymce h1 {
+	font-size: 30px;
+}
+
+.wp-block-heading h2,
+.wp-block-freeform.block-library-rich-text__tinymce h2 {
+	font-size: 22px;
+}
+
+.wp-block-heading h3,
+.wp-block-freeform.block-library-rich-text__tinymce h3 {
+	font-size: 17px;
+}
+
+.wp-block-heading h4,
+.wp-block-freeform.block-library-rich-text__tinymce h4 {
+	font-size: 15px;
+}
+
+.wp-block-heading h5,
+.wp-block-freeform.block-library-rich-text__tinymce h5 {
+	font-size: 12px;
+}
+
+.wp-block-heading h6,
+.wp-block-freeform.block-library-rich-text__tinymce h6 {
+	font-size: 10px;
+}
+
 @media screen and (min-width: 37.5em) {
+	.edit-post-visual-editor .editor-block-list__block,
+	.edit-post-visual-editor .editor-block-list__block p,
+	.editor-default-block-appender input[type="text"].editor-default-block-appender__content  {
+		font-size: 16.875px;
+	}
+
 	.editor-post-title__block .editor-post-title__input {
 		font-size: 37.5px;
 	}
+
+	.wp-block-heading h1,
+	.wp-block-freeform.block-library-rich-text__tinymce h1 {
+		font-size: 36px;
+	}
+
+	.wp-block-heading h2,
+	.wp-block-freeform.block-library-rich-text__tinymce h2 {
+		font-size: 27px;
+	}
+
+	.wp-block-heading h3,
+	.wp-block-freeform.block-library-rich-text__tinymce h3 {
+		font-size: 21px;
+	}
+
+	.wp-block-heading h4,
+	.wp-block-freeform.block-library-rich-text__tinymce h4 {
+		font-size: 18px;
+	}
+
+	.wp-block-heading h5,
+	.wp-block-freeform.block-library-rich-text__tinymce h5 {
+		font-size: 15px;
+	}
+
+	.wp-block-heading h6,
+	.wp-block-freeform.block-library-rich-text__tinymce h6 {
+		font-size: 12px;
+	}
 }
 
 /*--------------------------------------------------------------
@@ -98,6 +160,14 @@ Description: Used to style Gutenberg Blocks in the editor.
 	border: 0;
 }
 
+.wp-block-freeform.block-library-rich-text__tinymce cite {
+	color: #888;
+}
+
+.wp-block-freeform.block-library-rich-text__tinymce cite:before {
+	content: "\2014";
+}
+
 /* Table styles */
 
 .wp-block-freeform.block-library-rich-text__tinymce table {
@@ -195,6 +265,27 @@ Description: Used to style Gutenberg Blocks in the editor.
 	word-break: break-word;
 }
 
+.wp-block-file a.wp-block-file__button:hover {
+	-webkit-animation: bounce-reveal 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+	-moz-animation: bounce-reveal 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+	-o-animation: bounce-reveal 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+	animation: bounce-reveal 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+	background: #e38900;
+	border-color: #e38900;
+	color: #fff;
+}
+
+.wp-block-file a.wp-block-file__button:focus,
+.wp-block-file a.wp-block-file__button:active {
+	border-color: #aaa #bbb #bbb;
+	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.125);
+	-webkit-transform: scale(0.925);
+	-moz-transform: scale(0.925);
+	-o-transform: scale(0.925);
+	-ms-transform: scale(0.925);
+	transform: scale(0.925);
+}
+
 
 /*--------------------------------------------------------------
 4.0 Blocks - Formatting
@@ -207,6 +298,20 @@ Description: Used to style Gutenberg Blocks in the editor.
 	padding: 0;
 }
 
+/* Code */
+
+.wp-block-code {
+	background: #eee;
+	border: 0;
+	border-radius: 0;
+	margin-bottom: 1.75em;
+	padding: 1.6em;
+}
+
+.wp-block-code textarea {
+	background: transparent;
+}
+
 /* Preformatted */
 
 .wp-block-preformatted {
@@ -296,6 +401,34 @@ Description: Used to style Gutenberg Blocks in the editor.
 	word-break: break-word;
 }
 
+.wp-block-button .wp-block-button__link:hover {
+	-webkit-animation: bounce-reveal 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+	-moz-animation: bounce-reveal 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+	-o-animation: bounce-reveal 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+	animation: bounce-reveal 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+	background: #e38900;
+	border-color: #e38900;
+	color: #fff;
+}
+
+.wp-block-button .wp-block-button__link:focus,
+.wp-block-button .wp-block-button__link:active {
+	border-color: #aaa #bbb #bbb;
+	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.125);
+	-webkit-transform: scale(0.925);
+	-moz-transform: scale(0.925);
+	-o-transform: scale(0.925);
+	-ms-transform: scale(0.925);
+	transform: scale(0.925);
+}
+
+@media screen and (min-width: 37.5em) {
+	.wp-block-button .wp-block-button__link {
+		font-size: 15px;
+		font-size: 1rem;
+	}
+}
+
 /* Seperator */
 
 .wp-block-separator {
@@ -308,3 +441,68 @@ Description: Used to style Gutenberg Blocks in the editor.
 6.0 Blocks - Widgets
 --------------------------------------------------------------*/
 
+/*--------------------------------------------------------------
+7.0 Blocks - Animations
+--------------------------------------------------------------*/
+
+@-webkit-keyframes bounce-reveal {
+	0%,
+	100% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+	}
+	33% {
+		-webkit-transform: scale(1.1);
+		transform: scale(1.1);
+	}
+	66% {
+		-webkit-transform: scale(0.9);
+		transform: scale(0.9);
+	}
+}
+
+@-moz-keyframes bounce-reveal {
+	0%,
+	100% {
+		-moz-transform: scale(1);
+		transform: scale(1);
+	}
+	33% {
+		-moz-transform: scale(1.1);
+		transform: scale(1.1);
+	}
+	66% {
+		-moz-transform: scale(0.9);
+		transform: scale(0.9);
+	}
+}
+
+@-o-keyframes bounce-reveal {
+	0%,
+	100% {
+		-o-transform: scale(1);
+		transform: scale(1);
+	}
+	33% {
+		-o-transform: scale(1.1);
+		transform: scale(1.1);
+	}
+	66% {
+		-o-transform: scale(0.9);
+		transform: scale(0.9);
+	}
+}
+
+@keyframes bounce-reveal {
+	0%,
+	100% {
+		transform: scale(1);
+	}
+	33% {
+		transform: scale(1.1);
+	}
+	66% {
+		transform: scale(0.9);
+	}
+}
+