Expand Block not working

Hi @sophid!

We changed very little in the expand block between the current version and the previous version. Ever since we introduced it, both its hidden and displayed parts are deliberately displayed in the editor whenever it’s selected to facilitate adding content to both of them. Deselecting the block should hide the hidden part.

In the frontend, the expand block has its usual behavior of hiding the hidden content until the “show more” button is clicked.

Hi @alexius08 ,
Thank you for the reply.
Yes, I understand that both the “show more” and “show less” are displayed in the editor, but my problem is that in FRONT END, they are both visible too along with the content that was supposed to be hidden (text and images that are underneath the “show more”.

See images in previous post – in the list of blocks the breakdown is Expand/Expand portion/the Content/Expand Portion.
Before the update this worked. But it worked better when i could add the content AFTER the 2 Expand Portion iterations (one for show more and one for show less). Now, I cannot add the text after. Either before (so at the very top) or in the middle (which doesn’t work anymore).

It would be helpful if there was a tutorial for use.

The code below works very well – BUT I CANNOT REPLICATE IT UNLESS I USE THE CODE EDITOR:

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"20%"} -->
<div class="wp-block-column" style="flex-basis:20%"><!-- wp:post-featured-image /--></div>
<!-- /wp:column -->

<!-- wp:column {"width":"80%"} -->
<div class="wp-block-column" style="flex-basis:80%">

<!-- wp:ub/expand {"blockID":"b20c9030-5b77-467f-9798-98ca847ea380"} -->
<!-- wp:ub/expand-portion {"clickText":"read more","displayType":"partial","parentID":"b20c9030-5b77-467f-9798-98ca847ea380"} /-->

<!-- wp:ub/expand-portion {"clickText":"show less","displayType":"full","isVisible":false,"parentID":"b20c9030-5b77-467f-9798-98ca847ea380"} -->

<!-- wp:tadv/classic-paragraph -->
TEST CONTENT HERE
<!-- /wp:tadv/classic-paragraph -->

<!-- /wp:ub/expand-portion -->
<!-- /wp:ub/expand --></div>

<!-- /wp:column --></div>
<!-- /wp:columns -->

This code, which is what I always get now, doesn’t work:

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"20%"} -->
<div class="wp-block-column" style="flex-basis:20%"><!-- wp:post-featured-image /--></div>
<!-- /wp:column -->

<!-- wp:column {"width":"80%"} -->
<div class="wp-block-column" style="flex-basis:80%">

<!-- wp:ub/expand {"blockID":"fb1b6831-bc83-4da1-8ee9-069f92e6e8f4"} -->
<!-- wp:ub/expand-portion {"clickText":"show more","displayType":"partial","parentID":"fb1b6831-bc83-4da1-8ee9-069f92e6e8f4"} -->
<!-- wp:tadv/classic-paragraph -->
<p>TEST CONTENT HERE</p>
<!-- /wp:tadv/classic-paragraph -->
<!-- /wp:ub/expand-portion -->

<!-- wp:ub/expand-portion {"clickText":"show less","displayType":"full","parentID":"fb1b6831-bc83-4da1-8ee9-069f92e6e8f4"} /-->
<!-- /wp:ub/expand --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

• This reply was modified 3 years, 1 month ago by Sidd.
• This reply was modified 3 years, 1 month ago by Yui. Reason: formatting

location to Add Classic paragraph block to Expand block
Content added – See BLOCKS list view
FRONT END – all content STILL visible

Hi @sophid! Thanks for further elaborating on your issue. I think the issues here are:

1. You’re unable to add blocks to the “show less” section, and
2. Instead of simply showing the “show less” section, you want it to replace the “show more” section of the expand block.

We’ll be introducing a fix for #1 in the next version to make adding blocks to both of them easier. However, we won’t be implementing #2 into the plugin itself to maintain the original functionality of the block.

If you still want the expand block to work that way in your site, please install a plugin for inserting a custom Javascript file into the page and use the following code:

Array.prototype.slice
	.call(document.getElementsByClassName("ub-expand-toggle-button"))
	.forEach((instance) => {
		const newTogglePanel = () => {
			const blockRoot = instance.closest(".ub-expand");
			blockRoot
				.querySelector(".ub-expand-partial .ub-expand-toggle-button")
				.classList.toggle("ub-hide");

			const defaultPart = Array.prototype.slice
				.call(blockRoot.children)
				.filter((child) => child.classList.contains("ub-expand-partial"))[0];

			defaultPart.classList.toggle("ub-hide");

			if (!defaultPart.classList.contains("ub-hide")) {
				Array.prototype.slice
					.call(document.getElementsByClassName("ub_image_slider"))
					.forEach((slider) => {
						const swiper = new Swiper(
							<code>#${slider.id}</code>,
							JSON.parse(slider.dataset.swiperData)
						);
					});
			}

			Array.prototype.slice
				.call(defaultPart.querySelectorAll(".wp-block-embed iframe"))
				.forEach((embeddedContent) => {
					embeddedContent.style.removeProperty("width");
					embeddedContent.style.removeProperty("height");
				});
		};

		instance.addEventListener("click", newTogglePanel);
	});

Depending on the plugin you use for this, you might need to wrap the code above inside <script> tags.

Please let us know how it goes.

thank you for the reply @alexius08 ,
However, if i add the block between the show more and show less sections, THE CONTENT IS STILL ALWAYS VISIBLE – the pics and code prove that.

PLEASE, where should i click in order to add a block so that it’s not initially visible, but becomes so upon clicking the “show more” link?? I was able to do so before the update!!

I cannot click to add a block before the “show more” section, or after the “show less” section, which was working before and actually hid the content. If i click to add in the middle, it simply doesn’t work – content is always visible.

see pic:
https://artintra.net/wp-content/uploads/2021/10/ULTBlocks00-1.jpg

I disabled other plugins to check whether there’s a conflict, but unfortunately, there’s nothing

• This reply was modified 3 years, 1 month ago by Sidd.
• This reply was modified 3 years, 1 month ago by Sidd. Reason: add explanatory pic
• This reply was modified 3 years, 1 month ago by Sidd.

Hi @sophid! For now, upon inserting a new Expand block, click on “show more” to reveal the option to add another block within the “show more” part of the block (right above it), and click on “show less” to do likewise for that part.

For reference:
Here’s how the expand block would look like when it’s first inserted.
Clicking on “show more” should make the block look like this.
If you didn’t add anything to the “show more” part, clicking on “show less” should make the block look like this.

The next version will add dedicated buttons for adding blocks to the expand block to eliminate the need for these workarounds.

thank you very much @alexius08 for the detailed explanation – it really helped! Looking forward to the next version.

Have a great day!