web-dev-qa-db-ja.com

グーテンベルクコンテナブロックはありますか？

Webデザインで重要なデザイン要素は、他のさまざまなコンテンツやブロックを含むことができ、CSSでスタイル設定されているコンテナです。

他のブロックを含むことがあるグーテンベルクコンテナブロックはありますか？もしそうなら、私はそれをまだ見つけていない。

それは のように見えます /グーテンベルグエディタは現在、ネストされたブロックの表現をサポートします。 セクションブロックを要求している人もいます 。まだそこにどんな愛？

Columnsブロックを1つの列に変更できましたが、それは不格好なハックのように感じます。

cssblock-editor
5
Wes Modes

私は最初のコンテナ/ラッパーブロックを動作させる準備が非常に難しかった。これが私がここ数時間学んだことです。

私はInnerBlocksのインポートに深刻な問題を抱えていたので、 create-guten-block toolkitを使うことにしました。インストールの後、私はnpx create-guten-blockを実行しなければなりませんでした。それは私に関連ファイルの構造を提供しました。ここで、ファイルsrc/block/block.jsを次のコードに変更しました。

import { registerBlockType } from '@wordpress/blocks';
import { InnerBlocks } from '@wordpress/editor';
const { __ } = wp.i18n;
registerBlockType( 'myplugin/container', {
    title: __( 'My Plugin Container', 'myplugin' ),
    icon: 'universal-access-alt',
    category: 'myplugin',
    getEditWrapperProps: function () {
        return {
            "data-align": "full"
        };
    },
    edit: function( props ) {
        return (
            <div className={ props.className }>
                <InnerBlocks />
            </div>
        );
    },
    save: function( props ) {
        return (
            <div>
                <InnerBlocks.Content />
            </div>
        );
    },
} );

Cli経由でディレクトリに入ってnpm run buildを実行した後、私のプラグインは準備ができていて期待通りに動きました。

この最初のステップで使用した単純なCSSは、フロントエンドとバックエンドの両方に使用したものです。

.wp-block-myplugin-container{
    padding-top: 50px;
    padding-bottom: 50px;
    background-color: purple;
}

ノードを最新バージョンに更新した後、私はこれをWindowsマシンで使用しました。結果に満足していて、このコンテナの詳細設定（背景色/画像、余白、余白など）に焦点を当てています。

ハッピーコーディング！

3
chrisbergr

これがグーテンベルク開発の第2段階が焦点を当てるものです。開発者は、定義済みの内部ブロックを持つ親ブロックを作成して、ユーザーのページ設定プロセスを円滑にすることができます。

今のところ、InnerBlocksコンポーネントを使うことができます。

import { registerBlockType } from '@wordpress/blocks';
import { InnerBlocks } from '@wordpress/editor';

const ALLOWED_BLOCKS = [ 'core/image', 'core/paragraph' ];
<InnerBlocks
    allowedBlocks={ ALLOWED_BLOCKS }
/>

registerBlockType( 'my-plugin/my-block', {
    // ...

    edit( { className } ) {
        return (
            <div className={ className }>
                <InnerBlocks />
            </div>
        );
    },

    save() {
        return (
            <div>
                <InnerBlocks.Content />
            </div>
        );
    }
} );

オプションを操作するためのtemplateLockおよびlayoutsオプションもあります。その他のオプションについては - Official Doc をご覧ください。

3
Ashiquzzaman Kiron

あなたが探している役割を果たすことを意図しているグーテンベルクの次のアップデートで利用可能になるであろう新しいコア「Section」ブロックがあると思います：

セクションブロックを追加

1
Rick Curran

いくつかのプラグインがGutenbergにwrapper/containerブロックを追加しました。 エディタブロック はその一例です。

0
Danny Cooper