如何在古腾堡的“文档”下添加新面板
Posted
技术标签:
【中文标题】如何在古腾堡的“文档”下添加新面板【英文标题】：How to add new panel under "document" in Gutenberg 【发布时间】：2019-01-21 12:54:24 【问题描述】：我正在尝试在文档选项卡下添加一个新的组件面板，例如类别、特色图片等。
【问题讨论】：
你有没有想过这个问题？ 检查我的更新答案 【参考方案1】：您现在可以使用较新的 useSelect 和 useDispatch 自定义挂钩。它们类似于 withSelect 和 withDispatch，但使用来自 React 16.8 的自定义钩子以获得更简洁的开发体验：
（另外，使用 @wordpress/scripts，因此导入来自 npm 包而不是直接来自 wp 对象，但两者都可以。）
import __ from '@wordpress/i18n';
import useSelect, useDispatch from '@wordpress/data';
import PluginDocumentSettingPanel from '@wordpress/edit-post';
import TextControl from '@wordpress/components';
const TextController = (props) =>
const meta = useSelect(
(select) =>
select('core/editor').getEditedPostAttribute('meta')['_myprefix_text_metafield']
);
const editPost = useDispatch('core/editor');
return (
<TextControl
label=__("Text Meta", "textdomain")
value=meta
onChange=(value) => editPost( meta: _myprefix_text_metafield: value )
/>
);
;
const PluginDocumentSettingPanelDemo = () =>
return (
<PluginDocumentSettingPanel
name="custom-panel"
title="Custom Panel"
className="custom-panel"
>
<TextController />
</PluginDocumentSettingPanel>
);
;
export default PluginDocumentSettingPanelDemo;
除了像往常一样注册您的元字段：
function myprefix_register_meta()
register_post_meta('post', '_myprefix_text_metafield', array(
'show_in_rest' => true,
'type' => 'string',
'single' => true,
'sanitize_callback' => 'sanitize_text_field',
'auth_callback' => function ()
return current_user_can('edit_posts');
));
add_action('init', 'myprefix_register_meta');
并确保如果用于自定义帖子类型，则将 custom-fields 包含在 supports 的数组中：
'supports' => array('title', 'editor', 'thumbnail', 'revisions', 'custom-fields'),
希望对您有所帮助。
【讨论】：
【参考方案2】：他们现在添加了PluginDocumentSettingPanel SlotFill。
const registerPlugin = wp.plugins
const PluginDocumentSettingPanel = wp.editPost
const PluginDocumentSettingPanelDemo = () => (
<PluginDocumentSettingPanel
name="custom-panel"
title="Custom Panel"
className="custom-panel"
>
Custom Panel Contents
</PluginDocumentSettingPanel>
)
registerPlugin('plugin-document-setting-panel-demo',
render: PluginDocumentSettingPanelDemo
)
【讨论】：
我正在使用这种设置，但是当我添加一个文本控件时，它无法正常工作。当我尝试更改输入字段中的值时，它不会显示。它保持在初始值。也许是因为我在这个设置中没有道具和东西。你能告诉我如何管理它，因为它的工作方式与块检查器不同吗？ 您知道如何将其添加到所有其他文档设置选项的下方吗？它目前在“修订”上方加载，我希望它出现在“精选图片”下【参考方案3】：add_meta_box 可以解决问题，但前提是您添加 context-argument 的值为 'side'：
add_meta_box(
'box-id-here',
'Box Title Here',
'createBoxhtml',
'post',
'side' ); // <-- this is important
哎呀，两天一劳永逸！
旧答案
根据this tutorial，我们可以添加自定义侧边栏并使用自定义表单输入填充它。
这是一个 React JSX 版本的工作示例。这会添加一个元字段country：
const registerPlugin = wp.plugins;
const PluginSidebar = wp.editPost;
const TextControl = wp.components;
const withSelect, withDispatch = wp.data;
// Customized TextControl
const CustomMetaField = withDispatch( ( dispatch, props ) =>
return
updateMetaValue: ( v ) =>
dispatch( 'core/editor' ).editPost(
meta:
[ props.metaFieldName ]: v
);
;
)( withSelect( ( select, props ) =>
return
[ props.metaFieldName ]: select( 'core/editor' ).getEditedPostAttribute( 'meta' )[ props.metaFieldName ]
;
)( ( props ) => (
<TextControl
value=props[ props.metaFieldName ]
label="Country"
onChange=( v ) =>
props.updateMetaValue( v );
/> )
) );
// Our custom sidebar
registerPlugin( 'custom-sidebar',
render()
return (
<PluginSidebar
name="project-meta-sidebar"
title="Project Meta">
<div className="plugin-sidebar-content">
<CustomMetaField metaFieldName="country" />
</div>
</PluginSidebar>
);
,
);
在 php 中，在init-hook 中注册元字段：
register_meta( 'post', 'country', [
'show_in_rest' => TRUE,
'single' => TRUE,
'type' => 'string'
] );
我知道：
这仍然不是必需的解决方案，但差不多。
【讨论】：
古腾堡的文档太少了，真是太糟糕了。如果没有那个“侧面”选项，我会浪费一天的工作。谢谢。【参考方案4】：您可以将此代码添加到您的function.php。此代码创建新选项卡并将文本字段添加到此选项卡。文本字段像 post_meta 表中的自定义字段一样保存到数据库，您可以像默认的 WP post meta 一样输出它。
1.创建标签Настройки UTM.
2.创建自定义文本字段utm_post_class
3. 网站输出使用$utm = get_post_meta( $post->ID, 'utm_post_class', true );
//Article UTM Link
add_action( 'load-post.php', 'utm_post_meta_boxes_setup' );
add_action( 'load-post-new.php', 'utm_post_meta_boxes_setup' );
function utm_post_meta_boxes_setup()
add_action( 'add_meta_boxes', 'utm_add_post_meta_boxes' );
add_action( 'save_post', 'utm_save_post_class_meta', 10, 2 );
function utm_add_post_meta_boxes()
add_meta_box(
'utm-post-class',
'Настройки UTM',
'utm_post_class_meta_box',
'post',
'side',
'default'
);
function utm_post_class_meta_box( $post )
wp_nonce_field( basename( __FILE__ ), 'utm_post_class_nonce' );?>
<div class="components-base-control editor-post-excerpt__textarea">
<div class="components-base-control__field">
<label class="components-base-control__label" for="utm-post-class">UTM ссылка (необязательно)</label>
<input type="text" name="utm-post-class" id="utm-post-class" class="edit-post-post-schedule" value="<?php echo esc_attr( get_post_meta( $post->ID, 'utm_post_class', true ) ); ?>">
</div>
</div>
<?php
function utm_save_post_class_meta( $post_id, $post )
if ( !isset( $_POST['utm_post_class_nonce'] ) || !wp_verify_nonce( $_POST['utm_post_class_nonce'], basename( __FILE__ ) ) )
return $post_id;
$post_type = get_post_type_object( $post->post_type );
if ( !current_user_can( $post_type->cap->edit_post, $post_id ) )
return $post_id;
$new_meta_value = ( isset( $_POST['utm-post-class'] ) ? $_POST['utm-post-class'] : '' );
$meta_key = 'utm_post_class';
$meta_value = get_post_meta( $post_id, $meta_key, true );
if ( $new_meta_value && '' == $meta_value )
add_post_meta( $post_id, $meta_key, $new_meta_value, true );
elseif ( $new_meta_value && $new_meta_value != $meta_value )
update_post_meta( $post_id, $meta_key, $new_meta_value );
elseif ( '' == $new_meta_value && $meta_value )
delete_post_meta( $post_id, $meta_key, $meta_value );
【讨论】：
【参考方案5】：add_meta_box 在那里为古腾堡编辑器添加一个新面板
【讨论】：
这会将您的旧元字段添加到侧边栏。你知道如何实现一个新的基于 React 的盒子吗？ 可以添加自定义侧边栏，参见github.com/WordPress/gutenberg/blob/master/docs/…以上是关于如何在古腾堡的“文档”下添加新面板的主要内容，如果未能解决你的问题，请参考以下文章