标签: create-guten-block

React Module解析失败:意外字符'@'

尝试在我的react组件中导入以下内容时出错:

import FontIconPicker from '@fonticonpicker/react-fonticonpicker';
import '@fonticonpicker/react-fonticonpicker/dist/fonticonpicker.base-theme.react.css';
Run Code Online (Sandbox Code Playgroud)

我正在使用这个模块:https://fonticonpicker.github.io/react-fonticonpicker/

我收到此错误:

./node_modules/@fonticonpicker/react-fonticonpicker/dist/fonticonpicker.base-theme.react.css模块解析失败:意外字符'@'(18:0)您可能需要一个合适的加载器来处理此文件类型.|*| / | @ font-face {font-family:fontIconPicker; src:url(assets/fontIconPicker.ttf)format("truetype"),url(assets/fontIconPicker.woff)format("woff"),url(assets/fontIconPicker.svg #fontIconPicker)format("svg"); font-weight:400; font-style:normal} [class ="fipicon - "],[class ^ = fipicon - ] {font-family:fontIconPicker!important; speak:none ;字体样式 .......

可以使用我的github代码重现该错误:https://github.com/gregbia/my-app

使用npm install,并且npm start会显示错误.

我的webpack看起来像这样:

/**
 * Webpack Configuration
 *
 * Working of a Webpack can be very simple or complex. This is an intenally simple
 * build configuration.
 *
 * Webpack basics — If you are new …
Run Code Online (Sandbox Code Playgroud)

babel reactjs webpack create-guten-block

7
推荐指数
1
解决办法
3738
查看次数

有没有办法在 WordPress 古腾堡编辑器中添加新选项卡

我对古腾堡完全陌生,我需要在设置部分添加一个新选项卡请检查此屏幕截图

在此输入图像描述

我已经为古腾堡创建了一些块,但没有这方面的经验。我试过这段代码

import { TabPanel } from '@wordpress/components';

    const onSelect = ( tabName ) => {
        console.log( 'Selecting tab', tabName );
    };

    const MyTabPanel = () => (
        <TabPanel className="my-tab-panel"
            activeClass="active-tab"
            onSelect={ onSelect }
            tabs={ [
                {
                    name: 'tab1',
                    title: 'Tab 1',
                    className: 'tab-one',
                },
                {
                    name: 'tab2',
                    title: 'Tab 2',
                    className: 'tab-two',
                },
            ] }>
            {
                ( tab ) => <p>{ tab.title }</p>
            }
        </TabPanel>
    );
Run Code Online (Sandbox Code Playgroud)

但没有帮助我。这里有人请帮助我。提前致谢

wordpress reactjs wordpress-gutenberg gutenberg-blocks create-guten-block

5
推荐指数
1
解决办法
1459
查看次数

如何从innerBlocks中排除父块?

我想Section在 WordPress Gutenberg 中创建一个块。我创建了一个部分块并使用古腾堡<InnerBlocks>组件作为内部/子块。它工作正常,但Section块本身显示为其内部块列表。我想Section从其内部块中排除该块。<InnerBlocks>组件有一个属性allowedBlocks来指定允许作为内部块的块。但这对我没有帮助,因为我只想禁止Section来自内部块的块。我如何才能仅禁止来自 的单个特定块<InnerBlocks>

我需要一个像这样的选项,disallowedBlocks以便我可以从innerBlocks列表中排除块,例如

<InnerBlocks disallowedBlocks={['leo-block/section']} />

完整代码

;(function(wp) {
    const {registerBlockType} = wp.blocks;
    const {InnerBlocks} = wp.editor;
    const {__} = wp.i18n;

    registerBlockType('leo-block/section', {
        title: __('Section'),
        icon: 'grid-view',
        category: 'vr-blocks',
        descrition: __('Section block for manage content section'),
        attributes: {
            content: {
                default: 'Hello World'
            },
            spacing: {
                default: {
                    paddingTop: '70px',
                    paddingBottom: '70px',
                    marginTop: '0',
                    marginBottom: '0'
                }
            }
        }, …
Run Code Online (Sandbox Code Playgroud)

wordpress wordpress-gutenberg gutenberg-blocks create-guten-block

3
推荐指数
1
解决办法
1403
查看次数