Add support for cover block

humanmade · Sep 2, 2024 · 94cd088 · 94cd088
1 parent 7d4f415
commit 94cd088
Show file tree

Hide file tree

Showing 13 changed files with 38 additions and 33 deletions.
diff --git a/build/editor.asset.php b/build/editor.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-components', 'wp-element', 'wp-hooks', 'wp-i18n'), 'version' => 'ec1f92331e23bb3e3019');
+<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-components', 'wp-element', 'wp-hooks', 'wp-i18n'), 'version' => 'be1b0e10cedb4cf08887');
diff --git a/build/editor.js b/build/editor.js
diff --git a/build/editor.js.map b/build/editor.js.map
diff --git a/build/lottie-rtl.css b/build/lottie-rtl.css
@@ -1,15 +1,15 @@
 /*!********************************************************************************************************************************************************************!*\
   !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/lottie.css ***!
   \********************************************************************************************************************************************************************/
-.wp-block-image[data-lottie] {
+[data-lottie] {
 	position: relative;
 }
 
-.wp-block-image.lottie-img-hidden img {
+[data-lottie].lottie-img-hidden img {
 	visibility: hidden;
 }
 
-.wp-block-image[data-lottie] canvas {
+[data-lottie] canvas {
 	position: absolute;
 	inset: 0 0 0 0;
 	width: 100%;

diff --git a/build/lottie.asset.php b/build/lottie.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => 'dd653a7ad1d91f405479');
+<?php return array('dependencies' => array(), 'version' => '05a3013820b1f18ac059');
diff --git a/build/lottie.css b/build/lottie.css
diff --git a/build/lottie.css.map b/build/lottie.css.map
diff --git a/build/lottie.js b/build/lottie.js
diff --git a/build/lottie.js.map b/build/lottie.js.map
diff --git a/lottie-lite.php b/lottie-lite.php
@@ -74,7 +74,7 @@
  * @param array $block The parsed block.
  * @return string The block content.
  */
-add_filter( 'render_block_core/image', function( string $block_content, array $block ) : string {
+add_filter( 'render_block', function( string $block_content, array $block ) : string {
 	if ( empty( $block['attrs']['lottie'] ) ) {
 		return $block_content;
 	}

diff --git a/src/editor.js b/src/editor.js
@@ -19,6 +19,8 @@ import LottieLogo from '../assets/lottie-logo.png';
 
 import './editor.css';
 
+const SUPPORTED_BLOCKS = [ 'core/image', 'core/cover' ];
+
 function useLottie( args = {} ) {
 	const dotLottie = useRef( null );
 	const ref = useCallback(
@@ -66,7 +68,7 @@ function LottieAnimationPanel( BlockEdit ) {
 	return ( props ) => {
 		const { attributes, name, setAttributes } = props;
 
-		if ( name !== 'core/image' ) {
+		if ( SUPPORTED_BLOCKS.indexOf( name ) < 0 ) {
 			return <BlockEdit { ...props } />;
 		}
 
@@ -88,11 +90,11 @@ function LottieAnimationPanel( BlockEdit ) {
 					>
 						<SelectControl
 							label={ __( 'Interaction', 'lottie-lite' ) }
-							value={ lottie?.trigger || 'none' }
+							value={ lottie?.trigger || '' }
 							options={ [
 								{
 									label: __( 'Autoplay', 'lottie-lite' ),
-									value: 'none',
+									value: '',
 								},
 								{
 									label: __( 'Hover', 'lottie-lite' ),
@@ -282,7 +284,7 @@ addFilter(
 );
 
 function addAttribute( settings ) {
-	if ( settings.name !== 'core/image' ) {
+	if ( SUPPORTED_BLOCKS.indexOf( settings.name ) < 0 ) {
 		return settings;
 	}
 
@@ -317,8 +319,8 @@ function addAttribute( settings ) {
 					},
 					trigger: {
 						type: 'string',
-						enum: [ 'none', 'click', 'hover' ],
-						default: 'none',
+						enum: [ '', 'click', 'hover' ],
+						default: '',
 					},
 					overlay: {
 						type: 'bool',

diff --git a/src/lottie.css b/src/lottie.css
@@ -1,12 +1,12 @@
-.wp-block-image[data-lottie] {
+[data-lottie] {
 	position: relative;
 }
 
-.wp-block-image.lottie-img-hidden img {
+[data-lottie].lottie-img-hidden img {
 	visibility: hidden;
 }
 
-.wp-block-image[data-lottie] canvas {
+[data-lottie] canvas {
 	position: absolute;
 	inset: 0 0 0 0;
 	width: 100%;

diff --git a/src/lottie.js b/src/lottie.js
@@ -13,7 +13,8 @@ document.querySelectorAll( '[data-lottie]' ).forEach( ( lottie ) => {
 	canvas.style.width =
 		img?.width || img?.getBoundingClientRect().width || '100%';
 	canvas.style.height =
-		img?.height || img?.getBoundingClientRect().height || '100%';
+		img?.height || img?.getBoundingClientRect().height || 'auto';
+	canvas.style.aspectRatio = `${ img.width } / ${ img.height }`;
 
 	// Append - ensure if a link is used the canvas is inside to pick up clickable area.
 	img.parentElement.appendChild( canvas );
@@ -28,7 +29,7 @@ document.querySelectorAll( '[data-lottie]' ).forEach( ( lottie ) => {
 
 	let playerConfig = {};
 
-	if ( config.trigger === 'none' ) {
+	if ( ! config.trigger ) {
 		playerConfig.autoplay = true;
 		playerConfig.loop = true;
 	}
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-components', 'wp-element', 'wp-hooks', 'wp-i18n'), 'version' => 'ec1f92331e23bb3e3019');
		<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-components', 'wp-element', 'wp-hooks', 'wp-i18n'), 'version' => 'be1b0e10cedb4cf08887');