Kadence and Events Archive Block Layout Breaks

Hi?@miiat,

Thanks for reaching out!

Please share the direct URL to the page you’re having issues with. Please do not share any credentials, this is for us to follow the?WordPress Forum Guidelines.

For us to understand and learn more about your setup, could you provide the following version of the following?

1. PHP
2. WordPress
3. The Events Calendar
4. Theme
5. Kadence
   
   Best,
   Iris

Hi @iirvin!

Thanks for your response! Is there a way of not sending the url publicly as the site is not meant yet to be published?

The information that you needed are following (the problem was also in the previous version of events calendar):

1. 8.2.15
2. 6.4.3
3. 6.3.4
4. Blockskit (with some customisations)
5. 3.2.26

–Miia

Hi @miiat

Thanks for your response.

To assist you better, may I please request that you provide detailed steps on how we can replicate the issue on our side? This will help us to investigate and check the issue more efficiently.

Also, I would like to confirm, are you referring “Kadence Blocks – Gutenberg Blocks for Page Builder Features” plugin for your Kadence Row block? Looking forward to your reply.

Hi,

I am referring to Kadence Blocks plugin.

I have as the events-archive template set as following

<!-- wp:template-part {"slug":"header","theme":"test","tagName":"header"} /-->

<!-- wp:tec/archive-events /-->
<!-- wp:template-part {"slug":"footer","theme":"test","tagName":"footer"} /-->

And in footer we have:


<!-- wp:kadence/rowlayout {"uniqueID":"899296_978a20-69","columnGutter":"wider","customGutter":[64,"",""],"colLayout":"equal","bgColor":"#004129","overlay":"transparent","overlayFirstOpacity":1,"overlayBgImg":"xxxxx/wp-content/uploads/2020/05/Shape-Copy-10.png","overlayOpacity":7,"overlayBlendMode":"normal","align":"full","inheritMaxWidth":true,"bgColorClass":"heading","kbVersion":2,"metadata":{"name":"S?hk?posti"}} -->

<!-- wp:kadence/column {"borderWidth":["","","",""],"uniqueID":"899296_2ebc75-1c","textColor":"#ffffff","kbVersion":2} -->

<div class="wp-block-kadence-column kadence-column899296_2ebc75-1c"><div class="kt-inside-inner-col"><!-- wp:heading -->

<h2 class="wp-block-heading">Email list</h2>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>Lorem Ipsum</p>

<!-- /wp:paragraph --></div></div>

<!-- /wp:kadence/column -->

<!-- wp:kadence/column {"id":2,"borderWidth":["","","",""],"uniqueID":"899296_02baaf-1b","justifyContent":["center","",""],"verticalAlignment":"middle","kbVersion":2,"kadenceBlockCSS":"selector .gform_wrapper{\n? min-width:100%;\n}"} -->

<div class="wp-block-kadence-column kadence-column899296_02baaf-1b"><div class="kt-inside-inner-col"><!-- wp:gravityforms/form {"formId":"1","title":false,"description":false,"ajax":true,"theme":"orbital","inputSize":"lg","inputPrimaryColor":"#faaf3f","buttonPrimaryBackgroundColor":"#faaf3f"} /--></div></div>

<!-- /wp:kadence/column -->

<!-- /wp:kadence/rowlayout -->

The footer works in other pages like event page, but not events archive. The layout breaks totally – looks like kadence is not working together with this widget.

Hi @miiat

Thanks for your responsne.

After conducting a more thorough investigation, it appears that the problem is not with Kadence Blocks, as initially suspected. Rather, it seems that the FSE theme you are currently using is not yet fully compatible with our plugin, which may be causing the issue.

I hope this helps. Please let me know if you have further questions or concerns.

Hi @miiat

One of my colleagues tested the snippet you provided using the Blockskit theme, and it seems to be working correctly on his side. Could you provide a screenshot or screen recording of how we can replicate the issue?

In addition, could you also try using the Blockskit theme without the customizations and see if that makes a difference?

I now tried the blockskit-theme without any customisations and only kadence and events-calendar plugin active and can still reproduce this. This is only affecting the archive-page, not single event page (or any other page).

I can reproduce the layout breaking it like this
* Target is to have two columns in a row. Both columns contain headings with a numbers 1 and two, and they should be aligned horisontally.
like [1 2] [1 2].


1. Insert inside the footer-component, before the only group this code

<!-- wp:kadence/rowlayout {"uniqueID":"224396_0aa8d9-22","colLayout":"equal","kbVersion":2} -->
<!-- wp:kadence/column {"borderWidth":["","","",""],"uniqueID":"224396_621b9e-dd","direction":["horizontal","",""],"kbVersion":2} -->
<div class="wp-block-kadence-column kadence-column224396_621b9e-dd kb-section-dir-horizontal"><div class="kt-inside-inner-col"><!-- wp:heading -->
<h2 class="wp-block-heading">1</h2>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2 class="wp-block-heading">2</h2>
<!-- /wp:heading --></div></div>
<!-- /wp:kadence/column -->

<!-- wp:kadence/column {"id":2,"borderWidth":["","","",""],"uniqueID":"224396_83a7ed-32","direction":["horizontal","",""],"kbVersion":2} -->
<div class="wp-block-kadence-column kadence-column224396_83a7ed-32 kb-section-dir-horizontal"><div class="kt-inside-inner-col"><!-- wp:heading -->
<h2 class="wp-block-heading">1</h2>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2 class="wp-block-heading">2</h2>
<!-- /wp:heading --></div></div>
<!-- /wp:kadence/column -->
<!-- /wp:kadence/rowlayout -->

End result for me is that in frontpage, and single event the columns are horizontal both in admin and front end – but in archive page where there’s header, archive block and footer – the columns are horizontal in the admin, but vertical and unstyled in front end.

If I move footer element to be before the archive-events component the styling works.

When I compare the css of the elements, it seems that element with classes

kt-row-column-wrap kt-has-2-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top

Is missing styles that are generated to the element if it is on top the event-archive component. Missing styles are if I am not mistaken dynamically generated:

.kb-row-layout-id224396_0aa8d9-22 > .kt-row-column-wrap {
    column-gap: var(--global-kb-gap-md, 2rem);
    row-gap: var(--global-kb-gap-md, 2rem);
    padding-top: var(--global-kb-spacing-sm, 1.5rem);
    padding-bottom: var(--global-kb-spacing-sm, 1.5rem);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

It seems that whole inline style block kadence_blocks_css-inline-css is missing when the archive-elements block is included.

Hi @miiat

Thank you for taking the time to provide us with more information regarding this issue. It is greatly appreciated. I will make sure to share your feedback with the team and keep you updated on any progress or developments.

Thank you for your patience and understanding.