Block validation: Expected token of type `StartTag` but saw EndTag..

Also error with other cover blocks though like:

lock validation: Block validation failed for core/cover (
Object
).

Content generated by save function:

<div class="wp-block-cover is-light">
<span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span>
<img class="wp-block-cover__image-background" alt="" src="https://cafejpcoen.test/wp-content/plugins/woocommerce/assets/images/pattern-placeholders/plant-white-leaf-flower-vase-green.jpg" style="object-position:54% 52%" data-object-fit="cover" data-object-position="54% 52%"/>
<div class="wp-block-cover__inner-container"></div>
<div class="wp-block-cover__play-button-overlay" style="position:absolute;z-index:10"><button class="wp-block-cover__play-button" aria-label="Play Video"></button>
</div></div>

Content retrieved from post body:

<div class="wp-block-cover is-light">
<img class="wp-block-cover__image-background" alt="Placeholder image used to represent a product being showcased in a hero section. 1 out of 2." src="https://cafejpcoen.test/wp-content/plugins/woocommerce/assets/images/pattern-placeholders/plant-white-leaf-flower-vase-green.jpg" style="object-position:54% 52%" data-object-fit="cover" data-object-position="54% 52%"/>
<div class="wp-block-cover__inner-container">	
</div></div>

So perhaps the filter still has issues.

• This reply was modified 1 month, 3 weeks ago by Rhand.

When I console log the children using this updated cover.filter.js:

// Import necessary functions from @wordpress/hooks
import { addFilter } from '@wordpress/hooks';
import { createHigherOrderComponent } from '@wordpress/compose';
import { InspectorControls } from '@wordpress/block-editor';
import { PanelBody, ToggleControl, TextControl } from '@wordpress/components';
import { Fragment } from '@wordpress/element';
import React from 'react'; // Ensure React is imported for JSX and cloneElement

/**
 * @see {@link https://developer.www.ads-software.com/block-editor/reference-guides/filters/block-filters/#blocks-registerblocktype}
 */
export const hook = 'blocks.registerBlockType';

/**
 * Filter handle
 */
export const name = 'sage/cover';

/**
 * Filter callback
 *
 * @param {Object} settings Block settings.
 * @param {string} name
 * @returns modified settings
 */
export function callback(settings, name) {
  if (name !== 'core/cover') return settings;

  return {
    ...settings,
    attributes: {
      ...settings.attributes,
      loopVideo: {
        type: 'boolean',
        default: false,
      },
      autoplayVideo: {
        type: 'boolean',
        default: false,
      },
      showPlayButton: {
        type: 'boolean',
        default: true,
      },
      coverImage: {
        type: 'string',
        default: '',
      },
    },
  };
}

/**
 * Additional cover block modifications
 */
export const editHook = 'editor.BlockEdit';
export const editCallback = createHigherOrderComponent((BlockEdit) => {
  return (props) => {
    const { attributes, setAttributes, name } = props;

    if (name !== 'core/cover') {
      return <BlockEdit {...props} />;
    }

    const { loopVideo, autoplayVideo, showPlayButton, coverImage } = attributes;

    return (
      <Fragment>
        <BlockEdit {...props} />
        <InspectorControls>
          <PanelBody title="Video Options" initialOpen={true}>
            <ToggleControl
              label="Loop Video"
              checked={loopVideo}
              onChange={(value) => setAttributes({ loopVideo: value })}
            />
            <ToggleControl
              label="Autoplay Video"
              checked={autoplayVideo}
              onChange={(value) => setAttributes({ autoplayVideo: value })}
            />
            <ToggleControl
              label="Show Play Button"
              checked={showPlayButton}
              onChange={(value) => setAttributes({ showPlayButton: value })}
            />
            <TextControl
              label="Cover Image URL"
              value={coverImage}
              onChange={(value) => setAttributes({ coverImage: value })}
              help="This image will be used as the cover image for the video."
            />
          </PanelBody>
        </InspectorControls>
      </Fragment>
    );
  };
}, 'withCoverControls');

/**
 * Save element modification for the cover block
 */
export const saveHook = 'blocks.getSaveElement';
export const saveCallback = (element, blockType, attributes) => {
  if (blockType.name !== 'core/cover') return element;

  const { loopVideo, autoplayVideo, showPlayButton, coverImage } = attributes;

  const children = Array.isArray(element.props.children) ? element.props.children : [element.props.children];
  console.log('Children:', children);
  const modifiedChildren = children.map((child) => {
    if (child && child.type === 'video') {
      return React.cloneElement(child, {
        loop: loopVideo,
        autoPlay: autoplayVideo,
        poster: coverImage || child.props.poster,
      });
    }
    return child;
  });

  return (
    <div {...element.props}>
      {modifiedChildren}
      {showPlayButton && (
        <div className="wp-block-cover__play-button-overlay" style={{ position: 'absolute', zIndex: 10 }}>
          <button className="wp-block-cover__play-button" aria-label="Play Video" />
        </div>
      )}
    </div>
  );
  console.log('Result:', result);

  return result;
};

// Register the filters
addFilter(hook, name, callback); // Adds custom attributes to the block
addFilter(editHook, name, editCallback); // Adds the inspector controls in the editor
addFilter(saveHook, name, saveCallback); // Modifies the save element

I get

Children:
Array (4)
0 {$$typeof: Symbol(react.element), type: "span", key: null, ref: null, props: {aria-hidden: "true", className: "wp-block-cover__background has-black-background-color has-background-dim-0 has-background-dim", style: {backgroundColor: undefined, background: undefined}}, …}
1 {$$typeof: Symbol(react.element), type: "img", key: null, ref: null, props: Object, …}
2 false
3 {$$typeof: Symbol(react.element), type: "div", key: null, ref: null, props: Object, …}

Array Prototype

as well as

Children:
Array (4)
0 undefined
1 {$$typeof: Symbol(react.element), type: "img", key: null, ref: null, props: Object, …}
2 false
3 {$$typeof: Symbol(react.element), type: "div", key: null, ref: null, props: Object, …}

Array Prototype

so something may be off. But not sure yet what this means. Need to filter out the false and undefined values I guess.

Moved code to https://github.com/wpvillain/cover-filter/blob/main/src/index.js and working on it there, but going to take some time as I cannot seem to get right of mentioned errors. Working with rest operator https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters should be okay but still new to React and not a senior JS developer either so perhaps the looping over elements or something else is causing the discrepancy.

Checking https://github.com/dmtrmrv/intro-to-block-filters/blob/master/src/filters/button-size.js as example . Perhaps I need to just:

• function addAttributes() add attributes to settings > attributes – doing more or less
• const addInspectorControl add editor controls using BlockEdit hook – doing more and also with createHigherOrderComponent((BlockEdit)
• const addVideoOptionsEditor (own name instead of addSizeClassEditor) add these new settings to cover block in the editor using BlockListBlock perhaps. Not doing this it seems, but I do not need to add options to toolbar. I can load in editor sidebar as I do.
• function addVideoOptionsFrontEnd (instead of addSizeClassFrontEnd)And then save matters for frontend display using blocks.getSaveContent.extraProps . Doing saving , but that was third step for me.. and not fourth. Reading https://developer.www.ads-software.com/block-editor/reference-guides/filters/block-filters/#blocks-getsavecontent-extraprops I do not need this hook though. Also not sure why we need React.cloneElement ourselves.

• This reply was modified 1 month, 3 weeks ago by Rhand.
• This reply was modified 1 month, 3 weeks ago by Rhand.
• This reply was modified 1 month, 3 weeks ago by Rhand.
• This reply was modified 1 month, 3 weeks ago by Rhand.

Updated matters to use cloneElement from WordPress now:

// Import necessary functions and components from WordPress packages
import { addFilter } from '@wordpress/hooks'; // Allows adding filters to modify block behavior
import { createHigherOrderComponent } from '@wordpress/compose'; // Allows creating higher-order components (HOCs)
import { InspectorControls } from '@wordpress/block-editor'; // Provides control UI for block editing
import { PanelBody, ToggleControl, TextControl } from '@wordpress/components'; // UI components for block settings
import { Fragment } from '@wordpress/element'; // A wrapper to group multiple elements without adding extra nodes to the DOM
import { cloneElement } from '@wordpress/element'; // Use cloneElement from WordPress

/**
 * @see {@link https://developer.www.ads-software.com/block-editor/reference-guides/filters/block-filters/#blocks-registerblocktype}
 * Filter hook used to modify block settings during block registration.
 */
export const registerHook = 'blocks.registerBlockType';

/**
 * Name of the filter, used as a unique identifier.
 */
export const name = 'cafejp/cover'

/**
 * Filter addAttributes function to modify the block's settings.
 *
 * @param {Object} settings Block settings.
 * @param {string} name Block name.
 * @returns Modified settings with new attributes added.
 */
export function addAttributes(settings, name) {
  if (name !== 'core/cover') return settings;

  return {
    ...settings, // Retain all existing settings https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
    attributes: {
      ...settings.attributes, // Retain all existing attributes
      loopVideo: {
        type: 'boolean',
        default: false,
      },
      autoplayVideo: {
        type: 'boolean',
        default: false,
      },
      showPlayButton: {
        type: 'boolean',
        default: true,
      },
      coverImage: {
        type: 'string',
        default: '',
      },
    },
  };
}

/**
 * Hook used to modify the block's edit component.
 */
export const blockEditHook = 'editor.BlockEdit';

/**
 * Higher-order component (HOC) to modify the block's edit function.
 */
export const editCallback = createHigherOrderComponent((BlockEdit) => {
  return (props) => {
    const { attributes, setAttributes, name } = props;

    if (name !== 'core/cover') {
      return <BlockEdit {...props} />;
    }

    const { loopVideo, autoplayVideo, showPlayButton, coverImage } = attributes;

// Render the modified block editor interface with additional controls
    return (
      <Fragment>
        {/* Render the original BlockEdit component */}
        <BlockEdit {...props} />
        {/* Add custom controls to the block's inspector panel */}
        <InspectorControls>
          <PanelBody title="Video Options" initialOpen={true}>
            {/* Toggle control for looping the video */}
            <ToggleControl
              label="Loop Video"
              checked={loopVideo}
              onChange={(value) => setAttributes({ loopVideo: value })}
            />
            {/* Toggle control for autoplaying the video */}
            <ToggleControl
              label="Autoplay Video"
              checked={autoplayVideo}
              onChange={(value) => setAttributes({ autoplayVideo: value })}
            />
            {/* Toggle control for showing the play button */}
            <ToggleControl
              label="Show Play Button"
              checked={showPlayButton}
              onChange={(value) => setAttributes({ showPlayButton: value })}
            />
            {/* Text control for setting the cover image URL */}
            <TextControl
              label="Cover Image URL"
              value={coverImage}
              onChange={(value) => setAttributes({ coverImage: value })}
              help="This image will be used as the cover image for the video."
            />
          </PanelBody>
        </InspectorControls>
      </Fragment>
    );
  };
}, 'withCoverControls');

/**
 * Hook used to modify the block's save element.
 */
export const saveHook = 'blocks.getSaveElement';

/**
 * Callback function to modify the save output of the block.
 *
 * @param {Object} element The element to be saved.
 * @param {Object} blockType The block type object.
 * @param {Object} attributes The block attributes.
 * @returns Modified element with custom attributes applied.
 */
export const saveCallback = (element, blockType, attributes) => {
  if (blockType.name !== 'core/cover') return element;

  const { loopVideo, autoplayVideo, showPlayButton, coverImage } = attributes;
  
  // Ensure children elements are processed correctly, filtering out null/undefined elements
  const children = Array.isArray(element.props.children) ? element.props.children.filter(Boolean) : [];
  
  // Map over the children to modify any video elements with the specified attributes
  const modifiedChildren = children.map((child) => {
	//  checking if a child element of the block is a <video> element
    if (child && child.type === 'video') {
		// Clone the video elements and apply the new attributes
    	return cloneElement(child, {
        loop: loopVideo,
        autoPlay: autoplayVideo,
        poster: coverImage || child.props.poster,
      });
    }
    return child;
  });

  return (
    <div {...element.props}>
      {modifiedChildren}
      {showPlayButton && (
        <div className="wp-block-cover__play-button-overlay" style={{ position: 'absolute', zIndex: 10 }}>
          <button className="wp-block-cover__play-button" aria-label="Play Video" />
        </div>
      )}
    </div>
  );
};

// Register the filters to apply the modifications at the appropriate stages
addFilter(registerHook, name, addAttributes);
addFilter(blockEditHook, name, editCallback);
addFilter(saveHook, name, saveCallback);

But the issue remains:

Block validation: Expected token of type StartTag ({type: 'StartTag', tagName: 'div', attributes: Array(2), selfClosing: false}), instead saw EndTag ({type: 'EndTag', tagName: 'div'}).
(anonymous) @ blocks.min.js?ver=0d232d232463200f5cfd:19
(anonymous) @ blocks.min.js?ver=0d232d232463200f5cfd:19
ro @ blocks.min.js?ver=0d232d232463200f5cfd:19
(anonymous) @ blocks.min.js?ver=0d232d232463200f5cfd:19
no @ blocks.min.js?ver=0d232d232463200f5cfd:19
(anonymous) @ block-editor.min.js?ver=f989eae66982c6c90d6e:21
s @ data.min.js?ver=7c62e39de0308c73d50c:2
r @ data.min.js?ver=7c62e39de0308c73d50c:2
r @ data.min.js?ver=7c62e39de0308c73d50c:2
....
(anonymous) @ data.min.js?ver=7c62e39de0308c73d50c:2
p @ data.min.js?ver=7c62e39de0308c73d50c:9
(anonymous) @ data.min.js?ver=7c62e39de0308c73d50c:9
Qe @ data.min.js?ver=7c62e39de0308c73d50c:9
Ye @ data.min.js?ver=7c62e39de0308c73d50c:9
Nt @ edit-post.min.js?ver=bf7b57a061aad9bf9020:2
hu @ react-dom.min.js?ver=18.3.1:2
xi @ react-dom.min.js?ver=18.3.1:2
bs @ react-dom.min.js?ver=18.3.1:2
vs @ react-dom.min.js?ver=18.3.1:2
gs @ react-dom.min.js?ver=18.3.1:2
ls @ react-dom.min.js?ver=18.3.1:2
S @ react-dom.min.js?ver=18.3.1:2
T @ react-dom.min.js?ver=18.3.1:2Understand this warning
blocks.min.js?ver=0d232d232463200f5cfd:19 Block validation: Block validation failed for core/cover ({name: 'core/cover', icon: {…}, keywords: Array(0), attributes: {…}, providesContext: {…},?…}).

Content generated by save function:

<div class="wp-block-cover alignfull cafejp-drinks-menu-pattern"><span aria-hidden="true" class="wp-block-cover__background has-black-background-color has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-293" alt="" src="https://s.w.org/images/core/5.3/Windbuchencom.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"></div><div class="wp-block-cover__play-button-overlay" style="position:absolute;z-index:10"><button class="wp-block-cover__play-button" aria-label="Play Video"></button></div></div>

Content retrieved from post body:

<div class="wp-block-cover alignfull cafejp-drinks-menu-pattern"><span aria-hidden="true" class="wp-block-cover__background has-black-background-color has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-293" alt="" src="https://s.w.org/images/core/5.3/Windbuchencom.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"></div></div>

so need to do something better with returned data to make post body and content generated by save function match.

• This reply was modified 1 month, 3 weeks ago by Rhand.

Doing a check for play button:

// Import necessary functions and components from WordPress packages
import { addFilter } from '@wordpress/hooks'; // Allows adding filters to modify block behavior
import { createHigherOrderComponent } from '@wordpress/compose'; // Allows creating higher-order components (HOCs)
import { InspectorControls } from '@wordpress/block-editor'; // Provides control UI for block editing
import { PanelBody, ToggleControl, TextControl } from '@wordpress/components'; // UI components for block settings
import { Fragment } from '@wordpress/element'; // A wrapper to group multiple elements without adding extra nodes to the DOM
import { cloneElement } from '@wordpress/element'; // Use cloneElement from WordPress

/**
 * @see {@link https://developer.www.ads-software.com/block-editor/reference-guides/filters/block-filters/#blocks-registerblocktype}
 * Filter hook used to modify block settings during block registration.
 */
export const registerHook = 'blocks.registerBlockType';

/**
 * Name of the filter, used as a unique identifier.
 */
export const name = 'cafejp/cover'

/**
 * Filter addAttributes function to modify the block's settings.
 *
 * @param {Object} settings Block settings.
 * @param {string} name Block name.
 * @returns Modified settings with new attributes added.
 */
export function addAttributes(settings, name) {
  if (name !== 'core/cover') return settings;

  return {
    ...settings, // Retain all existing settings https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
    attributes: {
      ...settings.attributes, // Retain all existing attributes
      loopVideo: {
        type: 'boolean',
        default: false,
      },
      autoplayVideo: {
        type: 'boolean',
        default: false,
      },
      showPlayButton: {
        type: 'boolean',
        default: true,
      },
      coverImage: {
        type: 'string',
        default: '',
      },
    },
  };
}

/**
 * Hook used to modify the block's edit component.
 */
export const blockEditHook = 'editor.BlockEdit';

/**
 * Higher-order component (HOC) to modify the block's edit function.
 */
export const editCallback = createHigherOrderComponent((BlockEdit) => {
  return (props) => {
    const { attributes, setAttributes, name } = props;

    if (name !== 'core/cover') {
      return <BlockEdit {...props} />;
    }

    const { loopVideo, autoplayVideo, showPlayButton, coverImage } = attributes;

// Render the modified block editor interface with additional controls
    return (
      <Fragment>
        {/* Render the original BlockEdit component */}
        <BlockEdit {...props} />
        {/* Add custom controls to the block's inspector panel */}
        <InspectorControls>
          <PanelBody title="Video Options" initialOpen={true}>
            {/* Toggle control for looping the video */}
            <ToggleControl
              label="Loop Video"
              checked={loopVideo}
              onChange={(value) => setAttributes({ loopVideo: value })}
            />
            {/* Toggle control for autoplaying the video */}
            <ToggleControl
              label="Autoplay Video"
              checked={autoplayVideo}
              onChange={(value) => setAttributes({ autoplayVideo: value })}
            />
            {/* Toggle control for showing the play button */}
            <ToggleControl
              label="Show Play Button"
              checked={showPlayButton}
              onChange={(value) => setAttributes({ showPlayButton: value })}
            />
            {/* Text control for setting the cover image URL */}
            <TextControl
              label="Cover Image URL"
              value={coverImage}
              onChange={(value) => setAttributes({ coverImage: value })}
              help="This image will be used as the cover image for the video."
            />
          </PanelBody>
        </InspectorControls>
      </Fragment>
    );
  };
}, 'withCoverControls');

/**
 * Hook used to modify the block's save element.
 */
export const saveHook = 'blocks.getSaveElement';

/**
 * Callback function to modify the save output of the block.
 *
 * @param {Object} element The element to be saved.
 * @param {Object} blockType The block type object.
 * @param {Object} attributes The block attributes.
 * @returns Modified element with custom attributes applied.
 */
export const saveCallback = (element, blockType, attributes) => {
	if (blockType.name !== 'core/cover') return element;
  
	const { loopVideo, autoplayVideo, showPlayButton, coverImage } = attributes;
	
	// Ensure children elements are processed correctly, filtering out null/undefined elements
	const children = Array.isArray(element.props.children) ? element.props.children.filter(Boolean) : [];
	
	// Map over the children to modify any video elements with the specified attributes
	const modifiedChildren = children.map((child) => {
	  if (child && child.type === 'video') {
		return cloneElement(child, {
		  loop: loopVideo,
		  autoPlay: autoplayVideo,
		  poster: coverImage || child.props.poster,
		});
	  }
	  return child;
	});
  
	// Check if the play button should be added
	const playButton = showPlayButton ? (
	  <div className="wp-block-cover__play-button-overlay" style={{ position: 'absolute', zIndex: 10 }}>
		<button className="wp-block-cover__play-button" aria-label="Play Video"></button>
	  </div>
	) : null;
  
	return (
	  <div {...element.props}>
		{modifiedChildren}
		{playButton}
	  </div>
	);
  };  

// Register the filters to apply the modifications at the appropriate stages
addFilter(registerHook, name, addAttributes);
addFilter(blockEditHook, name, editCallback);
addFilter(saveHook, name, saveCallback);

but still same errors like

lock validation: Expected token of type StartTag ({type: 'StartTag', tagName: 'div', attributes: Array(2), selfClosing: false}), instead saw EndTag ({type: 'EndTag', tagName: 'div'}).
(anonymous) @ blocks.min.js?ver=0d232d232463200f5cfd:19
(anonymous) @ blocks.min.js?ver=0d232d232463200f5cfd:19
ro @ blocks.min.js?ver=0d232d232463200f5cfd:19
(anonymous) @ blocks.min.js?ver=0d232d232463200f5cfd:19
ro @ blocks.min.js?ver=0d232d232463200f5cfd:19
....
bs @ react-dom.min.js?ver=18.3.1:2
vs @ react-dom.min.js?ver=18.3.1:2
gs @ react-dom.min.js?ver=18.3.1:2
is @ react-dom.min.js?ver=18.3.1:2
Hl @ react-dom.min.js?ver=18.3.1:2
(anonymous) @ react-dom.min.js?ver=18.3.1:2Understand this warning
blocks.min.js?ver=0d232d232463200f5cfd:19 Block validation: Block validation failed for core/cover ({name: 'core/cover', icon: {…}, keywords: Array(0), attributes: {…}, providesContext: {…},?…}).

Content generated by save function:

<div class="wp-block-cover is-light" style="padding-top:80px;padding-right:80px;padding-bottom:80px;padding-left:80px;min-height:430px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-20 has-background-dim" style="background-color:#9aacbd"></span><img class="wp-block-cover__image-background wp-image-159" alt="" src="https://wooblockpatterns.wpcomstaging.com/wp-content/uploads/2024/06/beach-landscape-sea-coast-nature-person.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"></div><div class="wp-block-cover__play-button-overlay" style="position:absolute;z-index:10"><button class="wp-block-cover__play-button" aria-label="Play Video"></button></div></div>

Content retrieved from post body:

<div class="wp-block-cover is-light" style="padding-top:80px;padding-right:80px;padding-bottom:80px;padding-left:80px;min-height:430px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-20 has-background-dim" style="background-color:#9aacbd"></span><img class="wp-block-cover__image-background wp-image-159" alt="" src="https://wooblockpatterns.wpcomstaging.com/wp-content/uploads/2024/06/beach-landscape-sea-coast-nature-person.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"></div></div>

I am testing new code with play button turned off by default and loaded conditionally . Seems to be working better

// Import necessary functions and components from WordPress packages
import { addFilter } from '@wordpress/hooks'; // Allows adding filters to modify block behavior
import { createHigherOrderComponent } from '@wordpress/compose'; // Allows creating higher-order components (HOCs)
import { InspectorControls } from '@wordpress/block-editor'; // Provides control UI for block editing
import { PanelBody, ToggleControl, TextControl } from '@wordpress/components'; // UI components for block settings
import { Fragment } from '@wordpress/element'; // A wrapper to group multiple elements without adding extra nodes to the DOM
import { cloneElement } from '@wordpress/element'; // Use cloneElement from WordPress

/**
 * @see {@link https://developer.www.ads-software.com/block-editor/reference-guides/filters/block-filters/#blocks-registerblocktype}
 * Filter hook used to modify block settings during block registration.
 */
export const registerHook = 'blocks.registerBlockType';

/**
 * Name of the filter, used as a unique identifier.
 */
export const name = 'cafejp/cover';

/**
 * Filter addAttributes function to modify the block's settings.
 *
 * @param {Object} settings Block settings.
 * @param {string} name Block name.
 * @returns Modified settings with new attributes added.
 */
export function addAttributes(settings, name) {
  if (name !== 'core/cover') return settings;

  return {
    ...settings, // Retain all existing settings https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
    attributes: {
      ...settings.attributes, // Retain all existing attributes
      loopVideo: {
        type: 'boolean',
        default: false,
      },
      autoplayVideo: {
        type: 'boolean',
        default: false,
      },
      showPlayButton: {
        type: 'boolean',
        default: false,
      },
      coverImage: {
        type: 'string',
        default: '',
      },
    },
  };
}

/**
 * Hook used to modify the block's edit component.
 */
export const blockEditHook = 'editor.BlockEdit';

/**
 * Higher-order component (HOC) to modify the block's edit function.
 */
export const editCallback = createHigherOrderComponent((BlockEdit) => {
  return (props) => {
    const { attributes, setAttributes, name } = props;

    if (name !== 'core/cover') {
      return <BlockEdit {...props} />;
    }

    const { loopVideo, autoplayVideo, showPlayButton, coverImage } = attributes;

    // Render the modified block editor interface with additional controls
    return (
      <Fragment>
        {/* Render the original BlockEdit component */}
        <BlockEdit {...props} />
        {/* Add custom controls to the block's inspector panel */}
        <InspectorControls>
          <PanelBody title="Video Options" initialOpen={true}>
            {/* Toggle control for looping the video */}
            <ToggleControl
              label="Loop Video"
              checked={loopVideo}
              onChange={(value) => setAttributes({ loopVideo: value })}
            />
            {/* Toggle control for autoplaying the video */}
            <ToggleControl
              label="Autoplay Video"
              checked={autoplayVideo}
              onChange={(value) => setAttributes({ autoplayVideo: value })}
            />
            {/* Toggle control for showing the play button */}
            <ToggleControl
              label="Show Play Button"
              checked={showPlayButton}
              onChange={(value) => setAttributes({ showPlayButton: value })}
            />
            {/* Text control for setting the cover image URL */}
            <TextControl
              label="Cover Image URL"
              value={coverImage}
              onChange={(value) => setAttributes({ coverImage: value })}
              help="This image will be used as the cover image for the video."
            />
          </PanelBody>
        </InspectorControls>
      </Fragment>
    );
  };
}, 'withCoverControls');

/**
 * Hook used to modify the block's save element.
 */
export const saveHook = 'blocks.getSaveElement';

/**
 * Callback function to modify the save output of the block.
 *
 * @param {Object} element The element to be saved.
 * @param {Object} blockType The block type object.
 * @param {Object} attributes The block attributes.
 * @returns Modified element with custom attributes applied.
 */
export const saveCallback = (element, blockType, attributes) => {
  if (blockType.name !== 'core/cover') return element;

  const { loopVideo, autoplayVideo, showPlayButton, coverImage } = attributes;

  // Ensure children elements are processed correctly, filtering out null/undefined elements
  const children = Array.isArray(element.props.children) ? element.props.children.filter(Boolean) : [];

  // Map over the children to modify any video elements with the specified attributes
  const modifiedChildren = children.map((child) => {
    if (child && child.type === 'video') {
      return cloneElement(child, {
        loop: loopVideo,
        autoPlay: autoplayVideo,
        poster: coverImage || child.props.poster,
      });
    }
    return child;
  });

  // Check if the play button should be added
  let playButton = null;
  if (showPlayButton) {
    playButton = (
      <div className="wp-block-cover__play-button-overlay" style={{ position: 'absolute', zIndex: 10 }}>
        <button className="wp-block-cover__play-button" aria-label="Play Video"></button>
      </div>
    );
  }

  return (
    <div {...element.props}>
      {modifiedChildren}
      {playButton}
    </div>
  );
};

// Register the filters to apply the modifications at the appropriate stages
addFilter(registerHook, name, addAttributes);
addFilter(blockEditHook, name, editCallback);
addFilter(saveHook, name, saveCallback);

I only do get this error occasionally on post load and that points to ACF oddly enough.

jQuery.Deferred exception: Cannot read properties of undefined (reading 'autop') TypeError: Cannot read properties of undefined (reading 'autop')
    at acf.Model.onReady (https://cafejpcoen.test/wp-content/plugins/advanced-custom-fields-pro/assets/build/js/acf-input.min.js?ver=6.3.5:1:110927)
    at o (https://cafejpcoen.test/wp-content/plugins/advanced-custom-fields-pro/assets/build/js/acf.min.js?ver=6.3.5:1:1406)
    at Object.doAction (https://cafejpcoen.test/wp-content/plugins/advanced-custom-fields-pro/assets/build/js/acf.min.js?ver=6.3.5:1:576)
    at n.doAction (https://cafejpcoen.test/wp-content/plugins/advanced-custom-fields-pro/assets/build/js/acf.min.js?ver=6.3.5:1:19053)
    at HTMLDocument.<anonymous> (https://cafejpcoen.test/wp-content/plugins/advanced-custom-fields-pro/assets/build/js/acf.min.js?ver=6.3.5:1:28605)
    at e (https://cafejpcoen.test/wp-admin/load-scripts.php?c=0&load%5Bchunk_0%5D=wp-hooks,jquery-core,jquery-migrate,utils&ver=6.6.1:4:27028)
    at t (https://cafejpcoen.test/wp-admin/load-scripts.php?c=0&load%5Bchunk_0%5D=wp-hooks,jquery-core,jquery-migrate,utils&ver=6.6.1:4:27330) undefined

• This reply was modified 1 month, 3 weeks ago by Rhand.
• This reply was modified 1 month, 3 weeks ago by Rhand.

You seem to have figured out a lot of things yourself. Regarding your last question, it would be good if you contacted ACF: https://www.ads-software.com/support/plugin/advanced-custom-fields/

I will do that. Will close this thread for now.