web-dev-qa-db-fra.com

Existe-t-il des blocs de conteneurs Gutenberg?

Dans la conception Web, un élément clé de la conception est le conteneur qui peut contenir divers autres contenus et blocs et est stylé en CSS.

Existe-t-il un bloc conteneur Gutenberg pouvant contenir d'autres blocs? Si c'est le cas, je ne l'ai pas encore trouvé.

Il ressemble à l'éditeur Gutenberg prend désormais en charge la représentation des blocs imbriqués. Certaines personnes ont été demandant des blocs de section . Tout l'amour là encore?

J'ai pu changer le bloc Columns en une colonne, mais cela ressemble à un bidouillage maladroit.

cssblock-editor
5
Wes Modes

J'ai eu beaucoup de mal à préparer mon premier bloc conteneur/conteneur pour l'action. Voici ce que j'ai appris ces deux dernières heures:

Comme j’avais de graves problèmes d’importation de la InnerBlocks, j’ai décidé d’utiliser le create-guten-block toolkit. Après l'installation, je n'ai eu qu'à exécuter npx create-guten-block. Cela m'a fourni la structure des fichiers liés. Maintenant, j'ai changé le fichier src/block/block.js en code suivant:

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>
        );
    },
} );

Après avoir entré le répertoire via cli et exécuté npm run build, mon plugin était prêt et fonctionnait comme prévu.

Le css simple que j'ai utilisé pour cette première étape était à la fois pour l'avant et l'arrière:

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

Je l'ai utilisé sur une machine Windows, après avoir mis à jour le noeud vers la version la plus récente, tout a fonctionné comme prévu. Je suis satisfait du résultat et me concentre maintenant sur les paramètres avancés (couleur/image d'arrière-plan, marges, rembourrages, ...) pour ce conteneur.

Bonne codage!

3
chrisbergr

C’est ce sur quoi la seconde phase du développement de Gutenberg se concentrera. Les développeurs peuvent créer un bloc parent avec un innerblock prédéfini pour faciliter le processus de mise en page pour les utilisateurs.

Pour l'instant, vous pouvez utiliser le composant 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>
        );
    }
} );

Il existe également des options templateLock et layouts pour manipuler les options. Pour plus d'options, voir - Official Doc

3
Ashiquzzaman Kiron

Un nouveau bloc "Section" de base sera disponible dans une prochaine mise à jour de Gutenberg, destinée à servir le rôle que vous recherchez, je pense:

Ajouter un bloc de section

1
Rick Curran

Quelques plugins ont ajouté des blocs wrapper/container à Gutenberg. Editor Blocks n’est qu’un exemple.

0
Danny Cooper