Browse Source

added gallery styles

Maggie Cabrera 4 years ago
parent
commit
2d1446336b

+ 15 - 0
blank-canvas-blocks/assets/ponyfill.css

@@ -298,6 +298,21 @@ h1, h2, h3, h4, h5, h6 {
 	border-color: var(--wp--custom--button--color--hover-background);
 	border-color: var(--wp--custom--button--color--hover-background);
 }
 }
 
 
+.wp-block-gallery {
+	margin: var(--wp--custom--gallery--margin);
+}
+
+.wp-block-gallery .blocks-gallery-image figcaption,
+.wp-block-gallery .blocks-gallery-item figcaption {
+	margin: var(--wp--custom--gallery--caption--margin);
+	color: var(--wp--custom--gallery--caption--color);
+	font: var(--wp--custom--gallery--caption--font-size);
+}
+
+.wp-block-gallery.alignfull .blocks-gallery-grid {
+	width: 100%;
+}
+
 .wp-block-image {
 .wp-block-image {
 	/* 
 	/* 
 	From what I can tell the below are styles regularly used by themes
 	From what I can tell the below are styles regularly used by themes

+ 6 - 0
blank-canvas-blocks/experimental-theme.json

@@ -137,6 +137,12 @@
 							"fontSize": "110px",
 							"fontSize": "110px",
 							"fontWeight": "400"
 							"fontWeight": "400"
 						}
 						}
+				"gallery": {
+					"margin": "0 auto",
+					"caption": {
+						"margin": 0,
+						"fontSize": "var(--wp--preset--font-size--small)",
+						"color": "var(--wp--preset--color--white)"
 					}
 					}
 				},
 				},
 				"quote": {
 				"quote": {

+ 21 - 0
blank-canvas-blocks/sass/blocks/_gallery.scss

@@ -0,0 +1,21 @@
+.wp-block-gallery {
+
+	margin: var(--wp--custom--gallery--margin);
+
+	.blocks-gallery-image,
+	.blocks-gallery-item {
+
+		figcaption {
+			margin: var(--wp--custom--gallery--caption--margin);
+			// Text color is always white to account for default gradient background
+			color: var(--wp--custom--gallery--caption--color);
+			font: var(--wp--custom--gallery--caption--font-size);
+		}
+	}
+
+	&.alignfull {
+		.blocks-gallery-grid {
+			width: 100%;
+		}
+	}
+}

+ 1 - 0
blank-canvas-blocks/sass/ponyfill.scss

@@ -11,6 +11,7 @@
 //   spacing with CSS-variables overrides
 //   spacing with CSS-variables overrides
 @import "blocks/heading";
 @import "blocks/heading";
 @import "blocks/button";
 @import "blocks/button";
+@import "blocks/gallery";
 @import "blocks/image";
 @import "blocks/image";
 @import "blocks/list";
 @import "blocks/list";
 @import "blocks/paragraph";
 @import "blocks/paragraph";