如果你对WordPress自带的古腾堡Gutenberg很满意，想要用它来做电商WooCommerce的话，你会发现是做不到的，产品页面并不会像页面和文章那样出现自带的区块编辑器。
产品添加古腾堡编辑器
想要在产品界面也开启古腾堡其实很简单，粘贴以下代码就可以。
/* 开启产品古腾堡 */
function jhchen_gutenberg_products($can_edit, $post_type){
if($post_type == 'product'){
$can_edit = true;
}
return $can_edit;
}
add_filter('use_block_editor_for_post_type', 'jhchen_gutenberg_products', 10, 2);
//从 WooCommerce 7.70 开始也需要添加以下
add_filter('woocommerce_register_post_type_product', function( $args ) {
unset( $args['template'] );
return $args;
});使用 code snippets 还是直接放到你主题的function.php随便你。
任何页面开启古腾堡编辑器
上面的代码可以根据你自己的需求来调整开启古腾堡Gutenberg，比如你有一个 car 的自定义页面（Custom post type），你也可以给它开。
只需要在 if($post_type == ‘XXX’) 的位子写上 CPT 的名字。
/* 开启古腾堡Gutenberg */
function jhchen_gutenberg_cpt($can_edit, $post_type){
if($post_type == 'car'){
$can_edit = true;
}
return $can_edit;
}
add_filter('use_block_editor_for_post_type', 'jhchen_gutenberg_cpt', 10, 2);只需要在 if($post_type == ‘XXX’) 的位子写上 CPT 的名字。
产品目录可见设置
你给产品开启古腾堡之后，产品的可见设置就消失了
开启之后只有文章和页面的常用设置。
解决这个问题最简单的方法就是把下面的代码粘贴到你的网站，和刚刚开启 Gutenberg 的操作一样。这个代码会显示全部 WooCommerce 产品应该出现的设置。
/* 开启产品目录可见 */
function register_catalog_meta_boxes() {
global $current_screen;
if ( method_exists( $current_screen, 'is_block_editor' ) && $current_screen->is_block_editor() ) {
add_meta_box( 'catalog-visibility', __( '目录可见', 'textdomain' ), 'product_data_visibility', 'product', 'side' );
}
}
add_action( 'add_meta_boxes', 'register_catalog_meta_boxes' );
function product_data_visibility( $post ) {
$thepostid = $post->ID;
$product_object = $thepostid ? wc_get_product( $thepostid ) : new WC_Product();
$current_visibility = $product_object->get_catalog_visibility();
$current_featured = wc_bool_to_string( $product_object->get_featured() );
$visibility_options = wc_get_product_visibility_options();
?>
<div class="misc-pub-section" id="catalog-visibility">
<?php esc_html_e( '目录可见:', 'woocommerce' ); ?>
<strong id="catalog-visibility-display">
<?php
echo isset( $visibility_options[ $current_visibility ] ) ? esc_html( $visibility_options[ $current_visibility ] ) : esc_html( $current_visibility );
if ( 'yes' === $current_featured ) {
echo ', ' . esc_html__( 'Destacado', 'woocommerce' );
}
?>
</strong>
<a href="#catalog-visibility"
class="edit-catalog-visibility hide-if-no-js"><?php esc_html_e( 'Editar', 'woocommerce' ); ?></a>
<div id="catalog-visibility-select" class="hide-if-js">
<input type="hidden" name="current_visibility" id="current_visibility"
value="<?php echo esc_attr( $current_visibility ); ?>" />
<input type="hidden" name="current_featured" id="current_featured"
value="<?php echo esc_attr( $current_featured ); ?>" />
<?php
echo '<p>' . esc_html__( '产品展示页面.', 'woocommerce' ) . '</p>';
foreach ( $visibility_options as $name => $label ) {
echo '<input type="radio" name="_visibility" id="_visibility_' . esc_attr( $name ) . '" value="' . esc_attr( $name ) . '" ' . checked( $current_visibility, $name, false ) . ' data-label="' . esc_attr( $label ) . '" /> <label for="_visibility_' . esc_attr( $name ) . '" class="selectit">' . esc_html( $label ) . '</label><br />';
}
echo '<br /><input type="checkbox" name="_featured" id="_featured" ' . checked( $current_featured, 'yes', false ) . ' /> <label for="_featured">' . esc_html__( '特色产品', 'woocommerce' ) . '</label><br />';
?>
<p>
<a href="#catalog-visibility"
class="save-post-visibility hide-if-no-js button"><?php esc_html_e( 'Accept ', 'woocommerce' ); ?></a>
<a href="#catalog-visibility"
class="cancel-post-visibility hide-if-no-js"><?php esc_html_e( 'Cancel', 'woocommerce' ); ?></a>
</p>
</div>
</div>
<?php
}
开启产品古腾堡后的限制
- 产品简短详述使用不了古腾堡
- 你使用的主题得是和Gutenberg匹配的，不然出现不了编辑器
- 你在使用的任何和产品相关的插件都得和古腾堡匹配
总结
我的总结就是，不建议你在产品开启古腾堡，我个人不是很喜欢Gutenberg，太拉跨了，一定要使用的话请安装 Spectra，添加它的功能。
