我创建了一个地图块插件，它或多或少都能正常工作，但我很难理解在插入块时/之后如何加载地图脚本。如果在插入/保存后重新加载页面，或者加载公共视图，则会按预期加载映射脚本（因为我已经通过PHP将脚本和样式排队）。通常，我会将脚本附加到某种DOM事件，但我意识到Gutenberg/React处理事情的方式不同。
所以我的问题是：
如何在插入块后立即加载脚本（远程或内联）props.setAttributes(), 哪个对位于我的块注册之外的脚本不可用）
import \'./style.scss\';
import \'./editor.scss\';
const { __ } = wp.i18n;
const { registerBlockType, getBlockDefaultClassName } = wp.blocks;
const { PlainText, InspectorControls, PanelBody } = wp.editor;
const { TextareaControl, TextControl } = wp.components;
const { withState } = wp.compose;
registerBlockType( \'myplugin/block-map-location\', {
title: __( \'Location Map\' ),
icon: \'location\',
category: \'myplugin\',
keywords: [ __( \'Map\' ), __( \'Location\' ), __( \'myplugin\' ) ],
supports: {
anchor: true,
html: false,
multiple: false,
reusable: false,
},
description: __( \'A block for adding a location map.\' ),
attributes: {
caption: {
type: \'string\',
source: \'text\',
selector: \'.map-caption-pp\',
},
lat: {
type: \'string\',
selector: \'div.map-pp\',
source: \'attribute\',
attribute: \'data-lat\',
},
lon: {
type: \'string\',
selector: \'div.map-pp\',
source: \'attribute\',
attribute: \'data-lon\',
},
zoom: {
type: \'string\',
selector: \'div.map-pp\',
source: \'attribute\',
attribute: \'data-zoom\',
},
mb_key: {
type: \'string\',
selector: \'div.map-pp\',
source: \'attribute\',
attribute: \'data-mb-key\',
},
maki: {
type: \'string\',
selector: \'div.map-pp\',
source: \'attribute\',
attribute: \'data-zoom\',
},
maki_color: {
type: \'string\',
selector: \'div.map-pp\',
source: \'attribute\',
attribute: \'data-maki-color\',
},
basemap: {
type: \'string\',
selector: \'div.map-pp\',
source: \'attribute\',
attribute: \'data-basemap\',
},
query: {
type: \'string\',
selector: \'input.query-pp\',
source: \'text\',
},
},
edit( props ) {
const {
attributes: {
caption,
zoom,
lat,
lon,
mb_key,
maki,
maki_color,
basemap,
query,
},
className,
setAttributes,
} = props;
const onChangeCaption = caption => {
setAttributes( { caption } );
};
const onSubmitQuery = function( e ) {
e.preventDefault();
console.log( query );
};
const defaults = myplugin_plugin_settings.myplugin_defaults;
if ( ! zoom ) {
props.setAttributes( { zoom: defaults.default_zoom } );
}
if ( ! lat ) {
props.setAttributes( { lat: defaults.default_latitude } );
}
if ( ! lon ) {
props.setAttributes( { lon: defaults.default_longitude } );
}
if ( ! mb_key ) {
props.setAttributes( { mb_key: defaults.mapbox_key } );
}
if ( ! maki ) {
props.setAttributes( { maki: defaults.maki_markers } );
}
if ( ! maki_color ) {
props.setAttributes( { maki_color: defaults.maki_markers_color } );
}
if ( ! basemap ) {
props.setAttributes( { basemap: defaults.default_map_type } );
}
return (
<div
className={ props.className }
aria-label={ __( \'Interactive Map\' ) }
role="region"
>
<form className="inline-input" onSubmit={ onSubmitQuery }>
<TextControl
className="query-pp"
tagName="input"
placeholder={ __(
\'Type a query and press Enter/Return.\',
\'wp_myplugin\'
) }
onChange={ input => setAttributes( { query: input } ) }
/>
</form>
<figure>
<div
className="map-pp"
id="myplugin-map"
data-lat={ lat }
data-lon={ lon }
data-zoom={ zoom }
data-mb-key={ mb_key }
data-maki={ maki }
data-maki-color={ maki_color }
data-basemap={ basemap }
/>
<TextareaControl
rows="2"
className="map-caption-pp"
tagName="figcaption"
placeholder={ __(
\'Type a caption for the map (optional).\',
\'wp_myplugin\'
) }
value={ caption }
onChange={ onChangeCaption }
/>
</figure>
</div>
);
},
save( props ) {
const className = getBlockDefaultClassName( \'myplugin/block-map-location\' );
const { attributes } = props;
return (
<div
className={ props.className }
aria-label={ __( \'Interactive Map\' ) }
role="region"
>
<figure>
<div
className="map-pp"
id="myplugin-map"
data-lat={ attributes.lat }
data-lon={ attributes.lon }
data-zoom={ attributes.zoom }
data-mb-key={ attributes.mapbox_key }
data-maki={ attributes.maki_markers }
data-maki-color={ attributes.maki_markers_color }
data-basemap={ attributes.basemap }
/>
<figcaption className="map-caption-pp">
{ attributes.caption }
</figcaption>
</figure>
</div>
);
},
} );
这是脚本当前排队的方式。。。
function myplugin_blocks_cgb_block_assets() {
wp_enqueue_style(
\'myplugin_blocks-cgb-style-css\',
plugins_url( \'dist/blocks.style.build.css\', dirname( __FILE__ ) ),
array( \'wp-editor\' )
);
wp_enqueue_style(
\'myplugin-leaflet-css\',
\'https://unpkg.com/[email protected]/dist/leaflet.css\',
array()
);
wp_enqueue_script(
\'myplugin-leaflet-js\',
\'https://unpkg.com/[email protected]/dist/leaflet.js\',
array()
);
wp_enqueue_script(
\'myplugin-location\',
plugins_url( \'myplugin-location.js\', __FILE__ ),
array()
);
}
add_action( \'enqueue_block_assets\', \'myplugin_blocks_cgb_block_assets\' );
