对于依赖前端javascript的块，您所要求的是不可能的，这包括嵌入。

也不可能使用Swiper react库。Swiper库选择手动检查SwiperSlide 组件名称，防止其与子块一起使用。

Edit: Actually maybe it is! 自从写了这篇文章，a PR was merged that may fix this and allow the code below to work as desired

jQuery也不可能与内部块一起使用，因为它与React的工作方式冲突，并且会导致虚拟DOM问题。

如果我们使用React-Swiper库，您可以获得最接近的，useBlockProps, 和useInnerBlocksProps, 我们可以实现这一点，并拥有可编辑的幻灯片，同时保留滑块。

但是，Swiper将看不到所需组件的具体排列，并将它们放置在滑块容器之后，而不是包装内。

重要的是要注意以下片段：

        const blockProps = useBlockProps();
        const innerBlocksProps = useInnerBlocksProps( blockProps, {
            allowedBlocks: [ \'tomjn/swiper-slide\' ],
            template: TEMPLATE,
        });
        const params = {...};
        return (
            <div { ...innerBlocksProps }>
                <Swiper { ...params }>
                    { innerBlocksProps.children }
                </Swiper>
            </div>
        );

通过使用innerBlocksProps.children 我们消除了包含<div> 标签。

这是我的演示：

src/index.js：

import { registerBlockType } from \'@wordpress/blocks\';
import {
    InnerBlocks,
    useBlockProps,
    __experimentalUseInnerBlocksProps as useInnerBlocksProps
} from \'@wordpress/block-editor\';

import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from \'swiper\';
import { Swiper, SwiperSlide } from \'swiper/react\';

// Import Swiper styles
import \'swiper/swiper-bundle.css\';

// install Swiper components
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);

const TEMPLATE = [
    [ \'tomjn/swiper-slide\', {}, [
        [ \'core/paragraph\', { placeholder: \'Enter slide content...\' } ],
    ] ],
    [ \'tomjn/swiper-slide\', {}, [
        [ \'core/paragraph\', { placeholder: \'Enter slide content...\' } ],
    ] ]
];

registerBlockType( \'tomjn/swiper\', {
    apiVersion: 2,
    title: \'Swiper\',
    category: \'layout\',
    edit: () => {
        const blockProps = useBlockProps();
        const innerBlocksProps = useInnerBlocksProps( blockProps, {
            allowedBlocks: [ \'tomjn/swiper-slide\' ],
            template: TEMPLATE,
        });
        const params = {
            init: true,
            paceBetween: 50,
            slidesPerView: 2,
            loop: true,
            navigation: {
                clickable: true,
            },
            spaceBetween: 30,
            pagination: {
                clickable: true,
            }
        };
        return (
            <div { ...innerBlocksProps }>
                <Swiper { ...params }>
                    { innerBlocksProps.children }
                </Swiper>
            </div>
        );
    },
    save: () => {
        return (
            <div className="swiper-container">
                <div className="swiper-wrapper">
                    <InnerBlocks.Content />
                </div>
                <div className="swiper-pagination"></div>
                <div className="swiper-button-prev"></div>
                <div className="swiper-button-next"></div>
            </div>
        );
    },
} );

registerBlockType( \'tomjn/swiper-slide\', {
    apiVersion: 2,
    title: \'Swiper Slide\',
    category: \'layout\',
    edit: () => {
        const blockProps = useBlockProps();
        return (
            <SwiperSlide>
                <div {...blockProps}>
                    <InnerBlocks />
                </div>
            </SwiperSlide>
        );
    },
    save: () => {
        return (
            <div class="swiper-slide">
                <InnerBlocks.Content />
            </div>
        );
    },
} );

package.json：

{
    "dependencies": {
        "swiper": "^6.4.5"
    },
    "devDependencies": {
        "@wordpress/scripts": "^12.6.1"
    },
    "scripts": {
        "build": "wp-scripts build",
        "check-engines": "wp-scripts check-engines",
        "check-licenses": "wp-scripts check-licenses",
        "format:js": "wp-scripts format-js",
        "lint:css": "wp-scripts lint-style",
        "lint:js": "wp-scripts lint-js",
        "lint:md:docs": "wp-scripts lint-md-docs",
        "lint:md:js": "wp-scripts lint-md-js",
        "lint:pkg-json": "wp-scripts lint-pkg-json",
        "packages-update": "wp-scripts packages-update",
        "start": "wp-scripts start",
        "test:e2e": "wp-scripts test-e2e",
        "test:unit": "wp-scripts test-unit-js"
    }
}

plugin.php：

<?php
/**
 * Plugin Name: Toms Swiper Plugin
 * Plugin URI: https://tomjn.com
 * Description: Swiper no swiping.
 * Requires at least: 5.5
 * Requires PHP: 7.3
 * Version: 1.0.0
 * Author: Tom J Nowell
 */

defined( \'ABSPATH\' ) || exit;

add_action(
    \'enqueue_block_editor_assets\',
    function() {
        $asset = include plugin_dir_path( __FILE__ ) . \'build/index.asset.php\';

        wp_register_script(
            \'tomjn-swiper-block-js\',
            plugins_url( \'build/index.js\', __FILE__ ),
            $asset[\'dependencies\'],
            $asset[\'version\'],
        );
        wp_register_style(
            \'tomjn-swiper-block-css\',
            plugins_url( \'build/index.css\', __FILE__ ),
            [],
            $asset[\'version\'],
        );
    }
);

/**
 * Registers all block assets so that they can be enqueued through Gutenberg in
 * the corresponding context.
 */
function tomjn_swiper_register_block() {

    if ( ! function_exists( \'register_block_type\' ) ) {
        // Gutenberg is not active.
        return;
    }

    register_block_type(
        \'tomjn/swiper\',
        [
            \'editor_script\' => \'tomjn-swiper-block-js\',
            \'editor_style\'  => \'tomjn-swiper-block-css\',
        ]
    );
    register_block_type(
        \'tomjn/swiperslide\',
        [
            \'editor_script\' => \'tomjn-swiper-block-js\',
            \'editor_style\'  => \'tomjn-swiper-block-css\',
        ]
    );

}
add_action( \'init\', \'tomjn_swiper_register_block\' );