Merge pull request #229 from peiche/v1.4.3

v1.4.3

CHANGELOG.md

@@ -1,5 +1,20 @@
 # Change Log
 
+## 1.4.3 - 05/18/2021
+
+### Changed
+
+- Updated to CodyFrame 2.8.9.
+- Adjusted blockquote spacing.
+- Fixed buttons block spacing.
+- Fixed buttons block inside Jetpack forms.
+- Fixed code block text color and width in the block editor.
+- Fixed cover block color overlay.
+- Fixed quote block large variant citation alignment.
+- Fixed Inset Hero template header for when there is no featured image.
+- Fixed editor visibility class.
+- Fixed Jetpack gallery block margins.
+
 ## 1.4.2 - 05/06/2021
 
 ### Changed

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "garrick",
-	"version": "1.4.2",
+	"version": "1.4.3",
 	"description": "Garrick is a modern, responsive theme.",
 	"author": "Paul Eiche",
 	"license": "GPL-2.0+",
@@ -31,28 +31,28 @@
 		"url": "https://github.com/peiche/garrick/issues"
 	},
 	"devDependencies": {
-		"@babel/compat-data": "^7.14.0",
+		"@babel/compat-data": "^7.14.7",
 		"@wordpress/eslint-plugin": "^9.0.5",
 		"@wordpress/stylelint-config": "^19.0.4",
 		"browser-sync": "^2.26.14",
 		"browser-sync-webpack-plugin": "2.3.0",
 		"choices.js": "^9.0.1",
-		"codyhouse-framework": "^2.8.8",
-		"copy-webpack-plugin": "^8.1.1",
+		"codyhouse-framework": "^2.8.9",
+		"copy-webpack-plugin": "^9.0.0",
 		"cross-env": "^7.0.3",
-		"eslint": "^7.26.0",
+		"eslint": "^7.29.0",
 		"imagemin-mozjpeg": "^9.0.0",
 		"imagemin-webpack-plugin": "^2.4.2",
-		"laravel-mix": "^6.0.19",
+		"laravel-mix": "^6.0.24",
 		"node-wp-i18n": "^1.2.5",
 		"postcss-calc": "^8.0.0",
 		"postcss-css-variables": "git+https://git@github.com/codyhouse/postcss-css-variables.git",
 		"rimraf": "^3.0.2",
-		"sass": "^1.32.13",
+		"sass": "^1.35.1",
 		"sass-loader": "^11.1.1",
 		"stylelint": "^13.13.1",
 		"stylelint-scss": "^3.19.0",
-		"svg-spritemap-webpack-plugin": "^4.0.1",
+		"svg-spritemap-webpack-plugin": "^4.0.3",
 		"theme-claim": "^0.2.0",
 		"vue-template-compiler": "^2.6.12"
 	}

resources/scss/blocks/core/_buttons.scss

@@ -9,9 +9,9 @@
 @use '~codyhouse-framework/main/assets/css/base/breakpoints';
 
 .wp-block-buttons {
+	--gap: var(--space-sm);
 	display: flex;
 	flex-wrap: wrap;
-	margin-bottom: calc(var(--space-xxxs) * var(--text-vspace-multiplier, 1));
 	margin-left: calc(-1 * var(--gap, 0.5em));
 
 	&.is-content-justification-left {
@@ -28,10 +28,14 @@
 }
 
 .wp-block-button {
-	margin-bottom: var(--gap, 0.5em);
-	margin-left: var(--gap, 0.5em);
 
-	&__link {
+	.wp-block-buttons & {
+		margin-left: var(--gap);
+		margin-bottom: var(--gap);
+	}
+
+	// double up specificity to override Jetpack
+	&__link.wp-block-button__link {
 		border: 0;
 		box-shadow: none;
 		cursor: pointer;

resources/scss/blocks/core/_cover.scss

@@ -37,16 +37,18 @@
 		bottom: 0;
 		right: 0;
 		background-color: var(--color-black);
-		opacity: 0.5; // default dim of 50% opacity
 		z-index: 1;
 	}
 
 	// The background dim can be any number from 10-100. We're just running
 	// a simple loop to add a black background color over the element.
 	@for $dim from 1 through 10 {
 
-		&.has-background-dim-#{ $dim * 10 }::before {
-			opacity: $dim * 0.1;
+		&.has-background-dim-#{ $dim * 10 } {
+
+			.wp-block-cover__image-background {
+				opacity: $dim * 0.1;
+			}
 		}
 	}
 
@@ -64,10 +66,8 @@
 		position: absolute;
 		width: 100%;
 		height: 100%;
-		top: 50%;
-		left: 50%;
 		object-fit: cover;
-		transform: translateX(-50%) translateY(-50%);
+		opacity: 0.5;
 		z-index: 1;
 	}
 

resources/scss/blocks/editor/_alignment.scss

@@ -18,10 +18,18 @@
 .wp-block[data-align="wide"],
 .block-editor-block-list__block[data-align="wide"] {
 	max-width: var(--max-width-md);
+
+	.wp-block {
+		max-width: var(--max-width-md);
+	}
 }
 
 .wp-block.alignfull,
 .wp-block[data-align="full"],
 .block-editor-block-list__block[data-align="full"] {
 	max-width: 100vw;
+
+	.wp-block {
+		max-width: 100vw;
+	}
 }

resources/scss/blocks/editor/_code.scss

@@ -6,7 +6,16 @@
 /// @link   https://boldoak.design/work/garrick
 ////
 
-.wp-block-code {
+@use '~codyhouse-framework/main/assets/css/base/breakpoints';
+
+// double up specificity to ensure correct editor styles.
+.wp-block-code.wp-block-code {
+	transform: none;
+	color: var(--color-white);
+
+	@include breakpoints.breakpoint(sm) {
+		max-width: calc(var(--max-width-sm) * 1.2);
+	}
 
 	textarea {
 		background-color: inherit;

resources/scss/blocks/editor/_index.scss

@@ -18,3 +18,4 @@
 @use 'media-text';
 @use 'post-title';
 @use 'preformatted';
+@use 'quote';

resources/scss/blocks/editor/_quote.scss

@@ -0,0 +1,10 @@
+.wp-block-quote {
+
+	&.is-style-large {
+
+		cite,
+		footer {
+			text-align: inherit;
+		}
+	}
+}

resources/scss/blocks/jetpack/_gallery.scss

@@ -10,20 +10,23 @@
 
 @use '~codyhouse-framework/main/assets/css/base/breakpoints';
 
-.wp-block-jetpack-tiled-gallery {
+// double specificity to override Jetpack styles
+.wp-block-jetpack-tiled-gallery.wp-block-jetpack-tiled-gallery {
 	margin-top: var(--component-padding);
 	margin-bottom: var(--component-padding);
 
-	&.alignwide,
-	&.alignfull {
-		margin-left: calc(-50vw + 50%);
-		margin-right: calc(-50vw + 50%);
-	}
-
+	// duplicate style to override Jetpack
 	&.alignwide {
 
 		@include breakpoints.breakpoint(md) {
-			margin-left: 50%;
+			margin-left: calc(-1 * var(--space-xxl));
+			margin-right: calc(-1 * var(--space-xxl));
 		}
 	}
+
+	// duplicate style to override Jetpack
+	&.alignfull {
+		margin-left: calc( -100vw / 2 + 100% / 2);
+		margin-right: calc( -100vw / 2 + 100% / 2);
+	}
 }

resources/scss/components/_entry.scss

@@ -88,6 +88,9 @@
 			padding: var(--space-sm) var(--space-md) 0 var(--space-md);
 			margin-left: calc(-1 * var(--space-md));
 			margin-right: calc(-1 * var(--space-md));
+		}
+
+		.template--hero-inset-header.single-has-post-thumbnail & {
 
 			@include breakpoints.breakpoint(sm) {
 				margin-top: calc(-1 * var(--space-xxl));

resources/scss/editor/_controls.scss

@@ -72,3 +72,7 @@ svg.components-checkbox-control__checked {
 .edit-post-post-link__link {
 	font-size: var(--wp-font-size);
 }
+
+.is-visible {
+	display: inherit !important;
+}

resources/scss/tools/_mixins.scss

@@ -6,6 +6,7 @@
 /// @link   https://boldoak.design/work/garrick
 ////
 
+@use '~codyhouse-framework/main/assets/css/base/breakpoints';
 @use '~codyhouse-framework/main/assets/css/base/mixins';
 
 // Shared scrollbar style
@@ -33,10 +34,17 @@
 	}
 }
 
+$blockquote-size-padding: var(--space-sm);
+$blockquote-size-border: var(--space-xxxxs);
+
 @mixin blockquote {
 	margin-top: calc(var(--space-sm) * var(--text-vspace-multiplier, 1));
-	padding-left: var(--space-md);
-	border-left: 4px solid var(--color-contrast-low);
+	padding-left: $blockquote-size-padding;
+	border-left: $blockquote-size-border solid var(--color-contrast-low);
+
+	@include breakpoints.breakpoint(md) {
+		margin-left: calc(-1 * (#{$blockquote-size-padding} + #{$blockquote-size-border}));
+	}
 }
 
 @mixin cite {

style.css

@@ -2,7 +2,7 @@
  * Theme Name: Garrick
  * Theme URI:    https://boldoak.design/work/garrick
  * Description:  Starter WordPress theme.
- * Version:      1.4.2
+ * Version:      1.4.3
  * Author:       Paul Eiche
  * Author URI:   https://boldoak.design
  * Tags:         custom-background, custom-colors, custom-menu, featured-images, one-column, post-formats, rtl-language-support, theme-options, threaded-comments, translation-ready