Visual Builder

Visual Builder layout model

Added a data model for Visual Builder experiences and sections, separating layout structure from content data. This model provides greater flexibility and supports current and future content-creation use cases.

Layout structure – A data model describes hierarchical layout structures, initially limited to predefined types. This layout is stored separately from content data, with leaf nodes referencing specific Element properties.
Content type settings –
- An AllowLayout field on content type controls the presence of a _Layout property definition and indicates if a content type is available in Visual Builder. This field is applicable only to Page or Block content types.
- An AllowAdditionalData field on content type controls the presence of a _AdditionalData property definition, enabling additional data elements for individual content instances. This field is available only when AllowLayout is set. These Layout and AdditionalData properties are not visible in the administration UI or during content editing.
Pre-defined content types – CMS includes pre-defined blank experience and section content types with AllowLayout and AllowAdditionalData enabled.
Content editor capabilities – Editors can create Visual Builder experiences and sections from scratch, add layout structures, and incorporate sections and elements into these structures.
Data preservation – Layout and associated settings are preserved during content type, content item, and copy export, import, and copy operations.

Streamlined toolbar in Visual Builder

The View and Preview buttons are no longer displayed in the toolbar when the Visual Builder is running, removing redundant functionality, as Visual Builder already provides integrated preview capabilities.

Preserve layout information for content items

Content items containing Layout and AdditionalData information are fully preserved during transfer operations (Export, Import, Copy).

Copying a content item with Layout results in a duplicate that retains all Layout information.
Exported content items that include Layout information contains this data in the exported file.
Importing a package containing a content item with Layout information creates the content item with its Layout intact.
Content type exports for sections and experiences no longer include Layout or UnstructuredData properties.

Content templates for experiences and sections

Added content templates, enabling editors to create content instances with predefined property values and layouts, and to generate templates from existing content.

Create templates – Editors can create templates based on the layout and property values of an existing content item or from an existing content type.
Content Creation from Templates – You can create content items from a template, automatically populating it with predefined property values and layouts. This functionality supports creation in any available language branch.
Template Management – You can export and import templates, facilitating reuse and sharing.

Robustness measures are in place to prevent accidental changes to templates that could disrupt expected behavior.

Blueprint export and import functionality

Export and import blueprints as a separate content type.

A separate checkbox for blueprints is available on the export screen, allowing individual selection or selection of blueprints.
When selected, blueprints are exported along with their associated assets.
Blueprints are imported under the designated blueprint container.
Blueprints are no longer included when exporting general content.
Thumbnails are included in blueprint exports.

Automatically generate thumbnails for templates

Automatically generate thumbnails for saved experience and section templates, providing editors with a visual overview of template layouts in the gallery.

When an experience template is saved, a relevant thumbnail is automatically generated and displayed in the experience template gallery.
When a section template is saved, a relevant thumbnail is automatically generated and displayed in the section template gallery.
Generated thumbnails provide meaningful information about the template's layout or purpose and are of uniform size.

Manage template thumbnails

Manage template thumbnails, including automatic storage, custom uploads, and the ability to revert to auto-generated images.

Automatically generated thumbnails for new templates are stored in the database and displayed in the section gallery, and when creating experiences.
Editors can upload custom thumbnails in png, jpg, or gif formats if the auto-generated image is not suitable or available.
You can reset a custom thumbnail to the auto-generated version.

Manage templates

A page that lets administrators manage section and experience templates for the visual builder. This page consolidates template management into a single location.

Enabled administrators to view accessible section and experience templates.
Implemented search functionality for specific section and experience templates.
Provided filtering between section and experience templates.
Offered both list and thumbnail views for all section and experience templates, including respective thumbnails.
Ensured that templates saved from the visual builder display on the template management page.
You can delete templates.
You can rename templates.

Build out the thumbnail view of saved blueprints

A page provide a centralized view for available saved blueprints.

Added a Blueprints segment in Settings for blueprint management.
You can view a list of accessible blueprints with their thumbnails, including fallback thumbnails for failed generations.
Implemented search functionality to filter blueprints by name.
Provided filtering options for different blueprint types.
Standardized thumbnail size and display up to 50 thumbnails per page.
Added pagination for blueprint lists exceeding 50 items.
Implemented scrolling for blueprint lists that exceed the viewport.
Displayed a context menu icon beneath each blueprint thumbnail and next to its name.
Enabled sorting of blueprints by alphabetical order (A-Z) and reverse (Z-A).
Implemented a card design for blueprint display.

Add, delete, and rename blueprints

Added functionality to rename and permanently delete blueprints within the blueprint management page.

Enabled administrators to rename blueprints through a pop-up dialog box, with validation for required fields and a 255-character limit.
Implemented permanent deletion of blueprints, ensuring that existing content instances created from the blueprint are not affected. A confirmation dialog is displayed: This will permanently remove this blueprint and cannot be undone. Content created from this blueprint will not be affected.
Ensured that the context menu for these actions is available on all blueprints.
Allowed for duplicate blueprint names.

Visual Builder enhancements for ASP.NET MVC

Added support for ASP.NET MVC in the Visual Builder for CMS 13, aligning tooling with existing ASP.NET capabilities. This enhancement lets you leverage Visual Builder functionality without dependency on Optimizely Graph.

Retrieve a page's Visual Builder composition model.
Render Visual Builder content in ASP.NET using HTML helpers.
Render Visual Builder content in ASP.NET using tag helpers.
Resolve rendering templates for Visual Builder content based on conventions.
Override built-in rendering template resolution when needed.
Render styling based on display settings applied within the Visual Builder.
Automatic preview updates and refreshes when content is edited in the Visual Builder.

Tag helpers

Render Visual Builder content in ASP.NET using tag helpers, aligning with the pattern for non-composable pages and blocks.

Render structural, section, and block/element nodes using tag helpers.
epi-outline is the entry point for tag helpers, accepting ExperienceData for the experience attribute.
epi-component renders blocks as sections.
epi-grid renders sections, which includes nested epi-row and epi-column tag helpers for structured content.
Tag helpers add attributes for handling preview interaction.
You can specify custom HTML tags using the TagName attribute on epi-outline, epi-grid, epi-row, epi-column, and epi-component.
Attributes present on tag helpers are passed to the rendered composition nodes.
Updated the sample site to demonstrate the use of new tag helpers.

HTML helpers

Render Visual Builder content in ASP.NET using HTML helpers, following the pattern for non-composable pages and blocks.

Select the correct view in RenderContent based on the currently selected DisplayTemplate.
Included example code demonstrating implementation using established patterns.

Define custom elements in Admin UI

Added the capability for citizen developers to define and save custom elements directly within the CMS Admin UI.

Define and save custom elements using existing editors and fields in the Admin UI.
Provided documentation examples for adding custom elements via the UI.
Compatible with future guardrail implementations.

Create element types through admin UI

Administrators can create element types directly through the Admin UI.

You can select Create New > Element Type.
You can use the existing Create new type pop-up dialog for element type creation.
You can add and edit properties, permissions, and settings for new element types.

Visual Builder, default editor

Added enhancements to the Visual Builder to streamline content creation workflows and expand editing support for various content types.

Unified content creation dialog boxes – Consolidated the creation dialog boxes for pages and experiences, allowing content creators to start from a blank experience or page type, or from a blueprint, without an upfront decision. Similarly, the flows for adding sections, blocks, and creating blocks have been unified.
Element-Enabled Block Selection – Enabled content creators to select element-enabled blocks to add to sections, either as new empty instances or by reusing existing blocks.
Expanded Visual Builder Editing –
- Enabled content creators to open and edit pages within the Visual Builder UI, with properties displayed on the left and a preview on the right.
- Extended Visual Builder editing support to blocks and media assets.
Centralized Settings Access – Provided content editors with access to all settings from the "all properties" mode within the Visual Builder's Settings panel.
Block Type Mapping – Enabled administrators and developers to designate block types as element-enabled or section-enabled, controlling their availability for addition to sections and experiences, respectively.

Migrate functionality from the top area of All Properties

Added content management actions for content creators across edit modes.

You can mark a content item as permanently edited.
You can select Expire from the Publish dropdown to set an expiration date for content items.
Removed the top gray area of the All Properties view and on-page editor (OPE; when the feature flag is enabled).
Migrated custom properties previously located in the removed gray area to the in-page Settings tab.

Section-enabled shared blocks in experiences

Added section-enabled shared blocks within the Visual Builder's experience editing view.

Enabled dragging and dropping section-enabled shared blocks directly into an experience's outline.
Introduced an Add shared block option in an experience's outline, which opens a block asset picker filtered to display only section-enabled shared blocks.
Provided a consistent editing experience for shared blocks within an experience:
- Editors can step into a shared block's standalone editor from an experience.
- After editing, editors can return to the experience context, with alerts for unpublished changes.
- The Publish button in this context applies only to the shared block being edited.
Allowed movement of section-enabled shared blocks within an experience's outline, similar to regular sections.
Managed publishing of experiences containing shared blocks.
- You can publish experiences with unmodified shared blocks.
- If a shared block has unpublished changes, a message indicates this, but publishing the experience is still permitted.
- Unpublished changes on shared blocks are indicated by an orange dot.
Ensured styling applied to a shared block within an experience context is localized to that experience's preview.
Implemented clear visual indicators for shared blocks, including a Shared label and its display in hover highlights.
Enforced API behavior to allow only section-enabled blocks to be referenced at the outline level.
Ensured referenced shared blocks are in-lined when experiences or sections are indexed to Graph.

Page and block editing

You can open and edit pages and blocks within the Visual Builder, enhancing the editing experience and supporting the eventual retirement of other edit views.

Open pages and blocks in the Visual Builder.
Displays a preview for pages and blocks in the Visual Builder when configured, with updated documentation to differentiate preview setup for experiences, blocks, and pages.
Provides a message and a link to developer documentation when a preview is not configured.
You can view and edit all page and block properties, including custom properties, in the left-hand panel, maintaining grouping and sorting from content type definitions.
Autosave page and block property changes, consistent with experiences.
Set the Visual Builder as the default edit view for pages and blocks upon first opening, while respecting subsequent user preferences.
Displayed all properties in the left-hand panel, expanding simple blocks and nesting complex ones.
Ensured the Visual Builder View dropdown is available for all pages and blocks.

Flexible block type configuration

You can configure block types as element-enabled or section-enabled, giving content creators more flexibility in the Visual Builder.

Administrators can designate block types as element-displayable, letting content editors add existing blocks of that type or create new ones within a section.
Administrators can designate block types as section-displayable, letting content editors add existing blocks of that type or create ones within an experience.
You can configure a single block type as both element-level and section-level.
Developers can configure these capabilities with the Integration API.
Implemented automatic conversion of existing element types in SaaS to element-enabled block types.
Set default element and section enablement switches to off when importing blocks or block types that lack these settings.
Included element and section enablement settings in block exports.
Applied existing validation rules for defining elements to the configuration of element-displayable block types.
Removed the element base type while retaining "element" as a terminology.

Section-enabled (inline) blocks

Added consolidated workflows for adding sections and section-enabled blocks to experiences within the Visual Builder.

Content creators can select from real sections and section-enabled block types when adding a section to an experience.
Provided visual differentiation in the UI between blank start states and blueprints, and indicated block types with a dedicated icon.
You can directly edit section-enabled (inline) blocks within the Visual Builder UI, including navigation into nested blocks for further editing.
Autosave section-enabled blocks, consistent with standard sections.
Differentiated between dynamic sections and section-enabled blocks in the experience outline.
You can move section-enabled blocks within the layout in the same manner as sections.
Developers can query experiences that contain section-enabled blocks.

Element-enabled (inline) blocks in the Visual Builder

Content creators can add and edit element-enabled block types as elements directly within the Visual Builder.

You can view a list of element-enabled block types when adding an element.
Ensured element-enabled blocks function identically to previous element types.
Developers can query experiences that contain element-enabled blocks.

Edit media assets

You can open and edit media assets directly within the Visual Builder UI.

You can view and edit all properties of a media asset in the left-hand panel, including custom properties, with grouping and sorting inherited from the content type definition.
Provided a configurable preview for all media assets on the right-hand side.
Autosave media asset property changes, consistent with experiences.
Set the Visual Builder as the default edit view for media assets upon first opening, while respecting subsequent user preferences.
Ensured image editing remains a pop-up, with enhanced discoverability for image assets.
Made the Visual Builder view dropdown available on all media assets.

Property highlighting for pages and blocks

Added interactive property highlighting in the Visual Builder for pages and blocks, improving the editing experience by visually connecting properties in the panel with their representation in the preview.

Implemented dark blue highlighting in the preview, with the field name displayed, when an editable field in the left-hand panel is clicked.
Implemented pale blue highlighting in the preview, with the field name displayed when hovering over an editable field in the left-hand panel.
Implemented pale blue highlighting in the preview, with the field name displayed when hovering over a field in the preview.
You can click a field in the preview to highlight it in dark blue, go to the left-hand panel to that field, and autofocus on it, allowing direct input.
Ensured that properties that are not visible in the preview do not trigger highlighting.
Standardized this behavior to match existing element highlighting.

Direct edit experience and section properties

You can edit properties of experiences and sections directly in the Visual Builder, eliminating the need to switch to the All Properties view.

Enabled content creators to access and edit all properties defined on experience and section content types within the Visual Builder.
Introduced a non-draggable Properties tile, always positioned as the first item at the top of the edit panel.
Organized properties within the Properties tile by tab, respecting user permissions for tab visibility.
Ensured that drilling into the Properties tile for experiences does not alter or scroll the preview.
Implemented property highlighting in the preview when hovering over a property in the edit panel (if configured by the rendering application).
Displayed an overlay for properties when hovering over them in the preview.
Enabled clicking a property in the preview to scroll the edit panel to that property and highlight it.
Autosave property changes, consistent with existing All Properties view behavior.
Ensured the preview updates automatically after property values are saved.

Copy and paste rows and columns

You can copy and paste rows and columns within the Visual Builder, streamlining the experience-building process.

Introduced Copy and Paste commands in the context menus for rows and columns, located beneath Rename.
Enabled copying of selected rows or columns, including all child nodes and content.
Provided user feedback (Row copied or Column copied) in the top right of the preview after a copy operation.
Implemented a disabled state for Paste when no content has been copied.
Ensured pasted rows and columns, along with their layout and data, display in a collapsed state.
Updated the hierarchical numbered structure to reflect the new relative position of pasted items.
Ensured the preview reflects changes immediately after duplication.
You can copy style settings during paste operations.
Restricted pasting to parent elements of the same type.
Positioned pasted rows or columns after the selected item; columns pasted into a row are placed as the last column.
You can copy references to assets or blocks in global or local folders.
You can copy and paste between different sections.

Row and column hover highlighting

Added hover highlighting for rows and columns in the Visual Builder preview to improve clarity regarding their layout and content.

Implemented a highlight in the preview, using the same color as the section highlight, when hovering over a row or column.
Ensured no scroll-on-hover functionality is present.
Maintained highlight visibility even when content within the row or column is being edited.
Displayed two highlights (one for the focused element, one for the hovered row or column) when an element within a row or column is focused, and the row or column is hovered.
Highlighted the respective row or column when opening its style from the context menu, indicating where style changes will apply.
Updated documentation to provide guidance on decorating rows and columns for proper identification and highlighting by developers.

TinyMCE editor block restriction in Visual Builder

You cannot drag and drop blocks into the TinyMCE editor within the Visual Builder to align with intended long-term behavior.

You cannot add blocks of any type to a TinyMCE editor in the Visual Builder view.
Ensured that the configurable toolbar in PaaS does not allow blocks to display in element toolbars.
Verified that keyboard shortcuts do not bypass this restriction.