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

This commit is contained in:
Allan Cole 2019-09-20 16:48:56 -04:00
parent 5c465e4e0e
commit b080fd7512
9 changed files with 65 additions and 52 deletions

View file

@ -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;
}

View file

@ -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;
}

View file

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

View file

@ -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' );

View file

@ -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")};
}
}

View file

@ -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")};
}
}

View file

@ -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;
}

View file

@ -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;
}
/**

View file

@ -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;
}
/**