Próbuję utworzyć filtr bloku core/cover, abym mógł dodać więcej opcji do filmów, takich jak pętla, przycisk odtwarzania, zdjęcie w tle, automatyczne odtwarzanie. Ale mam problem z wyjściem html. Obecny kod wygląda tak

// 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 
 * 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 
    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 ;
    }

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

// Render the modified block editor interface with additional controls
    return (
      
        {/* Render the original BlockEdit component */}
        
        {/* Add custom controls to the block's inspector panel */}
        
          
            {/* Toggle control for looping the video */}
             setAttributes({ loopVideo: value })}
            />
            {/* Toggle control for autoplaying the video */}
             setAttributes({ autoplayVideo: value })}
            />
            {/* Toggle control for showing the play button */}
             setAttributes({ showPlayButton: value })}
            />
            {/* Text control for setting the cover image URL */}
             setAttributes({ coverImage: value })}
              help="This image will be used as the cover image for the video."
            />
          
        
      
    );
  };
}, '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 ? (
      
    ) : null;
  
    return (
      

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

Ja jednak ciągle otrzymuję błędy takie jak

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:



Content retrieved from post body:

Dodawanie kodu do @wordpress/create-block pakiet wtyczek i mam kod na i mam także nieodpowiedziany bilet na

Czy ktoś może mi powiedzieć jak mogę to zrobić? Content generated by save function równy post body treść? Wiem, że problem stanowi przycisk odtwarzania wideo, ale jak mogę go wyświetlić?