fix (video popup): change button tag with div tag (#3121)

* change <button> to <div>, add deprecation * remove comment * Update src/block/video-popup/deprecated.js [skip ci] * Update src/block/video-popup/deprecated.js * backward compatibility --------- Co-authored-by: Benjamin Intal <[email protected]> Co-authored-by: [email protected] <>
gambitph · Apr 12, 2024 · 651fa2a · 651fa2a
1 parent f8e6bf7
commit 651fa2a
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 4 deletions.
diff --git a/src/block/video-popup/deprecated.js b/src/block/video-popup/deprecated.js
@@ -2,12 +2,36 @@ import { Save } from './save'
 import { attributes } from './schema'
 
 import { withVersion } from '~stackable/higher-order'
+import { semverCompare } from '~stackable/util'
+import { i18n } from 'stackable'
 import {
 	deprecateBlockBackgroundColorOpacity, deprecateContainerBackgroundColorOpacity,
 	deprecateBlockShadowColor, deprecateContainerShadowColor,
 } from '~stackable/block-components'
 
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks } from '@wordpress/block-editor'
+import { addFilter } from '@wordpress/hooks'
+import { __ } from '@wordpress/i18n'
+
+addFilter( 'stackable.video-popup.save.div.content', 'stackable/3.12.14', ( output, props, contentClassNames ) => {
+	if ( semverCompare( props.version, '<', '3.12.14' ) ) {
+		return (
+			<button className={ contentClassNames } aria-label={ props.attributes.ariaLabel || __( 'Play Video', i18n ) }>
+				<InnerBlocks.Content />
+			</button>
+		)
+	}
+	return output
+} )
+
 const deprecated = [
+	{
+		attributes: attributes( '3.12.14' ),
+		save: withVersion( '3.12.14' )( Save ),
+	},
 	{
 		// Support the new shadow color.
 		attributes: attributes( '3.12.11' ),

diff --git a/src/block/video-popup/frontend-video-popup.js b/src/block/video-popup/frontend-video-popup.js
@@ -107,7 +107,8 @@ class StackableVideoPopup {
 			}
 		}
 		els.forEach( el => {
-			el.querySelector( 'button' ).addEventListener( 'click', ev => {
+			// We're now using divs, but keep the `button` selector for backward compatibility.
+			el.querySelector( 'div[role="button"], button' ).addEventListener( 'click', ev => {
 				ev.preventDefault()
 				openVideo( el )
 			} )

diff --git a/src/block/video-popup/save.js b/src/block/video-popup/save.js
@@ -22,6 +22,7 @@ import {
  */
 import { InnerBlocks } from '@wordpress/block-editor'
 import { compose } from '@wordpress/compose'
+import { applyFilters } from '@wordpress/hooks'
 import { __ } from '@wordpress/i18n'
 
 export const Save = props => {
@@ -60,9 +61,17 @@ export const Save = props => {
 		>
 			<IconLabelStyles.Content version={ props.version } attributes={ attributes } />
 			<CustomCSS.Content attributes={ attributes } />
-			<button className={ contentClassNames } aria-label={ attributes.ariaLabel || __( 'Play Video', i18n ) }>
-				<InnerBlocks.Content />
-			</button>
+			{ applyFilters( 'stackable.video-popup.save.div.content', (
+				<div
+					className={ contentClassNames }
+					aria-label={ attributes.ariaLabel || __( 'Play Video', i18n ) }
+					tabIndex="0"
+					role="button"
+				>
+					<InnerBlocks.Content />
+				</div>
+			), props, contentClassNames ) }
+
 		</BlockDiv.Content>
 	)
 }