将 Inspector SelectControl 保存到 Gutenberg

问题描述

我对 React 和 Gutenberg 块非常陌生。昨天我花了三个小时，不幸的是我仍然找不到错误。我想对 Gutenberg 块 core/group 和 core/paragraph 实施 Animate.css。但是这些类没有被保存。我在问题 Saving SelectControl option 中实现了 withState。控制台中没有错误，老实说我不知道​​如何解决这个问题。

/**
 * External Dependencies
 */
import classnames from 'classnames';
import { withState } from '@wordpress/compose';


/**
 * wordpress Dependencies
 */
const { __ } = wp.i18n;
const { addFilter } = wp.hooks;
const { Fragment }  = wp.element;
const { InspectorAdvancedControls } = wp.editor;
const { createHigherOrderComponent } = wp.compose;
const { SelectControl } = wp.components;


const AnimationTimingControl = withState({
    // this is your state,in this case display-2 would be the default
    animateOnScreen: 'noAnimation',})(({ animateOnScreen,setState }) => (
    <SelectControl
        label="Animation Timing"
        value={animateOnScreen}
        options={[
            { label: 'No Animation',value: 'noAnimation' },{ label: 'Animation after Delay',value: 'animationAfterDelay' },{ label: 'Animation on scroll',value: 'animationOnScroll' },{ label: 'Animation in Viewport',value: 'animationInViewport' },]}
        onChange={(animateOnScreen) => { setState({ animateOnScreen }) }}
    />
));

//restrict to specific block names
const allowedBlocks = [ 'core/paragraph','core/group' ];

/**
 * Add custom attribute for mobile visibility.
 *
 * @param {Object} settings Settings for the block.
 *
 * @return {Object} settings Modified settings.
 */
function addAttributes( settings ) {
    
    //check if object exists for old Gutenberg version compatibility
    //add allowedBlocks restriction
    if( typeof settings.attributes !== 'undefined' && allowedBlocks.includes( settings.name ) ){
    
        settings.attributes = Object.assign( settings.attributes,{
                animateOnScreen: {
                type: 'string',}
        });
    
    }

    return settings;
}

/**
 * Add mobile visibility controls on Advanced Block Panel.
 *
 * @param {function} BlockEdit Block edit component.
 *
 * @return {function} BlockEdit Modified block edit component.
 */
const withAdvancedControls = createHigherOrderComponent( ( BlockEdit ) => {
    return ( props ) => {

        const {
            name,attributes,setState,isSelected,} = props;

        const {
            animateOnScreen
        } = attributes;
        
        
        return (
            <Fragment>
                <BlockEdit {...props} />
                { isSelected && allowedBlocks.includes( name ) &&
                    <InspectorAdvancedControls>
                        
                    <AnimationTimingControl />
                    
                    </InspectorAdvancedControls>                    
                }

            </Fragment>
        );
    };
},'withAdvancedControls');

/**
 * Add custom element class in save element.
 *
 * @param {Object} extraProps     Block element.
 * @param {Object} blockType      Blocks object.
 * @param {Object} attributes     Blocks attributes.
 *
 * @return {Object} extraProps Modified block element.
 */
function applyExtraClass( extraProps,blockType,attributes ) {

    const { animateOnScreen } = attributes;
    
    //check if attribute exists for old Gutenberg version compatibility
    //add class only when visibleOnMobile = false
    //add allowedBlocks restriction
    if (typeof animateOnScreen !== 'undefined' && animateOnScreen !== 'noAnimation'  && allowedBlocks.includes( blockType.name ) ) {
        extraProps.className = classnames( extraProps.className );
        }
    if (typeof animateOnScreen !== 'undefined' && animateOnScreen == 'animationAfterDelay' && allowedBlocks.includes(blockType.name)) {
        extraProps.className = classnames(extraProps.className,'animationAfterDelay');
    }
    if (typeof animateOnScreen !== 'undefined' && animateOnScreen == 'animationOnScroll' && allowedBlocks.includes(blockType.name)) {
        extraProps.className = classnames(extraProps.className,'animationOnScroll');
    }
    if (typeof animateOnScreen !== 'undefined' && animateOnScreen == 'animationInViewport' && allowedBlocks.includes(blockType.name)) {
        extraProps.className = classnames(extraProps.className,'animationInViewporta');
    }
}
//add filters

addFilter(
    'blocks.registerBlockType','melaniemueller.design-AnimateCSS/custom-attributes',addAttributes
);

addFilter(
    'editor.BlockEdit','melaniemueller.design-AnimateCSS/custom-advanced-control',withAdvancedControls
);

addFilter(
    'blocks.getSaveContent.extraProps','melaniemueller.design-AnimateCSS/applyExtraClass',applyExtraClass
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>

谁能帮我找到一个起点或解决方案？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）