我有一个自定义块,它修改了一个最终的附加Gutenberg截面块,以便我可以定义截面类型,例如exercise
并应用一些自定义格式。
我注意到在前端,修改后的块在块上方显示JSON。像这样:
<!-- wp:uagb/section {"block_id":"e00ee750-246d-46fd-a034-c6dc37497309","contenttype":"exercise","contenttitle":"here is exercise 1","contentname":"Exercise"} -->
未修改的块不显示任何JSON,因此我认为这与我的修改有关。
这是我的代码:
const { assign } = lodash;
const { addFilter } = wp.hooks;
const { __ } = wp.i18n;
// Enable spacing control on the following blocks
const enableBlockContentTypeAttribute = [
\'uagb/section\',
];
// Available spacing control options
const contenttypeControlOptions = [
{
label: __( \'None\' ),
value: \'\',
},
{
label: __( \'Exercise\' ),
value: \'exercise\',
},
{
label: __( \'Concept\' ),
value: \'concept\',
},
{
label: __( \'Something\' ),
value: \'something\',
},
];
/**
* Add spacing control attribute to block.
*
* @param {object} settings Current block settings.
* @param {string} name Name of block.
*
* @returns {object} Modified block settings.
*/
const addBlockContentTypeAttribute = ( settings, name ) => {
// Do nothing if it\'s another block than our defined ones.
if ( ! enableBlockContentTypeAttribute.includes( name ) ) {
return settings;
}
//console.log(\'Add content type option\');
// Use Lodash\'s assign to gracefully handle if attributes are undefined
settings.attributes = assign( settings.attributes, {
contenttype: {
type: \'string\',
default: contenttypeControlOptions[ 0 ].value,
},
contenttitle: {
type: \'string\',
default: \'\',
},
contentname: {
type: \'string\',
default: contenttypeControlOptions[ 0 ].label,
},
} );
return settings;
};
addFilter( \'blocks.registerBlockType\', \'my-mods/attribute/contenttype\', addBlockContentTypeAttribute );
const { createHigherOrderComponent } = wp.compose;
const { Fragment } = wp.element;
const { InspectorControls, InnerBlocks } = wp.editor;
const { PanelBody, PanelRow, SelectControl, TextControl } = wp.components;
/**
* Create HOC to add content type control to inspector controls of block.
*/
const withContentTypeControl = createHigherOrderComponent( ( BlockEdit ) => {
return ( props ) => {
// Do nothing if it\'s another block than our defined ones.
if ( ! enableBlockContentTypeAttribute.includes( props.name ) ) {
return (
<BlockEdit { ...props } />
);
}
//console.log(props.attributes);
const { contenttype } = props.attributes;
const { contenttitle } = props.attributes;
const { contentname } = props.attributes;
function getContentTitle ( content ) {
props.setAttributes({contenttitle: content});
}
return (
<Fragment>
<BlockEdit { ...props } />
<InspectorControls>
<PanelBody
title={ __( \'Choose Content Type\' ) }
initialOpen={ true }
>
<SelectControl
label={ __( \'Content Type\' ) }
value={ contenttype }
options={ contenttypeControlOptions }
onChange={ ( selectedContentTypeOption ) => {
var name = contenttypeControlOptions.filter(obj => {
return obj.value === selectedContentTypeOption
});
//console.log(name);
name = name[0].label;
//console.log(name);
props.setAttributes( {
contenttype: selectedContentTypeOption,
contentname: name,
} );
} }
/>
<TextControl
label={ __( \'Content Title\' ) }
value={ contenttitle }
onChange={ ( getContentTitle ) => {
props.setAttributes( {
contenttitle: getContentTitle,
});
}}
/>
</PanelBody>
</InspectorControls>
</Fragment>
);
};
}, \'withSpacingControl\' );
addFilter( \'editor.BlockEdit\', \'my-mods/with-contenttype-control\', withContentTypeControl );
// do something with these attributes - add header to section if exercise type block
const addContentTypeMarkup = ( element, blockType, attributes ) => {
// Do nothing if it\'s another block than our defined ones.
if ( ! enableBlockContentTypeAttribute.includes( blockType.name ) ) {
return element;
}
if ( attributes.contenttitle) {
// add header with anchor link and class name
var title_slug = attributes.contenttitle.trim().split(/\\s+/).join(\'-\');
var iconclassbase=\'contenticon \';
var iconclass=\'\';
switch(attributes.contenttype) {
case \'exercise\':
iconclass = \'fas fa-guitar\';
break;
case \'concept\':
iconclass = \'fas fa-atom\';
break;
default:
iconclass = \'fas fa-atom\';
}
iconclass = iconclassbase + iconclass;
return (
<React.Fragment>
<div id = {`${title_slug}`} className = {`contenttype-wrapper sometopictype-${attributes.contenttype}`} content-id="" data-id = {`${attributes.block_id}`}>
<div className = "heading d-flex flex-row">
<i className={`${iconclass} fa-7x`}></i>
<div className = "col">
<div className = "row"><span className="content-name">{attributes.contentname}</span></div>
<div className = "row"><h3 dangerouslySetInnerHTML={ { __html: attributes.contenttitle } }></h3></div>
</div>
</div>
{element}
</div>
</React.Fragment>
)
} else {
return element;
}
};
addFilter( \'blocks.getSaveElement\', \'my-mods/add-content-type-markup\', addContentTypeMarkup);
是否需要此JSON输出?如果没有,我如何禁用它?
谢谢Brian