Selaa lähdekoodia

Dalston: Add custom media-text block style, add design improvements to cover-block image, improve header styles.

Allan Cole 5 vuotta sitten
vanhempi
commit
b080fd7512

+ 1 - 1
dalston/block-extends/extend-cover-block.css

@@ -1,6 +1,6 @@
 /* Inner Container */
 
-.wp-block-cover.is-style-hover-reveal {
+.wp-block-cover.is-style-hover-reveal:not(.has-parallax) {
 	background-size: contain;
 	background-repeat: no-repeat;
 }

+ 38 - 0
dalston/block-extends/extend-media-text-block.css

@@ -0,0 +1,38 @@
+/* Media & Text Inset Borders */
+
+.wp-block-media-text.is-style-inset-borders {
+	position: relative;
+}
+
+.wp-block-media-text.is-style-inset-borders:before {
+	content: '';
+	position: absolute;
+	top: 10px;
+	right: 10px;
+	bottom: 10px;
+	left: 10px;
+	border: 1px solid #FFFFFF;
+	z-index: 1;
+}
+
+.wp-block-media-text.is-style-inset-borders.is-selected:before {
+	content: inherit;
+	display: none;
+}
+
+.wp-block-media-text.is-style-inset-borders.is-selected .block-library-media-text__media-container:before {
+	content: '';
+	position: absolute;
+	top: 10px;
+	right: 10px;
+	bottom: 10px;
+	left: 10px;
+	border: 1px solid #FFFFFF;
+	z-index: 1;
+	border-right-width: inherit;
+}
+
+.wp-block-media-text.has-media-on-the-right.is-style-inset-borders.is-selected .block-library-media-text__media-container:before {
+	border-left-width: inherit;
+	border-right-width: 1px;
+}

+ 6 - 0
dalston/block-extends/extend-media-text-block.js

@@ -0,0 +1,6 @@
+( function( blocks ) {
+	blocks.registerBlockStyle( 'core/media-text', {
+		name: 'inset-borders',
+		label: 'Inset Borders'
+	} );
+}( window.wp.blocks ) );

+ 10 - 0
dalston/functions.php

@@ -199,5 +199,15 @@ function dalston_block_extends() {
 	wp_enqueue_style( 'dalston-extend-cover-columns-style',
 		get_stylesheet_directory_uri() . '/block-extends/extend-columns-block.css'
 	);
+
+	// Columns Block Tweaks
+	wp_enqueue_script( 'dalston-extend-media-text-block',
+		get_stylesheet_directory_uri() . '/block-extends/extend-media-text-block.js',
+		array( 'wp-blocks' )
+	);
+
+	wp_enqueue_style( 'dalston-extend-cover-media-text-style',
+		get_stylesheet_directory_uri() . '/block-extends/extend-media-text-block.css'
+	);
 }
 add_action( 'enqueue_block_assets', 'dalston_block_extends' );

+ 2 - 10
dalston/sass/_extra-child-theme.scss

@@ -221,17 +221,9 @@ a {
 
 	background: #{map-deep-get($config-global, "color", "secondary", "default")};
 	color: #{map-deep-get($config-global, "color", "background", "default")};
-	position: relative;
 
-	&:before {
-		content: '';
-		position: absolute;
-		top: 10px;
-		right: 10px;
-		bottom: 10px;
-		left: 10px;
-		border: 1px solid #{map-deep-get($config-global, "color", "background", "default")};
-		z-index: 1;
+	&.is-style-inset-borders:before {
+		border-color: #{map-deep-get($config-global, "color", "background", "default")};
 	}
 }
 

+ 3 - 12
dalston/sass/style-child-theme-editor.scss

@@ -40,19 +40,10 @@
 }
 
 .wp-block-media-text {
-
 	background: #{map-deep-get($config-global, "color", "secondary", "default")};
 	color: #{map-deep-get($config-global, "color", "background", "default")};
-	position: relative;
-
-	&:before {
-		content: '';
-		position: absolute;
-		top: 10px;
-		right: 10px;
-		bottom: 10px;
-		left: 10px;
-		border: 1px solid #{map-deep-get($config-global, "color", "background", "default")};
-		z-index: 1;
+
+	&.is-style-inset-borders:before {
+		border-color: #{map-deep-get($config-global, "color", "background", "default")};
 	}
 }

+ 4 - 12
dalston/style-editor.css

@@ -890,16 +890,8 @@ table th,
 .wp-block-media-text {
 	background: #0d1b24;
 	color: #FFFFFF;
-	position: relative;
-}
-
-.wp-block-media-text:before {
-	content: '';
-	position: absolute;
-	top: 10px;
-	right: 10px;
-	bottom: 10px;
-	left: 10px;
-	border: 1px solid #FFFFFF;
-	z-index: 1;
+}
+
+.wp-block-media-text.is-style-inset-borders:before {
+	border-color: #FFFFFF;
 }

+ 2 - 10
dalston/style-rtl.css

@@ -3594,18 +3594,10 @@ a {
 .entry .entry-content .wp-block-media-text {
 	background: #0d1b24;
 	color: #FFFFFF;
-	position: relative;
 }
 
-.entry .entry-content .wp-block-media-text:before {
-	content: '';
-	position: absolute;
-	top: 10px;
-	left: 10px;
-	bottom: 10px;
-	right: 10px;
-	border: 1px solid #FFFFFF;
-	z-index: 1;
+.entry .entry-content .wp-block-media-text.is-style-inset-borders:before {
+	border-color: #FFFFFF;
 }
 
 /**

+ 2 - 10
dalston/style.css

@@ -3623,18 +3623,10 @@ a {
 .entry .entry-content .wp-block-media-text {
 	background: #0d1b24;
 	color: #FFFFFF;
-	position: relative;
 }
 
-.entry .entry-content .wp-block-media-text:before {
-	content: '';
-	position: absolute;
-	top: 10px;
-	right: 10px;
-	bottom: 10px;
-	left: 10px;
-	border: 1px solid #FFFFFF;
-	z-index: 1;
+.entry .entry-content .wp-block-media-text.is-style-inset-borders:before {
+	border-color: #FFFFFF;
 }
 
 /**