Story

As a marketer I want to use accordion so that I can organize content on the page in the collapsible sections

Business Value

Accordion support in native Page Builder resulting in less customizations for merchants as this is content type broadly used across many websites

Preconditions

• User is logged into Admin Panel
• User opened a page with Page Builder enabled
• User has Accordion added into the content

Acceptance Criteria

• User can delete Accordion
• User can delete Accordion sections except the last one.
• User can duplicate Accordion
• User can duplicate Accordion sections
• User can move Accordion between supported containers on Stage
• User can rearrange accordion sections inside Accordion
• User cant move accordion section outside Accordion

Design

It should be easy to understand what API to use to get Page Builder configuration.

AC

• Logic from \Magento\PageBuilder\Model\Stage\Config moved to \Magento\PageBuilder\Model\Config.
• \Magento\PageBuilder\Model\Stage\Config eliminated.

As a Content Manager I want to add new accordion item into Accordion content block from stage so that I have in-context editing experience and don't have to go to settings for that

AC

1. User adds new AccordionSection to Accordion from the stage, it appears on top of already existing ones (we need to ensure it's inside viewport and user sees it). New AccordionSection becomes active and gets focus.
2. User sees option panel displayed on top of the AccordionSection title.
3. User sees title placeholder "Enter Section Title". User clicks outside the AccordionSection, user sees the default title Section N that reflect the order of the sections inside Accordion
4. User opens AccordionSection configuration settings and sees options as documented with default values
5. User sees AccordionSection border to be default (no value added)
6. User updates AccordionSection settings and saves configuration.
7. User sees Accordion Admin Preview updated.
8. User navigates to the storefront and see changes applied
9. User adds unlimited number of AccordionSections into the Accordion

Mockups

• https://magento.invisionapp.com/share/GHAYXUUCY#/282464830_Accordion_New_Interaction
• https://magento.invisionapp.com/share/GHAYXUUCY#/276727273_Edit_Accordion_Item
• https://magento-ux.github.io/m2-ux-prototype/cms-editor/

I've noticed that if you add a new element to 1 appearance but not the others it throws an error (in the admin / console) when switching between them.

To replicate add a new appearance or edit a new element to an existing appearance.

<type name="image">
        <appearances>
            <appearance name="new-appearance"
                        preview_template="Magento_PageBuilder/content-type/image/full-width/preview"
                        master_template="Gene_Framework/content-type/image/full-width/master"
                        reader="Magento_PageBuilder/js/master-format/read/configurable">
                <elements>
                    <element name="lazy_image">
                        <attribute name="image" source="data-src" converter="Magento_PageBuilder/js/converter/attribute/src" preview_converter="Magento_PageBuilder/js/converter/attribute/preview/src"/>
                    </element>
                </elements>
            </appearance>
        </appearances>
    </type>

Then in the master template add the logic if="data.lazy_image.attributes()['data-src']"

Now switch between the new-appearance and the core full-width appearance in the admin. It will throw an error 'data.lazy_image doens't exist'

As a temporary solution, you can add the element to each appearance in the XML and just not use it in the template

Description (*)

As a marketer, I want to hide some elements in specific version of the website ( mobile / desktop ) to reduce the UI overload in Mobile.

Expected behavior (*)

I select on which screens I would like to see the element (all / mobile only / desktop only) and this way PageBuilder generates correct CSS class applied to the element.

Currently I cannot even do it on my own as PageBuilder adds display: flex to elements.

Benefits

Possibility of customizing the views for desktop / mobile.

Additional information

As a Content Manager I want to add anchor link to any place of my page so that I reference this particular place as a link /page_name#anchor

AC

1. User sees Empty Anchor placeholder with #Anchor text inside
2. User opens Anchor settings and sees options as specified
3. User saves Anchor with empty identifier, user sees empty anchor placeholder in Admin Preview
4. User goes to the Storefront and sees anchor with empty identifier in the html
5. User adds anchor, saves configuration and sees identifier displayed in Admin Preview as _#AnchorName
6. User goes to the Storefront and sees anchor with identifier in the html
7. User adds Heading content block to the stage, user opes Heading configuration and sees Anchor field as specified
8. User sees anchor value generated out of header title value
9. User adds button to the page content that reference #AnchorName, saves configuration, navigates to the storefront, clicks the button and gets navigated to the place where anchor is added

Mockups

• https://magento.invisionapp.com/share/GHAYXUUCY#/275321686_Anchor
• https://magento.invisionapp.com/share/GHAYXUUCY#/275321685_Edit_Anchor

When using Content Type Image and using a mobile and desktop image both images are loaded by the browser. It should only load the image you see. The template is now using two img-tags. But it would be better to use the picture-tag.

Current situation
vendor/magento/module-page-builder/view/adminhtml/web/template/content-type/image/full-width/master.html

<figure>
  <a>
    <img src="…" class="pagebuilder-mobile-hidden" />
    <img src="…" class="pagebuilder-mobile-only" />
  </a>
  <figcaption>…</figcaption>
</figure>

Preferred situation

<figure>
  <a>
    <picture>
      <source media="(min-width: 678px)" srcset="…">
      <source media="(max-width: 677px)" srcset="…">
      <img src="…" />
    </picture>
  </a>
  <figcaption>…</figcaption>
</figure>

I haven't figured out how page builder works exactly so haven't got a PR ready for this. But does everybody agree that this is a better implementation? Otherwise you're loading desktop images on a mobile device. That's taking up to much resources.

We want your opinions on PageBuilder!

What web content API do you use?
What web content API would you like to see in PageBuilder?

Issue

If Infinite Loop is disabled on a Slider, the slides still loop infinitely. The same issue does NOT occur on Products carousel

Expectation

1. Same behavior as products carousel
   #* cant go from 1st slide to last or vice versa
   #* autoplay only slides to the last slide then stops
   #* previous navigation arrow is disabled when on 1st slide
   #* next navigation arrow is disabled when on the last slide

Steps to Reproduce

1. Add Slider to page
2. Create 3 slides
3. Edit Slider, disabled infinite loop & save
4. Note all expectations above do not happen

#425

Story

As a marketer I want to include a node from my category or content hierarchy with all the child sub-categories/pages into a PageBuilder content  so that I can include sub-navigation into a a content 

Business Value

Improved navigation between category and content pages

Preconditions

• Admin User is logged into Admin Panel
• Catalog categories exist
• Admin User created CMS Hierarchy
• Admin user is on a page that supports Page Builder

Acceptance Criteria

• User sees "Menu" component in the "Add Content" group
• User drops it to the Stage and sees Empty Menu placeholder
• User opens configuration and sees option to create secondary navigation from CMS hierarchy node
• User selects CMS Hierarchy node option and sees CMS hierarchy tree along with the link to edit/create CMS hierarchy. IF CMS Hierarchy does't exist, user sees empty tree with the link to create one. Link navigates to /admin/admin/cms_hierarchy. Link opens in a separate tab* User selects a node and sees it selected
• User choses the level of nesting to be displayed in the sub-menu. E.g. how many nested nodes included in selected node to be shown in the navigation.
• User chooses appearance for the sub-hierarchy from 2 options:
  ** List
  ** Side Navigation
• User sees that default option is List
• User saves configuration and sees the nested elements included in selected node displayed on the stage.
• User saves the page and sees it on storefront with styles that matches selected appearance
• When current page is the one included in the sub-navigation, user sees it's link as active

Design

List Appearance

Side Navigation Appearance

To reduce amount of configuration that developer need to specify, need to remove source attribute from nodes where name = source.

AC

• On property, complex_property, attribute, 'complex_attribute', html, css and tag nodes source attribute is eliminated where it equals name.

In this commit (23b58c1#diff-005159540aca77117b1e611d2b901d13), the color variable @color-darkie-gray was updated to @color-darker-gray but the color definition was never updated so there's an error thrown when trying to generate the css. The affect file is app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_panel.less. On my local, when I changed the variable name back to @color-darkie-gray the css generates properly.

Issue

If a user adds a link attribute to a banner or slide and they also add a link widget to the content form (like a cms page link, catalog product link, etc.), then on the storefront, the banner or slide will add nested links at every node level. See attachment

Expectation

• Cannot add both widget link & link attribute
• Nested links do not render in admin or storefront

Steps to Reproduce

• Go to new CMS Page
• Add Slide to Row
• Edit slide
• Add URL link attribute
• In content form, click Insert Widget, choose CMS Page Link, select the Home Page
• Save edit form
• Save page
• Go to page on storefront
• Note issue

Test Plan

• Check both slide & banner
• Check all types of widget links
• Check all other types of content area links
• Check inside block/dynamic block
• Check each browser

Story

As a marketer I want to use accordion so that I can organize content on the page in the collapsible sections

Business Value

Accordion support in native Page Builder resulting in less customizations for merchants as this is content type broadly used across many websites

Preconditions

• User is logged into Admin Panel
• User opened a page with Page Builder enabled

Acceptance Criteria

• User sees Accordion content type in Layout group in Page Builder Panel after Columns and before Tabs
• User drags Accordion to Stage and drops it in supported containers.
• User sees first accordion section added to stage and opened. Min height is 300px
• User sees accordion section label placeholder Section 1 in editing state: selected and ready for be updated
• User can change the section label by starting typing a new label. Label text updated by clicking outside the section label
• User sees empty container placeholder inside the accordion section with text Drag you content here
• User drags any content types inside Accordion section (except Row).
• User drops content type in Accordion section and sees it same way as if it's added into Row.
• User can add new accordion section from Accordion option panel. User sees new section added after the first one. First section closes and new one becomes open. Section label has Section 2 placeholder.
• User sees that only one Accordion section opened at the same time
• USer can open sections from Stage
• User saves changes and sees accordion on the storefront as designed

Design

Hi,

Thanks for sharing this repo with us ahead of release.

I was looking through the LESS files and noticed that Magento's .media-width() LESS mixin are not being used in _module.less or any files which it imports. Shouldn't they be?

In my experience any style rules not placed in these mixins get added to both the styles-m.css & styles-l.css file, which will negatively impact on performance.

It's the approach I've see taken in Magento and some other 3rd party modules.
app/design/frontend/Magento/blank/Magento_Checkout/web/css/source/module/_minicart.less

//
//  Common
//  _____________________________________________
& when (@media-common = true) {
}

//
//  Mobile
//  _____________________________________________
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
    
}

//
//  Desktop
//  _____________________________________________
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
}

Description (*)

All the new rows, columns and elements have the padding and margin values set by default:

As a result, you get the generated code with style="" that overrides all existing styles:

<div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-element="inner" style="justify-content: flex-start; display: flex; flex-direction: column; background-position: left top; background-size: cover; background-repeat: no-repeat; background-attachment: scroll; border-style: none; border-width: 1px; border-radius: 0px; margin: 0px 0px 10px; padding: 10px;"><div class="pagebuilder-column-group" style="display: flex;" data-content-type="column-group" data-grid-size="12" data-element="main"><div class="pagebuilder-column col-md-4 col-xs-6" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" style="justify-content: flex-start; display: flex; flex-direction: column; background-position: left top; background-size: cover; background-repeat: no-repeat; background-attachment: scroll; border-style: none; border-width: 1px; border-radius: 0px; width: 100%; margin: 0px; padding: 10px; align-self: stretch;"></div></div></div></div>

As you can see - the:

style="justify-content: flex-start; display: flex; flex-direction: column; background-position: left top; background-size: cover; background-repeat: no-repeat; background-attachment: scroll; border-style: none; border-width: 1px; border-radius: 0px; margin: 0px 0px 10px; padding: 10px;"

Is overriding the existing styles.

Expected behavior (*)

The default values should be empty and the code should be generated with such a big overhead. There should be also an option to remove the overhead, but you cannot remove most of the attributes, as these are hardcoded.

Benefits

The style="" usage for styling should be definitely avoided (it is bad practice), this also overrides the global styles for the website and you cannot customize the elements - for example for responsiveness.

Additional information

We have a M 2.3.3 instance which is in production mode and JS minifying is activated.

Unfortunately the backend is no longer usable as we experience several js errors:

Issue

If Infinite Loop is disabled on a Slider, the slides still loop infinitely. The same issue does NOT occur on Products carousel

Expectation

Same behavior as products carousel

• cant go from 1st slide to last or vice versa
• autoplay only slides to the last slide then stops
• previous navigation arrow is disabled when on 1st slide
• next navigation arrow is disabled when on the last slide

Steps to Reproduce

• Add Slider to page
• Create 3 slides
• Edit Slider, disabled infinite loop & save
• Note all expectations above do not happen

I'd like to propose adding lazyloading to images in Page builder. This is a feature I would be willing to add and make a PR for but I'd like to confirm if it would be acceptable to the Page Builder core team.

Proposal Draft

Background

Several of our clients whom are currently using BlueFoot have pages with many images that could cause the page size to be >5mb in size. As a result we implemented lazyloading of images with progressive enhancement (intrinsic sizing + blur-up) to speed up initial page load speed and avoid shifting of content (images loads then page content shift down, etc.).

Feature Proposal

I'd like to propose adding lazyloading to all block images so that they only load when the user has the image in view. We use lazysizes. You set the image to data-src="" and with JS it then sets the image to src="" when it scrolls into view (or will scroll into view in X).

Intrinsic Sizing

Intrinsic is used so that the image still takes up the same space in the DOM until it loads. You can then set an inline transparent gif as the src to create intrinsic loading. Magento2 currently does something similar for the catalog page where the image is absolute positioned

Blur-Up

Blur-up is another technique we've used where we dynamically create a new image crop of ~40px in width and set it to 100% of the image container width. You can blur it into the full-size image. See example:

Implementation Details

This would require:

• adding lazysizes to page-builder as a JS vendor file
• adding the Less for hiding the image display: none until lazyload has loaded the image
• adding intrinsic and blur-up Less styling
• adding intrinsic and blur-up as optional selections (checkbox/dropdown) in the admin. there are use-cases where you do not want intrinsic sizing.

Example

You can see a live example on RileyHome which uses BlueFoot with LazySizes and images only load when they come into view. There's a background-color used as a placeholder until the image fully loads.

This is a rough draft of the proposal and I can flesh it out with more actual examples of code and implementation if you think it's something that would be accepted.

Issue

If a Row has background attributes set & parallax enabled, subsequent edits to Minimum Height, the image, or any advanced attributes, will not render on the stage until user either saves page or changes the appearance of the row.
Issue occurs on PB-1.1.0 & PB-1.2.0. Issue does not affect storefront

Expectation

Changes to ANY Row attributes render on stage after saving edit panel for each appearance

Steps to Reproduce

• Add a new page, edit Row & set background attributes & min height to 300. Save edit panel
• Edit Row again & change min height & save edit panel
• Note that changes are not rendered
• Edit row & add a 15px, black, solid border & save
• Note that changes are not rendered

Story

As a marketer I want to use accordion so that I can organize content on the page in the collapsible sections

Business Value

Accordion support in native Page Builder resulting in less customizations for merchants as this is content type broadly used across many websites

Preconditions

• User is logged into Admin Panel
• User opened a page with Page Builder enabled
• User has Accordion added into the content

Acceptance Criteria

• User opens Accordion Section configuration from option panel
• User can change section label
• User can redefine the min height for individual section. Empty by default.
• User can configure section background. Identical to Row background options
• User can manage section advanced options

Design

Description

The drag and drop uploader area indicator does not trigger in safari when attempting to upload an image by dragging & dropping from your local machine. The upload does work on the image content type but it does not work for Banner or Slide & will instead redirect you away from Magento to a file URL.

Preconditions (*)

Page Builder develop branch.

Steps to reproduce (*)

1. Go to a new CMS Page
2. Add Image content type to Row
3. Drag & drop image from local machine to Image content type
4. Note that uploader area indicator does not appear (check chrome for expectation)
5. Note that image does upload correctly
6. Add Banner to Row
7. Drag & drop image from local machine to Banner content type
8. Note that browser navigates to image & away from magento

Expected result (*)

Indicator appears & images can be uploaded to slides, banners, image

Actual result (*)

Issue

Setting border radius to empty on slide out for tab item & clicking Save will result in a console error & slide out form won't close. If user then clicks close & Saves the page, on reload, the tab item's content will be gone & another console error will throw. See video

Expectation

1. Empty Border radius can be set successfully on tab item
2. Root cause of errors is resolved

#421

Story

As a marketer I want to include a node from my category hierarchy with all the child sub-categories into a PageBuilder content  so that I have secondary navigation inside content 

Business Value

Improved navigation between category and content pages

Preconditions

• Admin User is logged into Admin Panel
• Catalog categories exist
• Admin user is on a page that supports Page Builder

Acceptance Criteria

• User sees "Menu" component in the "Add Content" group
• User drops it to the Stage and sees empty Menu placeholder
• User opens configuration and sees option to create secondary navigation from Category Structure node
• User selects Category node option and sees category hierarchy tree
• User can select only category nodes that have children elements
• User selects a node and sees it selected
• User choses the level of nesting to be displayed in the sub-menu. E.g. how many nested nodes included in selected node to be shown in the navigation.
• User chooses appearance for the secondary navigation from 2 options:
  ** List
  ** Side Navigation
• User sees that default option is List
• User saves configuration and sees the nested elements included in selected node displayed on the stage.
• User saves the page and sees it on storefront with styles that matches selected appearance
• When current page is the one included in the secondary navigation, user sees it's link as active

Design

https://xd.adobe.com/view/692ce2a1-f552-4745-63f3-a0a4648478a4-1f1d/

List Appearance

Side Navigation Appearance

\Magento\PageBuilder\Component\Form\Element\Wysiwyg should not have dependency on \Magento\Catalog\Api\CategoryAttributeRepositoryInterface as it's used only in case Page Builder used for product attributes.

AC

• \Magento\Catalog\Api\CategoryAttributeRepositoryInterface dependency eliminated, is_wysiwyg_enabled passed with wysiwygConfigData.

Issue

If a user has an invalid session in admin and attempts to upload an image to a content type, an ugly prompt will open. See image

Expectation

• User sees the message that admin session is over with the option to log in
• User navigates to log in screen

Steps to Reproduce

• Go to a page in admin & drag & drop an Image content type to the Row
• Invalidate your session (in a new tab in the same browser, open a new storefront page)
• In admin, click the Upload Image button in the Image content type
• Choose an image from your local machine to upload
• Note error

Test Plan

• Check all content types w/ image uploads
• Check each browser

Design

Story

As a marketer I want Page Builder Slide Content type to accept any content type (except Row) so that I can use Magento blocks and dynamic blocks inside slider and create custom content for a slider

Business Value

Enables business user create content upfront and use it inside slider.

Preconditions

• Admin User is logged into Admin Panel
• Admin User created a page
• Admin User added Slider content type to the content of the page

Acceptance Criteria

• User goes to Slide configuration and sees new appearance "Container" available
• User selects "Container" appearance and doesn't see the Content section
• User saves configuration and sees slide with a placeholder "Drag your content here"
• User drags the content type (any except a row, slider) into a slide, they see Slide behaving like a container (a row): the droppable area is highlighted
• User releases the content type and sees it takes 100% width of the slide
• User saves the page and sees the content they added in the slide

Design

https://xd.adobe.com/view/3d373773-7c66-4a05-60b1-75b279189895-4b06/

Preconditions (*)

This is supper annoying when the toolbar appears directly over the element that you just click

Steps to reproduce (*)

1. Create simple grid:
   
2. Try to click on the "Edit text" - the toolbar will appear with delay, so your click is going to be caught by the toolbar, not element. Then you have about 5 px to click on the text and continue edit.

Expected result (*)

1. Toolbar should appear over the element not overlapping it.

Actual result (*)

1. Toolbar hides the original element.

Issue

When the content is loaded for a new staging update for a CMS page, a JavaScript error is thrown in the console. This seems to be only happening on Safari.

Expected result

Content loads without errors and the staging update can be saved successfully

Steps to reproduce

• Create and save a CMS page
• Click Schedule New Update button
• When the page is loaded, expand the content section
• The following error appears in the console and the staging update cannot be saved:

Unhandled Promise Rejection: TypeError: null is not an object (evaluating 'frame.src = _config.getConfig("render_url")') setupChannel (render.js:97) (anonymous function) (stage.js:56) promiseReactionJob appendChild setDomNodeChildren (knockout.js:288) setDomNodeChildren (knockout.js:2817) executeTemplate (knockout.js:5326) (anonymous function) (knockout.js:5381) evaluateImmediate_CallReadThenEndDependencyDetection (knockout.js:2173:116) evaluateImmediate_CallReadWithDependencyDetection (knockout.js:2140:82) evaluateImmediate (knockout.js:2101) (anonymous function) (knockout.js:1954) (anonymous function) (knockout.js:5373) update (knockout.js:5508) (anonymous function) (engine.js:83) (anonymous function) (knockout.js:3373) evaluateImmediate_CallReadThenEndDependencyDetection (knockout.js:2173:116) evaluateImmediate_CallReadWithDependencyDetection (knockout.js:2140:82) evaluateImmediate (knockout.js:2101) (anonymous function) (knockout.js:1954) (anonymous function) (knockout.js:3371) arrayForEach (knockout.js:159) applyBindingsToNodeInternal (knockout.js:3343) applyBindingsToNodeAndDescendantsInternal (knockout.js:3223) (anonymous function) (knockout.js:3434) applyBindings (bound-nodes.js:120) (anonymous function) (knockout.js:5293) invokeForEachNodeInContinuousRange (knockout.js:5244) activateBindingsOnContinuousNodeArray (knockout.js:5291) activateBindingsCallback (knockout.js:5417) (anonymous function) (knockout.js:5787) ignore (knockout.js:1470) (anonymous function) (knockout.js:5438) evaluateImmediate_CallReadThenEndDependencyDetection (knockout.js:2173:116) evaluateImmediate_CallReadWithDependencyDetection (knockout.js:2140:82) evaluateImmediate (knockout.js:2101) (anonymous function) (knockout.js:1954) (anonymous function) (knockout.js:5426) update (knockout.js:5500) update (knockout.js:4299) (anonymous function) (knockout.js:3373) evaluateImmediate_CallReadThenEndDependencyDetection (knockout.js:2173:116) evaluateImmediate_CallReadWithDependencyDetection (knockout.js:2140:82) evaluateImmediate (knockout.js:2101) (anonymous function) (knockout.js:1954) (anonymous function) (knockout.js:3371) arrayForEach (knockout.js:159) applyBindingsToNodeInternal (knockout.js:3343) applyBindingsToNodeAndDescendantsInternal (knockout.js:3223) applyBindingsToDescendantsInternal (knockout.js:3205) applyBindingsToNodeAndDescendantsInternal (knockout.js:3232) (anonymous function) (knockout.js:3434) applyBindings (bound-nodes.js:120) (anonymous function) (knockout.js:5293) invokeForEachNodeInContinuousRange (knockout.js:5244) activateBindingsOnContinuousNodeArray (knockout.js:5291) executeTemplate (knockout.js:5339) (anonymous function) (knockout.js:5381) evaluateImmediate_CallReadThenEndDependencyDetection (knockout.js:2173:116) evaluateImmediate_CallReadWithDependencyDetection (knockout.js:2140:82) evaluateImmediate (knockout.js:2101) (anonymous function) (knockout.js:1954) (anonymous function) (knockout.js:5373) update (knockout.js:5508) (anonymous function) (engine.js:83) (anonymous function) (knockout.js:3373) evaluateImmediate_CallReadThenEndDependencyDetection (knockout.js:2173:116) evaluateImmediate_CallReadWithDependencyDetection (knockout.js:2140:82) evaluateImmediate (knockout.js:2101) (anonymous function) (knockout.js:1954) (anonymous function) (knockout.js:3371) arrayForEach (knockout.js:159) applyBindingsToNodeInternal (knockout.js:3343) applyBindingsToNodeAndDescendantsInternal (knockout.js:3223) (anonymous function) (knockout.js:3434) applyBindings (bound-nodes.js:120) (anonymous function) (knockout.js:5293) invokeForEachNodeInContinuousRange (knockout.js:5244) activateBindingsOnContinuousNodeArray (knockout.js:5291) activateBindingsCallback (knockout.js:5417) (anonymous function) (knockout.js:5787) ignore (knockout.js:1470) (anonymous function) (knockout.js:5438) evaluateImmediate_CallReadThenEndDependencyDetection (knockout.js:2173:116) evaluateImmediate_CallReadWithDependencyDetection (knockout.js:2140:82) evaluateImmediate (knockout.js:2101) (anonymous function) (knockout.js:1954) (anonymous function) (knockout.js:5426) update (knockout.js:5500) update (knockout.js:4299) (anonymous function) (knockout.js:3373) evaluateImmediate_CallReadThenEndDependencyDetection (knockout.js:2173:116) evaluateImmediate_CallReadWithDependencyDetection (knockout.js:2140:82) evaluateImmediate (knockout.js:2101) (anonymous function) (knockout.js:1954) (anonymous function) (knockout.js:3371) arrayForEach (knockout.js:159) applyBindingsToNodeInternal (knockout.js:3343) applyBindingsToNodeAndDescendantsInternal (knockout.js:3223) (anonymous function) (knockout.js:3434)

Story

As a marketer I want to add search term as a link to CTA elements so that customers are navigated to product search results page with specific products listed there

Business Value

reference search result pages from content across multiple websites

Preconditions

• User is logged into Admin Panel
• User opened a page with Page Builder enabled
• User opened content type that includes link component (Button, Banner, Slide, Image)

Acceptance Criteria

• User opens a link type and sees a new option in the list - "Search result"
• User selects it and sees an option to insert a search phrase. E.g. "yellow women pants"
• User specifies a search term
• User saves configuration and on the storefront sees that CTA navigates to the page with search results that matches search phrase entered in the configuration
• Search link works with multi store setup

Design

Story

As a marketer I want to use accordion so that I can organize content on the page in the collapsible sections

Business Value

Accordion support in native Page Builder resulting in less customizations for merchants as this is content type broadly used across many websites

Preconditions

• User is logged into Admin Panel
• User opened a page with Page Builder enabled
• User has Accordion added into the content

Acceptance Criteria

• User opens Accordion configuration from Accordion option panel
• User chooses what Accordion section is opened. The first (initial) accordion section is opened by default.
• User sets min height for accordion sections. 300px is default value
• User chooses if all the accordion sections are opened at the same time. No is a default option
• User can manage advanced settings of Accordion

Design

Story

As a marketer I want to have more options out of the box to style CTAs depending on the context where they are in "so that" I don't need to pay for new module that extends button types (heavy customization) and pay just for overriding CSS (easy customization)

Business Value

richer native options that decrease customization effort

Preconditions

Acceptance Criteria

Design

Preconditions (*)

1. Magento 2.3.2
2. PageBuilder 1.0.3

Steps to reproduce (*)

1. Create CMS page with Page Builder
2. Put complex structure with multiple images in the contents
3. Save

Expected result (*)

1. The page reloads and the contents are being rendered as CMS blocks properly

Actual result (*)

1. Content becomes single HTML block with messed content inside.

Story

As a marketer I want to update to Magento 2.3.x with Page Builder from TinyMCE WYSIWYG and have content migrated to Page Builder HTML content block without Row component wrapped around it so that there is no extra formatting added to my content that breaks the styles and formatting

Business Value

No corrupted content after upgrading to Page Builder

Preconditions

• Row is not a default container for Page Builder content
• Content created with tinyMCE WYSIWYG in Magento before 2.3.1
• Magento upgraded to 2.3.1 and up version

Acceptance Criteria

• User logs into Admin Panel and opens a page with the migrated content in Page Builder
• User sees "HTML" content type on Stage
• User doesn't see a Row content type on Stage

Design

Preconditions (*)

1. Magento 2.3.2
2. PageBuilder in version that composer says is "version": "1.0.0"

Steps to reproduce (*)

1. Create new CMS block
2. Add 1 row, and 3 columns in it
3. Add 1 header in each column
4. Start adding links to each of the columns

Expected result (*)

1. Toolbar should be visible over currently edited element, without interrupting in edit

Actual result (*)

Toolbars dance, literally:

To stop this, you need to click outside the edit zone

Summary (*)

The PageBuilder repository does not seem to be in-sync with the mainline used to builds:

This way you literally cannot preview the code from specific release on Github.

Examples (*)

Proposed solution

1. Tag and synchronize the repositories

Is the new version compatible with content staging?

Story

As a marketer I want to add layered navigation parameters to category page link I include into content pages so that customers clicking this link navigated to category page with layered navigation filters applied

Business Value

Ability to point customers to specific products inside category pages and make the content more shoppable

Preconditions

• User is logged into Admin Panel
• User opened a page with Page Builder enabled
• User opened content type that includes link component (Button, Banner, Slide, Image)

Acceptance Criteria

• User opens a link type and selects Category page link type
• User sees option to insert filtering parameters along with category selection
• User inserts parameters in the the following format: attribute name 1=attribute value&attribute name N=attribute value. Where Attribute name is a product attribute default label. Product attribute has Use in Layered Navigation set to yes. Attribute value is an admin name of given product attribute. E.g. User enters in configuration color=orange&material=wool
• User saves configuration and on the storefront sees that CTA navigates to the selected category with products filtered using the attribute values provided in configuration
• Magento resolves attribute names and transforms filtering parameters user entered in configuration into the ones that it can interpret. E.g. color=62&material=170

Design

While configuring a products block, attempting to select a category using its checkbox in the conditions throws a console error.

Steps To Reproduce:

• Add PageBuilder Products Block
• In conditions choose category
• In category tree attempt to check a box to make a selection.

Expected result:

• Category is selected and ID is shown in box

Actual Result:

• Console Error Thrown

Issue

If a user adds a widget/variable to an inline TinyMCE editor & immediately after saving the Insert Widget edit form (can't click anywhere else but not related to amount of time between clicks), clicks the Save button for the page, then the widget/variable will not be saved in the text content type. See attachment

• Found on 2.3.4 after regression

Expectation

All edits in tinyMCE editor are saved

Steps to Reproduce

• Create a CMS page
• Add Text to Row
• Inline edit text
• Click Insert Widget
• Choose a widget and add settings
• Click Save
• Without clicking anywhere else on the page, click Save for the CMS page while the editor is still active
• After save, expand Content section
• Note that widget is gone

We want your opinions on PageBuilder!

What customization features would you like to see implemented?
What do you need from the PageBuilder team to accomplish this task?

Examples:

• Animation in existing content types
• Different templates for tabs

Story

As a marketer I want to create content in Page Builder with Row component to be optional so that I use Row component only when I need (like to add a background to the content inside or style it) and it doesn't bloat my content with additional HTML and inline CSS when I don't need it

Business Value

No excessive HTML and inline CSS in Page Builder content

Preconditions

• Admin User is logged into Admin Panel
• Admin User creates a new entity that supports Page Builder

Acceptance Criteria

• User sees empty Stage with no Row content added by default
• User sees placeholder with the message "Drag Row, Column, Tabs, Block, Dynamic Block or HTML Code here"
• User sees that message in the placeholder wraps on the mobile viewport.
• User sees 10px right and left padding for the desktop viewport stage area and the background color is #E4E4E4.
• User drags the following component to Stage and sees a handler that shows the drop zone on Stage:
  • Html
  • Block
  • Dynamic Block
  • Row
  • Columns
  • Tabs
• User can drop other components inside the containers only, not on the stage directly
• User can drop Row component directly to the Stage only
• When user drags components, they see drop handlers inside containers and in between of them
• User saves page and sees on the storefront that Row wrapper is not added by default to the content they created in Page Builder
• User opens page/block/dynamic block/category/product with the content migrated from the WYSIWYG, user sees HTML content type with the migrated content. The advanced settings of the HTML shows default for all the settings except margins and paddings. When user saves the page with this content, no Row is added to the content

Prototype

https://github.com/magento/magento2-page-builder/tree/429_no_default_row
https://github.com/magento/magento2-page-builder-ee/tree/429_no_default_row

Design

https://user-images.githubusercontent.com/752610/78275457-41443080-74d7-11ea-9b3d-5d2159e43587.jpg

Test Plan

Manual checks for ticket

• Verify default stage state
  • No Row or any other content type
  • Placeholder image & message matches UX design
  • 10px right and left padding for the desktop viewport stage area and the background color is #E4E4E4
  • Mobile viewport is also empty but stage is same size as before
    • Placeholder image & message matches UX design & message wraps
• Verify that only the following content types can be dragged & dropped on stage. Verify they get saved when saving page (or block, or whatever)
  • Row
  • Columns
  • Tabs
  • HTML Code
  • Block
  • Dynamic Block
  • No other content type can be added to stage
    • Dragging & dropping other content types does not result in console errors nor are there any drop zone indicators
      • Column Item
      • Tab Items
      • Text
      • Heading
      • Button Group
      • Button Items
      • Divider
      • Image
      • Video
      • Banner
      • Slider
      • Slide Item
      • Map
      • Products
• Verify can move above content types (that can be added to stage) between containers & stage (ex: add to Row, then move from Row to stage directly, then vice versa)
  • Verify saving content in this type of exploratory test will successfully save content. Verify in admin & storefront
• Verify duplicating content that is on stage will duplicate the content correctly and the new content type will also be added directly to stage
• Verify deleting all content will result in empty stage again with new placeholder image & message
• Verify that stage is empty by default in each PageBuilder area (no default Row) & using Page Builder with the new stage works as expected
  • CMS Pages
  • CMS Blocks
  • Dynamic Blocks
  • Categories
  • Products
  • Scheduled Updates
• Verify new stage message is translatable
• Verify that upgraded WYSIWYG content is not wrapped in a row
  • Install Magento 2.2.12 on local
  • Create content in the following areas w/ the WYSIWYG TInyMCE editor: (cms page, cms block, dynamic block, category, product, scheduled updates)
  • Save page
  • Upgrade to latest 2.4-develop w/ PB module enabled
  • Verify content is unchanged for each pagebuilder area
    • Content should be displayed in HTML Code content type w/ no Row wrapper
    • Verify in admin & storefront
• Verify that upgraded WYSIWYG content is not wrapped in a row
  • Install Magento 2.4.1 on local
  • Disable PageBuilder
  • Create content in the following areas w/ the WYSIWYG TInyMCE editor: (cms page, cms block, dynamic block, category, product, scheduled updates)
  • Save page
  • Upgrade to latest 2.4-develop
  • Enable page builder
  • Verify content is unchanged for each pagebuilder area
    • Content should be displayed in HTML Code content type w/ no Row wrapper
    • Verify in admin & storefront
• Verify that upgraded PageBuilder content is unaffected
  • Install Magento 2.4.1 on local
  • Create Page Builder content in the following areas: (cms page, cms block, dynamic block, category, product, scheduled updates)
    • include an extra page & a product w/ a completely empty row
  • Save page
  • Upgrade to latest 2.4-develop
  • Verify content is unchanged for each pagebuilder area
    • Verify in admin & storefront
  • Verify pagebuilder areas for new content (new pages, new blocks, etc) do not have a Row in stage

Integration Tests

None

Automated MFTF Tests

• Update existing tests to drop Row to stage after opening stage (get all existing tests passing)
• Add new tests for:
  • steps:
    • Go to page builder area
    • assert stage empty
    • assert placeholder image & message visible
    • add Row to stage
    • add Column to stage
    • add Tabs to stage
    • assert cannot add Text, heading, buttons, divider to stage
    • add HTML Code to stage
    • assert cannot add image, video, banner, slider, map to stage
    • add Block to stage
    • add Dynamic Block to stage
    • assert cannot add products to stage
    • save
    • assert see 1 row, column, tabs, HTML Code, Block, Dynamic Block
    • assert do not see Text, heading, buttons, divider, image, video, banner, slider, map, products
    • go to storefront
    • assert see 1 row, column, tabs, HTML Code, Block, Dynamic Block
    • assert do not see Text, heading, buttons, divider, image, video, banner, slider, map, products
• Extend above test for
  • CMS Page
  • CMS Block
  • Dynamic Block
  • Category
  • Product
  • Schedule Update

Manual Hip Tests

None

Manual Zephyr Tests

None

Issue

If a user sets a condition filter w/ a Conditions Combination on a Product content type, then anytime they attempt to edit the Product content type, the edit panel will fail to load, a server error will throw, console errors are thrown, & an infinite loading mask appears. See attachment

Expectations

• Edit panel loads successfully
• No errors
• Conditions filter filters correctly

Steps to Reproduce

• Create a CMS page w/ PageBuilder enabled
• Edit page in Content section
• Add Products to Row
• Edit Products
• Set Select Products By Condition
• Add a condition filter for Conditions Combination
• Save edit panel
• Open edit panel for Products again
• Note errors

Issue

When a Minimum Advertised Price is set on a product, a button appears on the product widget w/ text "Click for price". When clicked, it is supposed to show the value set for MAP along with other details that are set in store configuration. This button does not work in Page Builder (clicking it does not open modal). Additionally, in admin, the striked-through price is duplicated

• This bug occurs in 1.2.0, 1.1.0
• This bug does not occur in the catalog product list widget for short description when it uses wysiwyg.
• This bug occurs in the catalog product list widget in page builder & the products content type
• https://docs.magento.com/m2/ce/user_guide/catalog/product-price-minimum-advertised-configure.html

Expectation

MAP button works correctly on storefront in products content type for all appearances & for catalog product widget
Price is not duplicated in admin

Steps to Reproduce

• Set up MAP for on gesture (should be default)
• Create Product w/ MAP value that's less than product price
• Create CMS page w/ product content type that pulls this product
• Note admin price duplication issue
• Save CMS page & view on storefront
• Note that clicking the "Click for price" button does not work

Description (*)

The very basic scenario for responsiveness is that you may need to have 6 columns in a row for desktop, but 3 for mobile. PageBuilder not only does not provide such possibility, but also hardcodes the width: 100% into style="". As a result, you cannot even make website elements responsive with CSS as the styles are being overriden.

Expected behavior (*)

The bootstrap-like classes should be used for definition of with / number of columns, as a result, you would be able to declare that you want to display X columns in desktop, Y columns in mobile version.

Also - there should be no width hardcoded in style="" attribute.

Benefits

PageBuilder would support basic responsiveness

Additional information

I created a custom URL type like
https://i.ibb.co/xFbWjnR/pb3.png

When to set a value there, I can get the data like
https://i.ibb.co/cDLQXB4/pb2.png

when I saved the form I see the data is saved correctly
<a href="https://www.youtube.com/watch?v=NKidaFu0dWY" target="" data-link-type="video" src="" data-element="link">TEXT</a>

But when I load the page, the data doesn't show up and the Registry component doesn't bring anything
https://i.ibb.co/C68FBgM/pb1.png

Is it a bug issue or I missed something?

Preconditions:

• Magento Commerce 2.3.3
• PHP7.2.x
• Chrome (but other browsers can get same result

Seto to reproduce:

1. Create cms block via admin panel with double byte characters like "テスト".
2. Create cms page or block via admin panel and embed the block into column.
3. You can see broken encoded preview string.

Actual resut:

Expected result:

• Block can preview with no broken texts.

Additional information:

DOMDocument's default encoding is ISO-8859-1, so $content should be converted from UTF-8 to HTML-ENTITIES like

$content = mb_convert_encoding($content, 'HTML-ENTITIES', 'UTF-8');

Preconditions (*)

1. Magento 2.3.2
2. Php 7.2

Steps to reproduce (*)

when to set an event for image uploadAfter
Example;
_events.on("image:" + _this5.contentType.id + ":uploadAfter", function(args) {});

It is triggered on image_uploader.js of Pagebuilder But the preview image upload component is built by image_uploader.js of Pagebuilder because when open the setting popup the image upload component is built by image_uploader.js of Magento Ui (see the images below)

https://i.ibb.co/zbCVxD5/Screenshot-from-2019-08-15-10-28-03.png
https://i.ibb.co/qxYP4yF/Screenshot-from-2019-08-15-10-28-40.png

Expected result (*)

Those components should be built by image_uploader.js of Pagebuilder and both of them should trigger events

Actual result (*)

Only one of them triggers events

I have noticed an error when I test my google map API key even key is correct then also invalid key is outputted.

Steps to Reproduce:

1. Go to Stores->Configuration->Genral->Content Management->Advanced Content Tools.
2. Add Your Google Maps API Key.
3. Either correct key or wrong or right it shows only Key is invalid. Try a different key.
   For reference, the error screenshot is given below.