Tracking Block Editor
The Wonderment Tracking Block Editor is your canvas for creating the tracking block you want.
The Tracking Block Editor is accessed when you click on ‘Create Block’ in the Storefront section of the admin, or ‘Edit Block’ if you’ve previously created one.
Designs created in the editor are reflected by the App Block when added to a tracking page, and is available for headless as well with the inclusion of a single snippet.
This overview will help familiarize you with the organization of the editor, highlighting the types of actions you can take in the various locations within it.
- States
- Layout
- Global Styles
- CSS
Some styles won’t be visible unless you’re viewing the App Block on the tracking page itself. The editor cannot render existing theme styles for inputs, buttons and fonts as the Tracking Block uses your theme styles in live environments.
We’re always looking to improve our editor experience. If you have any questions or would like additional functionality, please let us know!
States
In the top navbar of the editor, there is a drop down that allows you to switch between states. All Wonderment Tracking Blocks have 2 states:
- Search
- Shipment Information
While both of these states are bundled together in a single App Block, they are both fully customizable. When you navigate between states, all changes made will persist meaning you won’t lose any work if you forgot to save.
By default, the editor opens to the Shipment Information state.
You’ll notice that your options in the left pane of the editor change when switching states. You can be confident that editing from the Layout view only effects the state you have selected, and not the other state.
Layout
The layout view is the default view when you enter the Editor, but you can navigate to it any time by selecting the upper most icon in the slim nav on the left hand side of the page.
Layout is the look and feel of your Tracking Block. A layout consists of blocks, sections, and components.
Blocks: the top level content objects that make up your tracking block. A tracking block might be a single block, such as the default Basic block layout should you disable the Current Status block, or it might consist of multiple blocks such as our multicolumn, which as a default contains blocks like the image block and line items block. Blocks are positioned based on a flex layout and are fully responsive. Some blocks can be toggled to be disabled on mobile.
Sections: the children of blocks. These are groupings of related components that together serve a purpose. Sections are the primary access point to settings you will likely want to customize. By organizing components into sections, we’re able to ensure editing the tracking block is intuitive when searching for that setting on your mind.
Components: components are the individual element that together, form a section. Components are the atomic unit of a tracking block and quite often represent a specific piece of information or media. Most settings exist at the component level.
Global Styles
Global Styles is the second button in the slim nav on the outer left of the editor. This is where you can set styles that aren’t block or section specific, such as colors related to shipment status, provide additional CSS classes for inputs and buttons if the block doesn’t pick them up automatically, or the toggle for ‘Powered by Wonderment’.
CSS
The bottom-most button in the slim nav on the outer left of the editor, this reveals a text editor where you can write CSS to customize your tracking block beyond what the editor enables through available settings.
To view a list of class names used by the tracking block, click here.
Note:
Saving changes ensures that they’re there when you leave and return to the editor. Publishing changes pushes them to the app block. Make sure you publish when you’re ready to see your changes live!
