Need to improve show/hide function on backend

[Olekrut]

Description

IDK, how it should work, but hidden blocks should not influence to view on backend

Maybe, hidden blocks should disappear at all ( maybe need left some marker) , and in container's show/hide tab should appear references to included hidden blocks

Other plugins or websites examples

No response

How to implement it

No response

Other information

No response

[dosubot[bot]]

🤖

Hey there, @Olekrut! Great to see you diving into another challenge with us. Let's tackle this one together.

Thank you for your request. I understand that you want to improve the show/hide function on the backend so that hidden blocks do not influence the view.

To achieve this, you can use the CSS property display: none; for the hidden blocks. This property ensures that the element will not be displayed at all (it has no effect on layout space). Unlike overflow: hidden;, it completely removes the block from the layout flow. Here's how you can modify the SCSS code:

.maxi-search-block {
	align-items: center;

	&--icon-left {
		input.icon-reveal {
			margin-left: -25px !important;
		}
	}
	&--icon-center {
		.maxi-search-block__input--hidden {
			margin-right: 0 !important;
			margin-left: 0 !important;
			padding-left: 0 !important;
			padding-right: 0 !important;
			border-left-width: 0 !important;
			border-right-width: 0 !important;
			display: none; // Add this line
		}
		input.icon-reveal {
			margin-right: -25px !important;
		}
	}

	&--icon-right {
		input.icon-reveal {
			margin-right: -25px !important;
		}
	}
}

In this code, the display: none; property is added to the .maxi-search-block__input--hidden class. This will ensure that when the block is hidden, it does not affect the layout of the other elements on the page. You can find this code in the src/blocks/search-maxi/editor.scss file.

Regarding the current implementation of the show/hide function in the maxi-blocks codebase, it is found in the waitForMenuBlocks().then(response => {...}) section of the code. This function waits for the menu blocks to load and then applies certain styles based on the active style card and block style. The show/hide function is specifically called with the showHideHamburgerNavigation() function. This function is imported from the ../../editor/style-cards/utils module. You can find this code in the src/extensions/dom/dom.js file.

Unfortunately, I couldn't find any known issues or bugs related to the show/hide function in the maxi-blocks codebase. If you have more specific details about the issue you're experiencing, it would be helpful to better understand and address the problem.

Sources

• src/blocks/search-maxi/editor.scss
• src/extensions/dom/dom.js

About Dosu

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[elzadj]

https://github.com/maxi-blocks/maxi-blocks/issues/5618