Merge branch 'release/0.3.1'

bu-ist · Oct 28, 2020 · 4528302 · 4528302
2 parents b8ae9b1 + ebff6c8
commit 4528302
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 40 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Changelog
 
+## 0.3.1
+- Photo Essay Block Improvements: 
+  - Puts captions blocks closer to photo essay blocks. fixes: bu-ist/r-editorial#984
+  - Adds hover effect to photo essay images to denote click-ability. fixes:bu-ist/r-editorial#896
+
+
+
 ## 0.3.0
 - Official support for WordPress 5.4, including:
 - Compatibility for the the listicle block https://github.com/bu-ist/bu-blocks/pull/271

diff --git a/dist/blocks.editor.build.css b/dist/blocks.editor.build.css
diff --git a/dist/blocks.style.build.css b/dist/blocks.style.build.css
diff --git a/docs/blocks.style.build.css b/docs/blocks.style.build.css
diff --git a/src/blocks/photoessay/_bu-blocks-block-photoessay-base.scss b/src/blocks/photoessay/_bu-blocks-block-photoessay-base.scss
@@ -20,7 +20,7 @@ $photo-padding-xl: $padding/2 !default;
 			position: relative;
 			float: left;
 			// background: #f66;
-			margin-bottom: $photo-padding*2;
+			margin-bottom: $photo-padding * 2;
 			.wp-block-photoessay-media {
 				position: absolute;
 				top: 0;
@@ -32,16 +32,67 @@ $photo-padding-xl: $padding/2 !default;
 				content: "";
 				display: inline-block;
 			}
+
+			&:first-child {
+				figure {
+					@media (hover: none) and (pointer: coarse) {
+						position: relative;
+
+						&::before {
+							opacity: 1;
+						}
+					}
+				}
+			}
 		}
 	}
+
+	+ .is-style-caption {
+		float: left;
+		margin-bottom: $photo-padding * 2;
+		margin-top: $photo-padding * -1.5;
+	}
+
 	figure {
 		height: 100%;
 		margin: 0; // needed for editor side in cases where Normalize.scss isn't included.
+		overflow: hidden;
+
+		img {
+			transition: transform 1000ms ease-out;
+
+			&:hover,
+			&:focus {
+				transform: scale( 1.125 );
+			}
+		}
 
 		&:hover {
 			cursor: pointer;
 		}
 
+		@media (hover: none) and (pointer: coarse) {
+			position: relative;
+
+			&::before {
+				content: "\2922";
+				display: block;
+				font-family: "BU-Default-Icons";
+				position: absolute;
+				right: 3px;
+				top: 3px;
+				color: $color-grayscale-f;
+				font-size: 14px;
+				line-height: 14px;
+				width: 14px;
+				background: rgba( $color-grayscale-0, 0.5 );
+				padding: 5px;
+				box-sizing: content-box;
+				border-radius: 4px;
+				opacity: 0.5;
+			}
+		}
+
 		figcaption {
 			display: none;
 		}
@@ -344,12 +395,19 @@ $photo-padding-xl: $padding/2 !default;
 			margin: 0 -#{$photo-padding-xl};
 			// @extend %clearfix;
 			[class*="photo-"] {
-				margin-bottom: $photo-padding-xl*2;
+				margin-bottom: $photo-padding-xl * 2;
 				.wp-block-photoessay-media {
 					padding: 0 $photo-padding-xl;
 				}
 			}
 		}
+
+		+ .is-style-caption {
+			float: left;
+			margin-bottom: $photo-padding-xl * 2;
+			margin-top: $photo-padding-xl * -1.5;
+		}
+
 		[class*="photo-row-square-1"] {
 			@include breakpoint( $xs ) {
 				.photo-1 {