From e630814d389f094139264fa1cf2a9d43127237d1 Mon Sep 17 00:00:00 2001 From: Damon Cook Date: Thu, 18 Jul 2024 18:24:10 -0400 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=80=20RELEASE=20v1.0.0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 2 + README.md | 21 +++++ .../core-blocks/cover-card--interactive.css | 69 ++++++++++++++ hover-reveal-card.php | 64 +++++++++++++ patterns/cover-cards-hover-effect.php | 90 +++++++++++++++++++ 5 files changed, 246 insertions(+) create mode 100644 .gitignore create mode 100644 README.md create mode 100644 assets/styles/core-blocks/cover-card--interactive.css create mode 100644 hover-reveal-card.php create mode 100644 patterns/cover-cards-hover-effect.php diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..4b77ed7 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +# Operating system specific files +.DS_Store \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..01bbbe6 --- /dev/null +++ b/README.md @@ -0,0 +1,21 @@ +# 'Hover reveal' card + +This WordPress plugin extends the core Cover block to create a 'hover reveal' card experience with subtle animation and considerations for [`prefers-reduced-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) respecting a visitors preference for non-essential motion. + +The final pattern is registered within the plugin, but it could also potentially be included directly in a custom WordPress theme. It can also be found on the WordPress Pattern Directory as [Grid Cards](https://wordpress.org/patterns/pattern/grid-cards/). + +## How to use + +1. Download this plugin as a zip (click on 'Code' and choose 'Download ZIP') +2. Place the un-zipped directory in your WordPress `wp-content/plugins` directory +3. Activate the plugin +4. Create a new post / page and add the 'Hover Reveal Cards' pattern. +5. Save and preview the final 'hover reveal' card effect. + +Feel free to fork it and use it however you like! + +## Changelog + +### July 18, 2024 - v1.0.0 + +Initial launch. diff --git a/assets/styles/core-blocks/cover-card--interactive.css b/assets/styles/core-blocks/cover-card--interactive.css new file mode 100644 index 0000000..d30f2f9 --- /dev/null +++ b/assets/styles/core-blocks/cover-card--interactive.css @@ -0,0 +1,69 @@ +.is-style-card--interactive { + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1); + position: relative; + transition: box-shadow 0.5s ease; +} +.is-style-card--interactive:focus-within, +.is-style-card--interactive:hover { + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.2), 0 4px 4px rgba(0, 0, 0, 0.2), 0 8px 8px rgba(0, 0, 0, 0.2), 0 16px 16px rgba(0, 0, 0, 0.2); +} +.is-style-card--interactive :where(.wp-block-group.wp-block-group-is-layout-constrained) { + position: static; +} +/* Make whole card clickable */ +.is-style-card--interactive :where(.wp-block-heading) a:after { + content: ""; + inset: 0; + position: absolute; + z-index: 10; +} +/* Animate the Cover block image */ +.is-style-card--interactive :where(.wp-block-cover__image-background) { + filter: saturate(100%) brightness(100%); + transform: scale(1); + transition: all 0.35s ease; +} +.is-style-card--interactive:focus-within :where(.wp-block-cover__image-background), +.is-style-card--interactive:hover :where(.wp-block-cover__image-background) { + filter: saturate(200%) brightness(40%); + transform: scale(1.15); +} +/* Animate label area */ +.is-style-card--interactive :where(.is-vertical) .wp-block-group:first-of-type { + opacity: 0; + transform: scale(0.95) translateX(-1rem); + transform-origin: center right; + transition: all 0.25s ease-in-out; + transition-delay: 0.2s; +} +.is-style-card--interactive:focus-within :where(.is-vertical) .wp-block-group:first-of-type, +.is-style-card--interactive:hover :where(.is-vertical) .wp-block-group:first-of-type { + opacity: 1; + transform: scale(1) translateX(0); +} +/* Animate content area */ +.is-style-card--interactive :where(.is-vertical) .wp-block-group:first-of-type + .wp-block-group p { + max-height: 0; + opacity: 0; + overflow: hidden; + transition: max-height 0.35s cubic-bezier(.19,1,.22,1), opacity 0.6s ease; +} +.is-style-card--interactive:focus-within :where(.is-vertical) .wp-block-group:first-of-type + .wp-block-group p, +.is-style-card--interactive:hover :where(.is-vertical) .wp-block-group:first-of-type + .wp-block-group p { + max-height: 100%; + opacity: 1; +} + +.is-style-card--interactive :where(.is-vertical) { + display: flex; +} + +@media (prefers-reduced-motion: reduce) { + .is-style-card--interactive *, + .is-style-card--interactive *::after, + .is-style-card--interactive *::before { + opacity: 1 !important; + transition: none !important; + visibility: visible !important; + } +} \ No newline at end of file diff --git a/hover-reveal-card.php b/hover-reveal-card.php new file mode 100644 index 0000000..7ee6a27 --- /dev/null +++ b/hover-reveal-card.php @@ -0,0 +1,64 @@ + 'hr-card-cover-card--interactive', + 'src' => plugin_dir_url( __FILE__ ) . 'assets/styles/core-blocks/cover-card--interactive.css', + 'path' => plugin_dir_path( __FILE__ ) . 'assets/styles/core-blocks/cover-card--interactive.css', + ) + ); +} +add_action( 'init', 'hr_card_enqueue_block_styles' ); + +/** + * Registers a block pattern for the plugin. + */ +function hr_card_register_block_pattern() { + $pattern_file = plugin_dir_path( __FILE__ ) . '/patterns/cover-cards-hover-effect.php'; + + if ( ! file_exists( $pattern_file ) ) { + return; + } + + register_block_pattern( + 'hr-card/cover-cards-hover-effect', + require $pattern_file + ); +} +add_action( 'init', 'hr_card_register_block_pattern' ); + +/** + * Registers the custom styles for the Cover block. + */ +function hr_card_register_block_styles() { + register_block_style( + 'core/cover', + array( + 'name' => 'card--interactive', + 'label' => __( 'Card (Interactive)', 'cards' ), + 'style_handle' => 'hr-card-cover-card--interactive', + ) + ); +} +add_action( 'init', 'hr_card_register_block_styles' ); diff --git a/patterns/cover-cards-hover-effect.php b/patterns/cover-cards-hover-effect.php new file mode 100644 index 0000000..0a0158a --- /dev/null +++ b/patterns/cover-cards-hover-effect.php @@ -0,0 +1,90 @@ + __( 'Hover Reveal Cards', 'hr-card' ), + 'categories' => array( 'about', 'columns', 'team' ), + 'source' => 'plugin', + 'content' => ' +
+
+
+
+

Latest Sounds

+
+ + + +
+

Sound Design for Everyone

+ + + +

Build unique sounds and learn the foundations of sound synthesis.

+
+
+
+ + + + + + + + + + + +
+
+
+

Latest Sounds

+
+ + + +
+

Tales from the Engineers

+ + + +

Step inside the studio and hear what happens behind the scenes.

+
+
+
+
+', +); \ No newline at end of file