fixed video block with icon only displaying poster image in editor

nk-crew · Feb 23, 2024 · 722b32d · 722b32d
1 parent b8bb7f3
commit 722b32d
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 12 deletions.
diff --git a/gutenberg/blocks/video/edit.js b/gutenberg/blocks/video/edit.js
@@ -1,5 +1,3 @@
-import classnames from 'classnames/dedupe';
-
 import { useBlockProps } from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
 import { applyFilters } from '@wordpress/hooks';
@@ -48,8 +46,6 @@ function getVideoPoster(url, cb) {
 export default function BlockEdit(props) {
 	const { attributes, setAttributes, isSelected, clientId } = props;
 
-	let { className = '' } = props;
-
 	const {
 		type,
 		video,
@@ -65,6 +61,8 @@ export default function BlockEdit(props) {
 		posterHeight,
 
 		clickAction,
+
+		className,
 	} = attributes;
 
 	// Mount and update.
@@ -112,11 +110,12 @@ export default function BlockEdit(props) {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [className]);
 
-	className = classnames('ghostkit-video', className);
-	className = applyFilters('ghostkit.editor.className', className, props);
-
 	const blockProps = useBlockProps({
-		className,
+		className: applyFilters(
+			'ghostkit.editor.className',
+			'ghostkit-video',
+			props
+		),
 		'data-video-aspect-ratio': videoAspectRatio,
 	});
 
@@ -125,13 +124,11 @@ export default function BlockEdit(props) {
 			<BackgroundColor
 				attributes={attributes}
 				setAttributes={setAttributes}
-				className={className}
 				clientId={clientId}
 			/>
 			<BlockInspectorControls
 				attributes={attributes}
 				setAttributes={setAttributes}
-				className={className}
 				isSelected={isSelected}
 			/>
 

diff --git a/gutenberg/blocks/video/edit/background-color.js b/gutenberg/blocks/video/edit/background-color.js
@@ -8,7 +8,7 @@ import { __ } from '@wordpress/i18n';
 import { hasClass } from '../../../utils/classes-replacer';
 
 export default function BackgroundColor(props) {
-	const { attributes, setAttributes, className, clientId } = props;
+	const { attributes, setAttributes, clientId } = props;
 	const {
 		type,
 		clickAction,
@@ -21,6 +21,8 @@ export default function BackgroundColor(props) {
 
 		fullscreenBackgroundColor,
 		fullscreenBackgroundGradient,
+
+		className,
 	} = attributes;
 
 	const colorGradientSettings = useMultipleOriginColorsAndGradients();

diff --git a/gutenberg/blocks/video/edit/inspector-controls.js b/gutenberg/blocks/video/edit/inspector-controls.js
@@ -34,7 +34,7 @@ import {
 const DEFAULT_SIZE_SLUG = 'full';
 
 export default function BlockInspectorControls(props) {
-	const { attributes, setAttributes, className, isSelected } = props;
+	const { attributes, setAttributes, isSelected } = props;
 
 	const {
 		type,
@@ -62,6 +62,8 @@ export default function BlockInspectorControls(props) {
 		clickAction,
 		fullscreenBackgroundColor,
 		fullscreenActionCloseIcon,
+
+		className,
 	} = attributes;
 
 	const { editorSettings, posterImage } = useSelect((select) => {