[Resolved] Add Search into one column in a 2 column grid layout

[Author]

Posts

[AlimB3245]

Tell us what you are trying to do?
I have in the past achieved this setup following a tutorial on toolset and this is the result

hidden link

However I am trying to duplicate the same thing here

hidden link

and am unable to do so.. The problem I am facing is that in the past I had an option to drag and drop the search section within the GRID CELL but in the current version of wordpress I've been told that the option does not exist and it's something to do with Core WordPress and hence I should use the REUSABLE BLOCK option to copy/move a block from one section to another.. however I have been trying hard to do this and I just can't figure out how to do this.. Would appreciate some sort of hand-holding on this one as I've tried to do this over and over and the either it's complicated to create a REUSABLE BLOCK and sometimes when I've created one, it's complicated to insert into the GRID CELL..

Also during this process I seem to have created multiple UNTITLED REUSABLE BLOCKS.. please advise on how to delete those too..

Is there any documentation that you are following?
https://toolset.com/forums/topic/drag-and-drop-a-block/

Is there a similar example that we can see?

What is the link to your site?
hidden link

[Christian Cox]

It should still be possible to drag the search filters and search results into separate grid cells in the current version of WordPress. If you're having trouble, I can log in and take a closer look. To delete old reusable blocks that you no longer need, you can go to this hidden blocks dashboard URL in WordPress: https://yoursite.com/wp-admin/edit.php?post_type=wp_block

[Christian Cox]

Okay I have made some adjustments to the Issues archive and you can see now the filters are in the left column of a two-column layout. The columns are split 1/3 (left) and 2/3 (right). I created a screen recording for you to see how I did this with drag-and-drop in the Block Editor:
https://drive.google.com/file/d/1_xiWhWsVdDoIfeZfE8QT5fzdZ4ynmovt/view?usp=sharing

The general steps were:
- Create a new Grid block with a 1/3 - 2/3 split, left to right.
- Use the Block Navigator menu to select the results block.
- Click and hold the arrow icons above the results block to initiate drag-and-drop.
- Drag the results block into the 2/3 column of the new Grid.
- Use the Block Navigator menu to select the filters block.
- Click and hold the arrow icons above the filters block to initiate drag-and-drop.
- Drag the filters block into the 1/3 column of the new Grid.
- Now the left/right columns are set. I found an extra Grid block in your design so I deleted it.

Here's another demo showing more about this. WordPress made some changes in the block editor since this was recorded, so the toolbar above each block now looks slightly different, but you can get the idea.
https://toolset.com/course-lesson/creating-a-custom-search/#setting-up-the-view-search-and-results-side-by-side

Two more things you should know:
- Be sure "Top toolbar" is disabled in the Block Editor if you want to use drag-and-drop. See 1798265-top-toolbar.png.
- When you are designing a grid of results, we recommend you use a full-width editor area. This gives you more space to be able to see what is going on in the editor. See 1798265-full-width-editor.png.

[AlimB3245]

Hi Christian

That was brilliant!.. I had no idea that the move up and down arrow could be used to drag and drop.. in fact I had created a ticket for this and I think the supporter may have been confused with my query and told me that it was not possible..

Here's the ticket.. I'd suggest you delete/update this ticket as someone searching a similar issue might get misled...

https://toolset.com/forums/topic/drag-and-drop-a-block/

Also I'll close this ticket as it's resolved but I had one quick query.. I am getting this message in my console when I visit the page you fixed.. hidden link

Mixed Content: The page at 'hidden link' was loaded over a secure connection, but contains a form that targets an insecure endpoint 'hidden link'. This endpoint should be made available over a secure connection.

Is the message because of something I did or is it a toolset thing? Please advise..

Regards,
Alim

[Christian Cox]

Yes it looks like there was some miscommunication there. I updated the resolution summary in the other ticket so it's clear that drag and drop is still possible by clicking and holding the arrow icons.

Is the message because of something I did or is it a toolset thing? Please advise..
Check the WordPress URL and Site URL in wp-admin > Settings > General to be sure you have HTTPS and not HTTP in both URLs. If this does not resolve the issue, I can split a new ticket for you so we can investigate in more detail.

[AlimB3245]

Hi Christian

Thanks..:-).. you were right.. the siteURL was http:// instead of https:// ... once I fixed that the issue was resolved.

Regards,
Alim