[Resolved] The Views layout completely changed when used

[Author]

Posts

[GinaM9227]

Tell us what you are trying to do?

I created a Views using the new Block editor to replace an old Views using the Classic Editor, see attached the screenshot of what it's supposed to look like when I created it.

However, when I use it where I need it, the grid layout and formatting is completely lost - see attached what it looks like now.

I am not sure why all the layout and formatting was lost when I started using it.

Is there any documentation that you are following?
Creating Views using the New Block Editor

Is there a similar example that we can see?
This is the old one: hidden link
This is the new one: hidden link

What is the link to your site? hidden link

[Luo Yang]

Hello,

Since there isn't your website credentials, I am not sure how do you setup the view's block.

I suggest you try to follow our document to setup the view block with grid layout:
https://toolset.com/documentation/getting-started-with-toolset/create-and-display-custom-lists-of-content/

If you need more assistance for it, please provide you website credentials in below private message box, I need to test it in a live website, thanks

[Luo Yang]

Thanks for the details, here are what I found in your website:
1) You are using blocks editor to design the page "test" and view "test-view-1":
hidden link

Above page works fine in front-end:
hidden link

2) But in the problem page:
hidden link

It is designed with Elementor editor, it is not using blocks editor, so it won't work as expected, Elementor editor does not support blocker editor's feature.

I suggest you design above problem page with blocks editor and test again, or you can use page "test" as home page.

[GinaM9227]

I believe there is a way to use Views on a Block without such a distortion in the formatting. I was using 2 other Views before using this one and they both looked fine. Only this one has an issue - Is there another way to use Views on a Block?

A related question is that this Views was created on a Test page. However, this test page does not appear on the list of pages and can only be edited on Toolset.

- If I have to use this page as a Home page, how do I make this page show up on the same page as the Other WordPress pages.

- Because the page 'Test' does not show up with the regular pages, I cannot even change the name of the Page. How do I change the name of the Page and of the Views? I was not able to find any setting for this simple action.

[Luo Yang]

It is not a good idea to integrate Elementor editor with Blocks editor, there will be some conflicts, and conducts unexpected result.

If you want to design the page with Blocks editor, then use Blocks editor instead of Elementor editor.

For the new questions, I have checked it in your website:
1) I can find the page "test" in page list without any problem:
hidden link

2) And I can change the page title without any problem:
hidden link

Is there anything missing?

[GinaM9227]

Your explanation does not clarify what are the differences between using Blocks and how it is different from the Classic one..other than it doesnt seem to work with Elementor while the Classic one does.

Re Question 2 - how do you change the name of the Views itself - I dont see a way to change the name of it. I am not referring to the Page

[Luo Yang]

View block and view from classic editor loads the CSS styles in different ways, View block is using WordPress Blocks (Gutenberg) editor to load the CSS styles, but view from classic editor does not, it outputs the CSS codes directly, so view from classic editor will be able to work in Elementor editor, but View block requires Blocks editor.

Q2) For example, you can edit the page:
hidden link
Find and select view block, in the sidebar, change view's name, see screenshot view-block.JPG

[GinaM9227]

My issue is resolved now. Thank you!