When you work with Velo in Editor X there are a few changes to the way your code works, as compared to the Wix Editor.
It is recommended that whenever possible you use the breakpoint feature in Editor X to control your elements’ display properties. You should only use APIs to control an element’s display properties when it relates to your site’s functionality, not the way the site is being viewed.
For example, let’s say you have a form submit button on your site. You may want to only display the button when the form is completed properly. In that case you may want to use Velo APIs to control when the button is displayed.
Now let's say that you have a print button that you only want to appear on desktop browsers and not on mobile devices. Choose Don't Display for the button on the mobile device breakpoint. The Velo show() and hide() functions will toggle the display of the button on the desktop breakpoint but not on the mobile device breakpoint.
Styles. You can use the Velo Style APIs to set styles in Editor X. However, the Style API only returns style property values that were set programmatically in Velo. It does not return values based on styles that were set in Editor X at design time.
Show. If Don’t Display is set for an element in a given breakpoint in Editor X, you cannot display the element using the show() or expand() Velo functions for that breakpoint.
Note that the show() and expand() functions still set the hidden and collapsed properties of the element tofalse even though the element is not visible.
The show() and expand() functions only display elements that were hidden or collapsed if the element is set to display in the Editor X breakpoint.
Hide. You can use Velo to hide all elements that are displayed in Editor X.
Collapse/Expand. Editor X offers additional layout tools over the Wix Editor to control element interaction along the y-axis. These tools cause different behaviors when collapse() or expand() is applied to an element. In the Wix Editor, elements push and pull other elements up and down the y-axis when collapse() and expand() are applied. In Editor X, you can choose from a number of tools to control the the y-axis behavior of elements.
For example:
collapse() is called for a contained element.expand() is called, the container shows, hides or scrolls the content according to the overflow setting.When an element is not controlled by a layout tool, the collapse() and expand() functions behave in the same way as the hide() and show()functions.
isVisible. The isVisible property indicates an element's visibility only if the element is set to display for the breakpoint. If the show() or expand() was applied to the element and the element is set to Don’t Display, the element is not displayed but the isVisible property is still true.
The Editor X layout will react to changes in the size of an element due to data binding. When the content of a text element grows or shrinks, the other elements in the stack or container react according to the max and min height, docking, and overflow settings that you chose.
Master sections, including headers and footers, can be deleted from a given page. When a master section had been deleted from a page, any site code or page code that references an element contained in the master section will stop running on that page. Make sure that the master section will always be displayed before you add code to its elements. Choosing Don't Display for a master section in specific breakpoint will not stop the code from running in that breakpoint.