Deafault settings for container spacing conficits with new accordion

Damn,
the problem is that site is mostly done, and all blocks use ems by default and if I turn this off it is all going to break. 🙁

I rarely use px, so I used this to make it more efficient to build.
And the site in question is huge. 🙁

Any chance this keeps working but you advise not using it in the future?

PS If one could choose preffered units per block using some UI, I wouldn’t need this.

Hello @tom

I am trying to play with the variants. So, it is easy to do this with simple blocks, but Accordion is a variant itself on the container block, and it is a composite. So I went inside the pluginc code to see how you guys have done this. So I managed to pull this off with this code:

const template = [ [ 'generateblocks/container',
	{
		variantRole: 'thisbit-accordion-item',
		accordionItemOpen: true,
	},
	[
		[ 'generateblocks/button',
			Object.assign( {},
				generateBlocksPro?.blockStyles?.button,
				iconAttributes,
				{
					text: 'Accordion title',
					variantRole: 'thisbit-accordion-toggle',
					buttonType: 'button',
					backgroundColor: '#ffffff',
					textColor: '#000000',
					backgroundColorHover: '#ffffff',
					textColorHover: '#222222',
					backgroundColorCurrent: '#fafafa',
					textColorCurrent: '#000000',
					alignment: 'left',
				}
			),
		],
		[ 'generateblocks/container',
			{
				variantRole: 'thisbit-accordion-content',
				paddingTop: '20',
				paddingRight: '20',
				paddingBottom: '20',
				paddingLeft: '20',
				marginBottom: '20',
				backgroundColor: '#fafafa',
			},
			[
				[ 'core/paragraph',
					{
						content: 'Accordion content.',
					},
				],
			],
		],
	],
] ];

wp.domReady( () => {
		wp.blocks.registerBlockVariation(
			'generateblocks/container',
			{
				title: 'Thisbit Accordion',
				name: 'thisbit-accordion',
				icon: 'list-view',
				attributes: {
					variantRole: 'thisbit-accordion',
					accordionTransition: 'slide',
				},
				innerBlocks: template,
				isActive: ( attrs ) => 'thisbit-accordion' === attrs.variantRole,
			}
		);

		wp.blocks.registerBlockVariation(
			'generateblocks/container',
			{
				title: 'Thisbit Accordion Item',
				name: 'thisbit-accordion-item',
				scope: [ 'block' ],
				attributes: {
					variantRole: 'thisbit-accordion-item',
				},
				isActive: ( attrs ) => 'thisbit-accordion-item' === attrs.variantRole,
			}
		);

		wp.blocks.registerBlockVariation(
			'generateblocks/container',
			{
				title: 'Thisbit Accordion Content',
				name: 'thisbit-accordion-content',
				scope: [ 'block' ],
				attributes: {
					variantRole: 'thisbit-accordion-content',
				},
				isActive: ( attrs ) => 'thisbit-accordion-content' === attrs.variantRole,
			}
		);

		wp.blocks.registerBlockVariation(
			'generateblocks/button',
			{
				title: 'Thisbit Accordion Title',
				name: 'thisbit-accordion-title',
				scope: [ 'block' ],
				attributes: {
					variantRole: 'thisbit-accordion-toggle',
				},
				isActive: ( attrs ) => 'thisbit-accordion-title' === attrs.variantRole,
			}
		);

		wp.blocks.registerBlockVariation(
			'generateblocks/container',
			{
				title: 'Thisbit Accordion Title',
				name: 'thisbit-container-accordion-toggle',
				scope: [ 'block' ],
				attributes: {
					variantRole: 'thisbit-accordion-toggle',
				},
				isActive: ( attrs ) => 'thisbit-accordion-toggle' === attrs.variantRole,
			}
		);
	
} );

This seems to do it. Hoever the interactivity does not work. What would be the way to make sure that my variant pulls the appropriate js that handles clicking and all.

Thanks very much

Thanks @tom this did it. 🙂
So far this looks pretty elegant.

Now I have to explore the documentation to see how to set the settings to the defaults and add my custom styles to it as well. That should be fun.

One drawback of this approach that I see for now is that if I change CSS that styles the block after I have used it allready. And then later change some styling it applyies only to new blocks I add to the pages because it is part of the block itself. Easy way out of this would be to do that via custom css in a sheet, but then that loads on each page reardless if I use the block or not.

Perhaps a better way would be to use a block.json?

Anyways, I can take it from here. Thanks.