ソースを参照

Dalston: Add a custom Block Style for the Cover Block.

Allan Cole 5 年 前
コミット
d881ae5594

+ 15 - 0
dalston/block-extends/extend-cover-block.css

@@ -0,0 +1,15 @@
+.wp-block-cover.is-style-hover-reveal.has-background-dim:before {
+	opacity: 0;
+}
+
+.wp-block-cover.is-style-hover-reveal.wp-block-cover__inner-container {
+	opacity: 0;
+}
+
+.wp-block-cover.is-style-hover-reveal:hover .wp-block-cover__inner-container {
+	opacity: 1;
+}
+
+.wp-block-cover.is-style-hover-reveal.has-background-dim:hover:before {
+	opacity: 1;
+}

+ 6 - 0
dalston/block-extends/extend-cover-block.js

@@ -0,0 +1,6 @@
+( function( blocks ) {
+	blocks.registerBlockStyle( 'core/cover', {
+		name: 'hover-reveal',
+		label: 'Hover Reveal'
+	} );
+}( window.wp.blocks ) );

+ 16 - 0
dalston/functions.php

@@ -174,3 +174,19 @@ function dalston_editor_styles() {
 	wp_enqueue_style( 'dalston-editor-fonts', dalston_fonts_url(), array(), null );
 }
 add_action( 'enqueue_block_editor_assets', 'dalston_editor_styles' );
+
+/**
+ * Enqueue Custom Cover Block Styles and Scripts
+ */
+function dalston_block_extends() {
+
+	wp_enqueue_script( 'dalston-extend-cover-block',
+		get_stylesheet_directory_uri() . '/block-extends/extend-cover-block.js',
+		array( 'wp-blocks' )
+	);
+
+	wp_enqueue_style( 'dalston-extend-cover-block-style',
+		get_stylesheet_directory_uri() . '/block-extends/extend-cover-block.css'
+	);
+}
+add_action( 'enqueue_block_assets', 'dalston_block_extends' );

+ 13 - 0
dalston/style-rtl.css

@@ -2381,6 +2381,11 @@ table th,
 	z-index: 1;
 }
 
+.main-navigation > div > ul li:hover, .main-navigation > div > ul li[focus-within] {
+	cursor: pointer;
+	z-index: 99999;
+}
+
 .main-navigation > div > ul li:hover, .main-navigation > div > ul li:focus-within {
 	cursor: pointer;
 	z-index: 99999;
@@ -2393,6 +2398,14 @@ table th,
 		/* Submenu display */
 	}
 	.main-navigation > div > ul li:hover > ul,
+	.main-navigation > div > ul li[focus-within] > ul,
+	.main-navigation > div > ul li ul:hover,
+	.main-navigation > div > ul li ul:focus {
+		visibility: visible;
+		opacity: 1;
+		display: block;
+	}
+	.main-navigation > div > ul li:hover > ul,
 	.main-navigation > div > ul li:focus-within > ul,
 	.main-navigation > div > ul li ul:hover,
 	.main-navigation > div > ul li ul:focus {