不能移除我的古腾堡块。它已经固定在编辑页面上了。

Question

我只是尝试通过PHP呈现一些post数据。之后，该块将在编辑器页面上堆栈。我的代码有什么问题吗？

注意:在PHP文件中查询文章之前，我看不到这个问题。也许我在PHP文件中出错了。但我不知道。

On php文件

/*
Plugin Name: Gutenberg examples 01
*/

/**
 * Renders the post block on server.
 */
function post_layouts_block_render_block_core( $attributes ) {

    $args       = array(
        'posts_per_page' => -1,
        'post_type'      => 'post',
    );
    $post_query = new WP_Query( $args );

    if ( $post_query->have_posts() ) {

        $list_items_markup = '<div id="forhad-guten-posts"><ul>';
        while ( $post_query->have_posts() ) {

            $post_query->the_post();
            $list_items_markup .= '<li>' . get_the_title() . '</li>';
        }
        $list_items_markup .= '</ul></div>';
        return $list_items_markup;
    }
}

// Register Block and initial setupment
function gutenberg_examples_01_register_block() {

    // automatically load dependencies and version.
    $asset_file = include plugin_dir_path( __FILE__ ) . 'build/index.asset.php';

    wp_register_script(
        'gutenberg-examples-01-esnext',
        plugins_url( 'build/index.js', __FILE__ ),
        $asset_file['dependencies'],
        filemtime( plugin_dir_path( __FILE__ ) . 'build/index.js' ),
        true,
    );

    wp_register_style(
        'gutenberg-examples-01-editor',
        plugins_url( 'src/editor.css', __FILE__ ),
        array( 'wp-edit-blocks' ),
        filemtime( plugin_dir_path( __FILE__ ) . 'src/editor.css' ), // filemtime() returns the last time of when its content was modified.
    );

    wp_register_style(
        'gutenberg-examples-01',
        plugins_url( 'src/style.css', __FILE__ ),
        array(),
        filemtime( plugin_dir_path( __FILE__ ) . 'src/style.css' ), // filemtime() returns the last time of when its content was modified.
    );

    register_block_type(
        'gutenberg-examples/example-01-basic-esnext',
        array(
            'api_version'     => 2,
            'style'           => 'gutenberg-examples-01',
            'editor_style'    => 'gutenberg-examples-01-editor',
            'editor_script'   => 'gutenberg-examples-01-esnext',
            'render_callback' => 'post_layouts_block_render_block_core',
        )
    );

}
add_action( 'init', 'gutenberg_examples_01_register_block' );

关于JS文件

import { registerBlockType } from '@wordpress/blocks';
import { RichText, InspectorControls, ColorPalette, MediaUpload } from '@wordpress/block-editor';
import { PanelBody, Button, RangeControl } from '@wordpress/components';
import ServerSideRender from '@wordpress/server-side-render';

registerBlockType( 'gutenberg-examples/example-01-basic-esnext', {
    title: 'Basic Example',
    icon: 'smiley',
    category: 'design',

    /**
     * Custom attributes :
     * -------------------
     */
     attributes: {

        titleColor: {
            type: 'string',
            default: 'black',
        },
        overlayOpacity: {
            type: 'number',
            default: 0.3
        },
    },

    edit({ attributes, setAttributes }) {

        const {
            titleColor,
            overlayOpacity
        } = attributes;

        function onTitleColorChange( newColor ) {

            setAttributes({ titleColor: newColor });
        }
        function onOverlayOpacityChange( newOpacity ) {

            setAttributes({ overlayOpacity: newOpacity });
        }

        return ([
            <InspectorControls style={{ marginBottom: '40px' }}>
                {/* https://developer.wordpress.org/block-editor/components/panel/#design-guidelines */}
                <PanelBody title={ 'Font Color Settings' }>
                    <p><strong>Select a Title color:</strong></p>
                    <ColorPalette value={ titleColor }
                                  onChange={ onTitleColorChange } />
                </PanelBody>

                <PanelBody title={ 'Background Image Settings' }>
                    <RangeControl
                        label={ 'Overlay Opacity' }
                        value={ overlayOpacity }
                        onChange={ onOverlayOpacityChange }
                        min={ 0 }
                        max={ 1 }
                        step={ 0.01 } />
                </PanelBody>
            </InspectorControls>,

            // Posts direct show from 'render_callback' on the editor.
            <div><p>Posts are showing here: yaaaaaa</p>
            <ServerSideRender
                block={ "gutenberg-examples/example-01-basic-esnext" } />
            </div>
        ]);
    },

    // Render via PHP
    save() {
        return null;
    },

} );

毕竟，我还有一个关于“ServerSideRender”的问题。是否有可能从block={ "gutenberg-examples/example-01-basic-esnext" }中获得值？否则，我不会在JS文件中应用$variables。

Answer 1

最后，通过添加...useBlockProps()完成了

<div { ...useBlockProps() }>
  <ServerSideRender
    block={ "gutenberg-examples/example-01-basic-esnext" } />
</div>

只需确保在使用useBlockProps之前导入它。

import { useBlockProps } from '@wordpress/block-editor';

现在，在选择块之后显示块核心选项。