Block styling no longer working after 2.9 update

Hi @cmickens84,

When you’re on the latest version, can you export the Section block and share the file with us so we can test the same on our end? This is how you can do it: https://ps.w.org/blocks-export-import/assets/screenshot-1.png?rev=2632131

Thank you!

Here’s the block export:

{
  "__file": "wp_export",
  "version": 2,
  "content": "<!-- wp:themeisle-blocks/advanced-columns {\"id\":\"wp-block-themeisle-blocks-advanced-columns-1ef048b5\",\"columns\":2,\"layout\":\"oneTwo\",\"layoutTablet\":\"oneTwo\",\"layoutMobile\":\"collapsedRows\",\"padding\":{\"top\":\"40px\",\"right\":\"40px\",\"bottom\":\"40px\",\"left\":\"40px\"},\"margin\":{\"top\":\"0px\",\"bottom\":\"0px\"},\"columnsWidth\":1200,\"horizontalAlign\":\"center\",\"align\":\"full\"} -->\n<div id=\"wp-block-themeisle-blocks-advanced-columns-1ef048b5\" class=\"wp-block-themeisle-blocks-advanced-columns alignfull has-2-columns has-desktop-oneTwo-layout has-tablet-oneTwo-layout has-mobile-collapsedRows-layout has-vertical-unset\"><div class=\"wp-block-themeisle-blocks-advanced-columns-overlay\"></div><div class=\"innerblocks-wrap\"><!-- wp:themeisle-blocks/advanced-column {\"id\":\"wp-block-themeisle-blocks-advanced-column-0d3f41b4\",\"padding\":{\"right\":\"60px\"},\"paddingTablet\":{\"right\":\"20px\"},\"paddingMobile\":{\"bottom\":\"20px\",\"top\":\"0px\",\"right\":\"0px\",\"left\":\"0px\"},\"columnWidth\":\"30.00\",\"UAGDisplayConditions\":\"responsiveVisibility\",\"UAGHideMob\":true} -->\n<div id=\"wp-block-themeisle-blocks-advanced-column-0d3f41b4\" class=\"wp-block-themeisle-blocks-advanced-column uag-hide-mob\"><!-- wp:shortcode -->\n[submenu]\n<!-- /wp:shortcode --></div>\n<!-- /wp:themeisle-blocks/advanced-column -->\n\n<!-- wp:themeisle-blocks/advanced-column {\"id\":\"wp-block-themeisle-blocks-advanced-column-efad1381\",\"columnWidth\":\"70.00\"} -->\n<div id=\"wp-block-themeisle-blocks-advanced-column-efad1381\" class=\"wp-block-themeisle-blocks-advanced-column\"><!-- wp:shortcode -->\n[facetwp template=\"tools\"]\n<!-- /wp:shortcode --></div>\n<!-- /wp:themeisle-blocks/advanced-column --></div></div>\n<!-- /wp:themeisle-blocks/advanced-columns -->"
}

Also something that is messing up the display of my pages in 2.9 is that the .innerblocks-wrap max-width is set to var(–columns-width) while the block is setting the variable as –columnswidth without the dash:

View post on imgur.com

Can you navigate to Settings > Otter, in your WordPress dashboard, and click on Regenerate Styles to see if that fixes it?

Thank you!

Thanks! That seems to have resolved the columns-width variable issue, but the mobile styling on the advanced column is still overwriting the other settings. Here’s a video to hopefully explain better because it’s a little hard for me to articulate:
https://scipp.educodesign.com/wp-content/uploads/otter-block-issue.mov

Here’s the column export when I edit mobile last:

{
  "__file": "wp_export",
  "version": 2,
  "content": "<!-- wp:themeisle-blocks/advanced-column {\"id\":\"wp-block-themeisle-blocks-advanced-column-91eb014f\",\"padding\":{\"top\":\"0px\",\"right\":\"0px\",\"bottom\":\"40px\",\"left\":\"0px\"},\"paddingMobile\":{\"top\":\"0px\",\"right\":\"0px\",\"bottom\":\"40px\",\"left\":\"0px\"},\"margin\":{\"top\":\"0px\",\"right\":\"0px\",\"bottom\":\"0px\",\"left\":\"0px\"},\"marginMobile\":{\"top\":\"0px\",\"right\":\"0px\",\"bottom\":\"0px\",\"left\":\"0px\"},\"columnWidth\":\"50\",\"className\":\"animated fadeIn slower\"} -->\n<div id=\"wp-block-themeisle-blocks-advanced-column-91eb014f\" class=\"wp-block-themeisle-blocks-advanced-column animated fadeIn slower\"><!-- wp:paragraph {\"textColor\":\"ast-global-color-8\"} -->\n<p class=\"has-ast-global-color-8-color has-text-color\">Forward-thinking leaders need accurate and timely climate data to protect their communities. Knowing what’s coming and how to respond allows for informed decisions that prevent impact and reduce risk.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph {\"textColor\":\"ast-global-color-8\"} -->\n<p class=\"has-ast-global-color-8-color has-text-color\"><strong>The South Central United States experiences more billion-dollar climate disasters than any other region in the country. </strong>These weather events are only becoming more frequent and more extreme every year, harming people, property, and economies in their wake.</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:themeisle-blocks/advanced-column -->"
}

And here’s the column export when I edit desktop last:

{
  "__file": "wp_export",
  "version": 2,
  "content": "<!-- wp:themeisle-blocks/advanced-column {\"id\":\"wp-block-themeisle-blocks-advanced-column-91eb014f\",\"padding\":{\"top\":\"40px\",\"right\":\"0px\",\"bottom\":\"40px\",\"left\":\"40px\"},\"paddingMobile\":{\"top\":\"0px\",\"right\":\"0px\",\"bottom\":\"40px\",\"left\":\"0px\"},\"margin\":{\"top\":\"0px\",\"right\":\"0px\",\"bottom\":\"0px\",\"left\":\"0px\"},\"marginMobile\":{\"top\":\"0px\",\"right\":\"0px\",\"bottom\":\"0px\",\"left\":\"0px\"},\"columnWidth\":\"50\",\"className\":\"animated fadeIn slower\"} -->\n<div id=\"wp-block-themeisle-blocks-advanced-column-91eb014f\" class=\"wp-block-themeisle-blocks-advanced-column animated fadeIn slower\"><!-- wp:paragraph {\"textColor\":\"ast-global-color-8\"} -->\n<p class=\"has-ast-global-color-8-color has-text-color\">Forward-thinking leaders need accurate and timely climate data to protect their communities. Knowing what’s coming and how to respond allows for informed decisions that prevent impact and reduce risk.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph {\"textColor\":\"ast-global-color-8\"} -->\n<p class=\"has-ast-global-color-8-color has-text-color\"><strong>The South Central United States experiences more billion-dollar climate disasters than any other region in the country. </strong>These weather events are only becoming more frequent and more extreme every year, harming people, property, and economies in their wake.</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:themeisle-blocks/advanced-column -->"
}

I initially thought a workaround would be to just make sure that I don’t save the page after editing the mobile settings, but I realized that once I switch to mobile, my desktop settings in the editor updated to whatever was set in mobile.

Thanks!
Chris

Hey @cmickens84,

Thank you for the details. It seems like it’s this issue that we’re working on fixing: https://github.com/Codeinwp/otter-blocks/issues/1077

Can you confirm just one thing if that’s only happening the editor for you or also in the front-end?

Ummm… it’s happening in the editor and then being reflected on the front-end but only when I edit the page and save if that’s what you’re asking. It doesn’t wipe the responsive padding that currently exists on pages that I haven’t edited since I just deployed the 2.9 update. Apologies if I misunderstood the question.

We just pushed a new release, can you update and see if that fixes it? @cmickens84