🚀 RELEASE v1.0.0

.gitignore

@@ -0,0 +1,2 @@
+# Operating system specific files
+.DS_Store

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.

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

hover-reveal-card.php

@@ -0,0 +1,64 @@
+<?php
+/**
+* Plugin Name: Hover Reveal Card
+* Description: Extends the Cover block for an animating card effect.
+* Requires at least: 6.6
+* Requires PHP: 8.0
+* Version: 1.0.0
+* Author: Damon Cook
+* License: GPL-2.0-or-later
+* License URI: https://www.gnu.org/licenses/gpl-2.0.html
+* Text Domain: hr-card
+*/
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+
+/**
+ * Enqueues the block styles for the plugin.
+ */
+function hr_card_enqueue_block_styles() {
+	wp_enqueue_block_style(
+		'core/cover',
+		array(
+			'handle' => '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' );

patterns/cover-cards-hover-effect.php

@@ -0,0 +1,90 @@
+<?php
+/**
+ * Hover Reveal Cards pattern.
+ */
+return array(
+	'title'      => __( 'Hover Reveal Cards', 'hr-card' ),
+	'categories' => array( 'about', 'columns', 'team' ),
+	'source'     => 'plugin',
+	'content'    => '<!-- wp:group {"tagName":"section","metadata":{"name":"Cards","categories":["text","about"],"patternName":"twentytwentyfour/cards-4"},"align":"wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|20"},"blockGap":"18px"}},"layout":{"type":"grid","columnCount":null,"minimumColumnWidth":"15rem"}} -->
+<section class="wp-block-group alignwide" style="margin-top:var(--wp--preset--spacing--20)"><!-- wp:cover {"url":"https://images.rawpixel.com/editor_1024/cHJpdmF0ZS9zdGF0aWMvaW1hZ2Uvd2Vic2l0ZS8yMDIyLTA0L2xyL2Zyc3BsaXRzaGlyZTAwMzM1LWltYWdlLWt3dnloMWw1LmpwZw.jpg","id":null,"dimRatio":60,"overlayColor":"black","isUserOverlayColor":true,"tagName":"article","metadata":{"name":"Card"},"className":"is-style-card\u002d\u002dinteractive","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}},"heading":{"color":{"text":"var:preset|color|white"}}}},"textColor":"white","layout":{"type":"constrained"}} -->
+<article class="wp-block-cover is-style-card--interactive has-white-color has-text-color has-link-color"><span aria-hidden="true" class="wp-block-cover__background has-black-background-color has-background-dim-60 has-background-dim"></span><img class="wp-block-cover__image-background" alt="" src="https://images.rawpixel.com/editor_1024/cHJpdmF0ZS9zdGF0aWMvaW1hZ2Uvd2Vic2l0ZS8yMDIyLTA0L2xyL2Zyc3BsaXRzaGlyZTAwMzM1LWltYWdlLWt3dnloMWw1LmpwZw.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:group {"metadata":{"name":"Card Stack"},"style":{"background":{"backgroundSize":"cover"},"dimensions":{"minHeight":"22rem"},"elements":{"link":{"color":{"text":"var:preset|color|base-2"}},"heading":{"color":{"text":"var:preset|color|base-2"}}},"spacing":{"blockGap":"14px"}},"textColor":"base-2","layout":{"type":"flex","orientation":"vertical","justifyContent":"left","verticalAlignment":"space-between","flexWrap":"nowrap"}} -->
+<div class="wp-block-group has-base-2-color has-text-color has-link-color" style="min-height:22rem"><!-- wp:group {"metadata":{"name":"Card Label"},"style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}},"spacing":{"padding":{"top":"6px","bottom":"6px","left":"12px","right":"12px"}},"typography":{"fontSize":"13px","lineHeight":"1"},"color":{"background":"#296b89"}},"textColor":"white","layout":{"type":"constrained"}} -->
+<div class="wp-block-group has-white-color has-text-color has-background has-link-color" style="background-color:#296b89;padding-top:6px;padding-right:12px;padding-bottom:6px;padding-left:12px;font-size:13px;line-height:1"><!-- wp:paragraph -->
+<p>Latest Sounds</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"metadata":{"name":"Card Content"},"layout":{"type":"constrained","justifyContent":"center"}} -->
+<div class="wp-block-group"><!-- wp:heading {"level":3,"style":{"layout":{"columnSpan":1,"rowSpan":1},"typography":{"lineHeight":"1.2","fontSize":"22px"}}} -->
+<h3 class="wp-block-heading" style="font-size:22px;line-height:1.2"><a href="#">Sound Design for Everyone</a></h3>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|20"}}},"fontSize":"normal"} -->
+<p class="has-normal-font-size" style="margin-top:var(--wp--preset--spacing--20)">Build unique sounds and learn the foundations of sound synthesis.</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group --></div>
+<!-- /wp:group --></div></article>
+<!-- /wp:cover -->
+
+<!-- wp:cover {"url":"https://images.rawpixel.com/editor_1024/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvcHg3MDA0MjgtaW1hZ2Uta3d5b3J3d3kuanBn.jpg","id":null,"dimRatio":60,"overlayColor":"black","isUserOverlayColor":true,"tagName":"article","metadata":{"name":"Card"},"className":"is-style-card\u002d\u002dinteractive","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}},"heading":{"color":{"text":"var:preset|color|white"}}}},"textColor":"white","layout":{"type":"constrained"}} -->
+<article class="wp-block-cover is-style-card--interactive has-white-color has-text-color has-link-color"><span aria-hidden="true" class="wp-block-cover__background has-black-background-color has-background-dim-60 has-background-dim"></span><img class="wp-block-cover__image-background" alt="" src="https://images.rawpixel.com/editor_1024/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvcHg3MDA0MjgtaW1hZ2Uta3d5b3J3d3kuanBn.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:group {"metadata":{"name":"Card Stack"},"style":{"background":{"backgroundSize":"cover"},"dimensions":{"minHeight":"22rem"},"elements":{"link":{"color":{"text":"var:preset|color|base-2"}},"heading":{"color":{"text":"var:preset|color|base-2"}}},"spacing":{"blockGap":"14px"}},"textColor":"base-2","layout":{"type":"flex","orientation":"vertical","justifyContent":"left","verticalAlignment":"space-between","flexWrap":"nowrap"}} -->
+<div class="wp-block-group has-base-2-color has-text-color has-link-color" style="min-height:22rem"><!-- wp:group {"metadata":{"name":"Card Label"},"style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}},"spacing":{"padding":{"top":"6px","bottom":"6px","left":"12px","right":"12px"}},"typography":{"fontSize":"13px","lineHeight":"1"},"color":{"background":"#296b89"}},"textColor":"white","layout":{"type":"constrained"}} -->
+<div class="wp-block-group has-white-color has-text-color has-background has-link-color" style="background-color:#296b89;padding-top:6px;padding-right:12px;padding-bottom:6px;padding-left:12px;font-size:13px;line-height:1"><!-- wp:paragraph -->
+<p>Gear</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"metadata":{"name":"Card Content"},"layout":{"type":"constrained","justifyContent":"center"}} -->
+<div class="wp-block-group"><!-- wp:heading {"level":3,"style":{"layout":{"columnSpan":1,"rowSpan":1},"typography":{"lineHeight":"1.2","fontSize":"22px"}}} -->
+<h3 class="wp-block-heading" style="font-size:22px;line-height:1.2"><a href="#">Equipment Overload: Explore Minimalism</a></h3>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|20"}}},"fontSize":"normal"} -->
+<p class="has-normal-font-size" style="margin-top:var(--wp--preset--spacing--20)">Too many options != creative empowerment.</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group --></div>
+<!-- /wp:group --></div></article>
+<!-- /wp:cover -->
+
+<!-- wp:cover {"url":"https://images.rawpixel.com/editor_1024/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvcHgxMDg1NTYwLWltYWdlLWt3eXJhZ3U0LmpwZw.jpg","id":null,"dimRatio":60,"overlayColor":"black","isUserOverlayColor":true,"tagName":"article","metadata":{"name":"Card"},"className":"is-style-card\u002d\u002dinteractive","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}},"heading":{"color":{"text":"var:preset|color|white"}}}},"textColor":"white","layout":{"type":"constrained"}} -->
+<article class="wp-block-cover is-style-card--interactive has-white-color has-text-color has-link-color"><span aria-hidden="true" class="wp-block-cover__background has-black-background-color has-background-dim-60 has-background-dim"></span><img class="wp-block-cover__image-background" alt="" src="https://images.rawpixel.com/editor_1024/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvcHgxMDg1NTYwLWltYWdlLWt3eXJhZ3U0LmpwZw.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:group {"metadata":{"name":"Card Stack"},"style":{"background":{"backgroundSize":"cover"},"dimensions":{"minHeight":"22rem"},"elements":{"link":{"color":{"text":"var:preset|color|base-2"}},"heading":{"color":{"text":"var:preset|color|base-2"}}},"spacing":{"blockGap":"14px"}},"textColor":"base-2","layout":{"type":"flex","orientation":"vertical","justifyContent":"left","verticalAlignment":"space-between","flexWrap":"nowrap"}} -->
+<div class="wp-block-group has-base-2-color has-text-color has-link-color" style="min-height:22rem"><!-- wp:group {"metadata":{"name":"Card Label"},"style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}},"spacing":{"padding":{"top":"6px","bottom":"6px","left":"12px","right":"12px"}},"typography":{"fontSize":"13px","lineHeight":"1"},"color":{"background":"#296b89"}},"textColor":"white","layout":{"type":"constrained"}} -->
+<div class="wp-block-group has-white-color has-text-color has-background has-link-color" style="background-color:#296b89;padding-top:6px;padding-right:12px;padding-bottom:6px;padding-left:12px;font-size:13px;line-height:1"><!-- wp:paragraph -->
+<p>Studio</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"metadata":{"name":"Card Content"},"layout":{"type":"constrained","justifyContent":"center"}} -->
+<div class="wp-block-group"><!-- wp:heading {"level":3,"style":{"layout":{"columnSpan":1,"rowSpan":1},"typography":{"lineHeight":"1.2","fontSize":"22px"}}} -->
+<h3 class="wp-block-heading" style="font-size:22px;line-height:1.2"><a href="#">Learn to Synchronize Your Midi</a></h3>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|20"}}},"fontSize":"normal"} -->
+<p class="has-normal-font-size" style="margin-top:var(--wp--preset--spacing--20)">With a wide array of VCOs, VCAs, and hybrid synthesis models.</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group --></div>
+<!-- /wp:group --></div></article>
+<!-- /wp:cover -->
+
+<!-- wp:cover {"url":"https://images.rawpixel.com/editor_1024/cHJpdmF0ZS9zdGF0aWMvaW1hZ2Uvd2Vic2l0ZS8yMDIyLTA0L2xyL3B4NzkwNzc2LWltYWdlLWt3dnYxcTB6LmpwZw.jpg","id":null,"dimRatio":60,"overlayColor":"black","isUserOverlayColor":true,"tagName":"article","metadata":{"name":"Card"},"className":"is-style-card\u002d\u002dinteractive","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}},"heading":{"color":{"text":"var:preset|color|white"}}}},"textColor":"white","layout":{"type":"constrained"}} -->
+<article class="wp-block-cover is-style-card--interactive has-white-color has-text-color has-link-color"><span aria-hidden="true" class="wp-block-cover__background has-black-background-color has-background-dim-60 has-background-dim"></span><img class="wp-block-cover__image-background" alt="" src="https://images.rawpixel.com/editor_1024/cHJpdmF0ZS9zdGF0aWMvaW1hZ2Uvd2Vic2l0ZS8yMDIyLTA0L2xyL3B4NzkwNzc2LWltYWdlLWt3dnYxcTB6LmpwZw.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:group {"metadata":{"name":"Card Stack"},"style":{"background":{"backgroundSize":"cover"},"dimensions":{"minHeight":"22rem"},"elements":{"link":{"color":{"text":"var:preset|color|base-2"}},"heading":{"color":{"text":"var:preset|color|base-2"}}},"spacing":{"blockGap":"14px"}},"textColor":"base-2","layout":{"type":"flex","orientation":"vertical","justifyContent":"left","verticalAlignment":"space-between","flexWrap":"nowrap"}} -->
+<div class="wp-block-group has-base-2-color has-text-color has-link-color" style="min-height:22rem"><!-- wp:group {"metadata":{"name":"Card Label"},"style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}},"spacing":{"padding":{"top":"6px","bottom":"6px","left":"12px","right":"12px"}},"typography":{"fontSize":"13px","lineHeight":"1"},"color":{"background":"#296b89"}},"textColor":"white","layout":{"type":"constrained"}} -->
+<div class="wp-block-group has-white-color has-text-color has-background has-link-color" style="background-color:#296b89;padding-top:6px;padding-right:12px;padding-bottom:6px;padding-left:12px;font-size:13px;line-height:1"><!-- wp:paragraph -->
+<p>Latest Sounds</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"metadata":{"name":"Card Content"},"layout":{"type":"constrained","justifyContent":"center"}} -->
+<div class="wp-block-group"><!-- wp:heading {"level":3,"style":{"layout":{"columnSpan":1,"rowSpan":1},"typography":{"lineHeight":"1.2","fontSize":"22px"}}} -->
+<h3 class="wp-block-heading" style="font-size:22px;line-height:1.2"><a href="#">Tales from the Engineers</a></h3>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|20"}}},"fontSize":"normal"} -->
+<p class="has-normal-font-size" style="margin-top:var(--wp--preset--spacing--20)">Step inside the studio and hear what happens behind the scenes.</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group --></div>
+<!-- /wp:group --></div></article>
+<!-- /wp:cover --></section>
+<!-- /wp:group -->',
+);