WordPress : Plusieurs zones de contenu avec Gutenberg – Zones transparentes au milieu du contenu

J’essaie de trouver une solution à une mise en page que j’ai été chargé de construire à l’aide de blocs ‘Gutenberg’. A ma connaissance, il ne peut y en avoir qu’un the_content();par page.

La mise en page que j’essaie de réaliser se trouve ci-dessous:

Le problème que j’ai est la zone de répartition des citations. Ceux-ci doivent être transparents pour que l’image fixe en arrière-plan puisse être vue. Mais d’après ce que je peux comprendre, cela nécessiterait de sortir de la zone de contenu.

Ce qui a été essayé

Une solution précédente qui a été testée consiste à entourer chaque bloc d’un contenant div. Cela divaurait été background-color: white;appliqué par défaut, puis défini sur transparent pour blockquote. Cela a fonctionné jusqu’à un certain point, mais a fait des ravages absolus avec les blocs et la façon dont ils interagissent les uns avec les autres.

Quelqu’un a-t-il une solution possible pour cette mise en page? Je crains de ne pas voir le bois pour les arbres et de trop compliquer les choses.

Je cherche des solutions qui utilisent Gutenberg, je ne cherche pas une solution qui nécessite des plugins

Solution n°1 trouvée

Les blocs imbriqués sont la solution, et depuis que vous avez créé votre question, l’éditeur de blocs s’est suffisamment amélioré pour que votre conception puisse être créée avec des blocs de groupe et de couverture, avec des règles d’espacement via des styles globaux. Aucun code n’est nécessaire.

Solution n°2 trouvée

Pour aujourd’hui, Gutenberg ne fournit pas container blockspar défaut. Par conséquent, soit vous avez besoin d’un plugin tiers comme Atomic Blocks, soit vous écrivez le vôtre.

Mais vous pouvez faire un petit hack. Téléchargez un png transparent dans votre médiathèque. Utilisez ensuite le cover blockpour chaque section. Donnez cover blockà chaque png transparent une image et écrivez votre contenu ci-dessus. Pour vos sections avec un fond blanc, ajoutez simplement une couleur de superposition blanche dans les paramètres de bloc et une opacité de fond de 100%. Peut-être que le texte ne ressemble pas à ce que vous attendiez, vous pouvez donc ajouter une classe CSS au bloc et le faire avec CSS.

J’espère que ça aide.