[Resolved] Cannot move sorting controls within Gutenberg

[Author]

Posts

[Daniel Stadeli]

I am trying to: Get my Search filter area to look neat

Link to a page where the issue can be seen: hidden link

I expected to see: Sorting controls right of Submit + Reset button

Instead, I got: shortcode displays on the front end

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

It's not clear from the screenshots how you are adding columns to the search filters section of your View. When you moved the sorting controls, they are still within the search filter section?

It would help if you had a screenshot of the block navigation for the View from the top of the page to see the hierarchy of what block is added where (see example screenshot).

[Daniel Stadeli]

Nigel,

I made a video of my problem and also attached screenshots 3+6, but its hard to understand those...

hidden link

Screenshots 4+5 show another issue I mention in the video. When I go into my page the next day, the search field for relationship search gets messed up somehow and I need to redo this every time...

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi,

Thank you for sharing these details.

During testing on my website, I was able to reproduce this behavior and the "Sorting Controls" block needs to be within the "View Output" block, in order to function properly.

To make it show inline with the search form, you can follow these steps:

1. In the "View Search" block, you can include a "Container" block and then a "Grid" block inside it and set it to have two columns.

In the first column, you'll move the search field blocks and in the second one, you can move the search and reset button blocks.
( screenshot: search-fields-container.png )

Also, attach a special ID for example "search-container", to this container, so that it can easily be targeted through custom CSS.
( screenshot: container-ID-example.png )

2. Likewise, in the "View Output" block, you can include another "Container" block, assign a "sorting-container" ID to it and the then move the "Sorting Controls" block in this container.
( screenshot: sorting-filter-container.png )

3. Once this structure is ready, you'll need to add some custom CSS code in this view, to make these two newly added container blocks, show inline.

Example:

@media (min-width: 800px) {

#search-container {
width: 66%;
float: left;
}

#sorting-container {
float: right;
width: 33%;
clear: right;
}

.js-wpv-loop-wrapper {
float: none;
clear: both;
}

}

I hope this helps.

regards,
Waqar

[Daniel Stadeli]

Hi Waqar,

I made a video for you to see some issues I have with the Block editor.
hidden link

a) One thing is that the Reset Button does not do anything.
b) as soon as I select a filter setting from the drop down Filter, the class button on the search and reset buttons is lost and it reverts back to Toolset default rather than site default.

This is the other ticket I reference in the video: https://toolset.com/forums/topic/cannot-assign-css-class-to-seach-and-reset-button/

Access to this site is still granted for you guys (login details are set in another ticket)

Thanks!
Daniel

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi Daniel,

Thanks for writing back and for sharing your valuable feedback. I'll make sure to share these points with the concerned team.

I see there are 3 main points of concern here:

1. Search form's responsiveness:

If you'll check the custom CSS code from my last message, you'll see that it is wrapped in a media query so that it is only effective for screens with at least 800px width.
( ref: hidden link )

Using the same approach, you can include some more CSS code to remove the extra padding around the sorting controls, on smaller screens:

@media (max-width: 799px) {
 
.wp-block-toolset-blocks-container {
padding: 10px 0px !important;
}
 
}

And to hide the spacer blocks, for screen widths where the forms controls are stacked on top of each other:

@media (max-width: 599px) {
 
.wp-block-toolset-blocks-container .wp-block-spacer {
display: none !important;
}
 
}

2. Issue with the Reset button:

I've done some tests and it seems that the reset button's functionality is dependant on the default class "js-wpv-reset-trigger".

In the other ticket, I shared some script to addd new classes to buttons and remove the default ones.
( https://toolset.com/forums/topic/cannot-assign-css-class-to-seach-and-reset-button/#post-1806825 )

You can exclude this "js-wpv-reset-trigger" class from that code snippet, so that it is not removed and reset button will keep functioning.
( screenshot: hidden link )

3. Lost custom classes for the buttons:

Again, the custom CSS script from the other ticket has this first line:

jQuery( document ).ready(function() {

It executes whenever page reloads, but not when the search form or results are updated through AJAX (i.e. without reloading the page).

To make it execute also with the AJAX based changes, you can replace that first line with:

jQuery( document ).on( 'js_event_wpv_pagination_completed js_event_wpv_parametric_search_triggered js_event_wpv_parametric_search_form_updated js_event_wpv_parametric_search_results_updated ready', function( event, data ) {

regards,
Waqar