如何解决将 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 举报,一经查实,本站将立刻删除。