Page Builder full-screen editing (magento#787)

* Update for Page Builder UI changes in 2.4.1

src/_includes/page-builder-save-timeout.md

@@ -0,0 +1,5 @@
+<div class="bs-callout-info" markdown="1">
+When you are working in the Page Builder workspace, your content changes are not fully saved until you click the _Close Full Screen_ (![]({% link images/images-ee/icon-pb-reduce.png %})) icon in the upper-right corner of the workspace, and then click <span class="btn">Save</span> in the upper-right corner for the CMS page, product page, category page, block, or dynamic block.
+
+If you are making significant changes to Page Builder content, we recommend that you increase the [Admin Session Lifetime]({% link stores/security-admin.md %}) to prevent the session from timing out while you work.
+</div>

src/cms/page-builder-add-content-block.md

@@ -3,16 +3,18 @@ ee_only: true
 title: Add Content - Block
 ---
 
-Use the Block content type to add an existing, active block to the stage. In the following example, the first column contains the HTML Code for the page. The second column contains a block with a Google map.
+Use the _Block_ content type to add an existing, active [block]({% link cms/blocks.md %}) to the [Page Builder stage]({% link cms/page-builder-workspace.md %}#stage). In the following example, the first column contains the block with a side menu for the page. The second column contains an image.
 
-![]({% link images/images-ee/page-builder-add-content-block-map-about-us.png %}){: .zoom}
-_Block with map on the sample About Us Page_
+![]({% link images/images-ee/page-builder-add-content-block-example.png %}){: .zoom}
+_Block with a side menu_
+
+{% include page-builder-save-timeout.md %}
 
 ## Block toolbox
 
 | Tool      | Icon     | Description   |
 | --------- | -------- | ------------- |
-| Move      | ![]({% link images/images-ee/icon-pb-move.png %}) | Moves the block container and its content to another position on the stage.                            |
+| Move      | ![]({% link images/images-ee/icon-pb-move.png %}) | Moves the block container and its content to another position on the stage. |
 | Settings  | ![]({% link images/images-ee/icon-pb-settings.png %}) | Opens the Edit Block page, where you can choose the block, and change the properties of the container. |
 | Hide      | ![]({% link images/images-ee/icon-pb-hide.png %})  | Hides the current block container and its content. |
 | Show      | ![]({% link images/images-ee/icon-pb-show.png %}) | Shows the  hidden block container and its content. |
@@ -47,9 +49,7 @@ _Block with map on the sample About Us Page_
 
 1. Complete the remaining settings as needed, using the field descriptions at the end of this page for reference.
 
-1. When complete, click <span class="btn">Save</span> to return to the Page Builder workspace.
-
-1. On the **Save** menu in the upper-right corner, click **Save**.
+1. When complete, click <span class="btn">Save</span> to apply the settings and return to the Page Builder workspace.
 
 ### Advanced Settings
 
@@ -106,9 +106,7 @@ _Block with map on the sample About Us Page_
 
 1. Update the remaining settings as needed, using the field descriptions at the end of this page for reference.
 
-1. When complete, click <span class="btn">Save</span> to return to the Page Builder workspace.
-
-1. In the upper-right corner, click <span class="btn">Save</span>.
+1. When complete, click <span class="btn">Save</span> to apply the settings and return to the Page Builder workspace.
 
 ## Duplicate a block
 

src/cms/page-builder-add-content-products.md

@@ -3,7 +3,7 @@ ee_only: true
 title: Add Content - Products
 ---
 
-Use the _Products_ content type to add a list of products to the stage, using either a grid or carousel layout. You also can use the [Add Content - Block]({% link cms/page-builder-add-content-block.md %}) tool to place the block on the Page Builder stage and then place a product list within the block. Or, you can add the product list directly in a row on a page.
+Use the _Products_ content type to add a list of products to the [Page Builder stage]({% link cms/page-builder-workspace.md %}#stage), using either a grid or carousel layout. You also can use the [Add Content - Block]({% link cms/page-builder-add-content-block.md %}) tool to place the block on the Page Builder stage and then place a product list within the block. Or, you can add the product list directly in a row on a page.
 
 ## Guidelines for using the product carousel
 
@@ -25,6 +25,8 @@ The product carousel provides a powerful and engaging way to show off your produ
 
 The following instructions show how to add a Products list to a block. You can then use a [widget]({% link cms/widgets.md %}) to place the block at a specific location on any page in your store.
 
+{% include page-builder-save-timeout.md %}
+
 ## Products toolbox
 
 | Tool      | Icon          | Description       |
@@ -36,7 +38,7 @@ The following instructions show how to add a Products list to a block. You can t
 | Duplicate | ![]({% link images/images-ee/icon-pb-duplicate.png %}) | Makes a copy of the products container and its content.  |
 | Remove    | ![]({% link images/images-ee/icon-pb-remove.png %})| Deletes the products container and its content from the stage. |
 
-## Add a products list
+## Create a products list block
 
 1. On the _Admin_ sidebar, go to **Content** > _Elements_ > **Blocks**.
 
@@ -46,7 +48,7 @@ The following instructions show how to add a Products list to a block. You can t
 
 1. Choose the **Store View** where the block is to be available.
 
-1. Scroll down to the Page Builder workspace.
+1. Scroll down and click <span class="btn">Edit with Page Builder</span> or inside the content preview area to open the Page Builder workspace.
 
 1. In the Page Builder panel, expand **Add Content** and drag a **Products** placeholder to the stage.
 
@@ -172,7 +174,7 @@ Complete the _Settings_ according to the following sections:
    |Default|Applies the alignment default setting that is specified in the style sheet of the current theme.
    |Left|Aligns the list along the left border of the parent container, with allowance for any padding that is specified.
    |Center|Aligns the list in the center of the parent container, with allowance for any padding that is specified.
-   |Right|Aligns the block along the right border of the parent container, with allowance for any padding that is specified.
+   |Right|Aligns the list along the right border of the parent container, with allowance for any padding that is specified.
 
 1. Set the **Border** style applied to all four sides of the Products container:
 
@@ -208,13 +210,11 @@ Complete the _Settings_ according to the following sections:
 
 ## Save and preview on the stage
 
-1. In the upper-right corner, click <span class="btn">Save</span> to return to the Page Builder workspace.
-
-   If you configured a product carousel, it should look similar to the following example:
+In the upper-right corner, click <span class="btn">Save</span> to apply the settings and return to the Page Builder workspace.
 
-   ![Product carousel on the stage]({% link images/images-ee/page-builder-products-admin-carousel.png %}){: .zoom}
-   _Products carousel on the stage_
+If you configured a product carousel, it should look similar to the following example:
 
-1. In the upper-right corner of the page, click <span class="btn">Save</span> to save the changes to the block.
+![Product carousel on the stage]({% link images/images-ee/page-builder-products-admin-carousel.png %}){: .zoom}
+_Products carousel on the stage_
 
 You can now use a [widget]({% link cms/widgets.md %}) to place this block wherever you want it to appear in the store. Or, you can use [Add Content - Block]({% link cms/page-builder-add-content-block.md %}) to add the block to an existing page, tab, or block.

src/cms/page-builder-add-content.md

@@ -3,7 +3,10 @@ ee_only: true
 title: Page Builder - Add Content
 ---
 
-Use the _Add Content_ section of the Page Builder panel to add existing content to the stage. When you drag a media content type from the panel to the stage, a container appears. Use the content type toolbox to access the _Settings_ that are specific to the type.
+Use the _Add Content_ section of the Page Builder panel to add existing content to the [Page Builder stage]({% link cms/page-builder-workspace.md %}#stage). When you drag a media content type from the panel to the stage, a container appears. Use the content type toolbox to access the _Settings_ that are specific to the type.
+
+![]({% link images/images-ee/page-builder-add-content.png %}){: .zoom}
+_Page Builder panel with Add Content types_
 
 ## Add Content types
 
@@ -13,3 +16,4 @@ Use the _Add Content_ section of the Page Builder panel to add existing content
 | [Dynamic Block]({% link cms/page-builder-add-dynamic-block.md %}) | Adds an existing dynamic block to the stage. |
 | [Products]({% link cms/page-builder-add-content-products.md %})   | Adds a list of products to the stage.        |
 | [Product Recommendations]({% link marketing/page-builder-add-product-recs.md %}) | Adds a recommendation unit to the stage. |
+| [dotdigital form]({% link marketing/dotdigital/engagement-cloud.md %}) | Adds an Engagement Cloud form to the stage. |

src/cms/page-builder-add-dynamic-block.md

@@ -3,11 +3,13 @@ ee_only: true
 title: Add Content - Dynamic Block
 ---
 
-Use the Dynamic Block content type to add an existing [dynamic block]({% link cms/dynamic-blocks.md %}) to the Page Builder stage.
+Use the Dynamic Block content type to add an existing [dynamic block]({% link cms/dynamic-blocks.md %}) to the [Page Builder stage]({% link cms/page-builder-workspace.md %}#stage).
 
 ![]({% link images/images-ee/page-builder-tutorial2-dynamic-block-storefront.png %}){: .zoom}
 _Dynamic block on the storefront_
 
+{% include page-builder-save-timeout.md %}
+
 ## Dynamic Block toolbox
 
 | Tool      | Icon          | Description       |
@@ -25,7 +27,7 @@ _Dynamic block on the storefront_
 
 1. In the Page Builder panel, expand **Add Content** and drag a **Dynamic Block** placeholder to the stage.
 
-   []({% link images/images-ee/page-builder-dynamic-block-drag.png %}){: .zoom}
+   ![]({% link images/images-ee/page-builder-dynamic-block-drag.png %}){: .zoom}
    _Dragging a dynamic block placeholder to the stage_
 
 1. Hover over the empty dynamic block container to display the toolbox and choose the _Settings_ (![]({% link images/images-ee/icon-pb-settings.png %})) icon.
@@ -58,9 +60,7 @@ _Dynamic block on the storefront_
 
 1. Complete the Advanced settings as needed.
 
-1. When complete, click <span class="btn">Save</span> to return to the Page Builder workspace.
-
-1. In the upper-right corner, click <span class="btn">Save</span>.
+1. When complete, click <span class="btn">Save</span> to apply the settings and return to the Page Builder workspace.
 
 ### Advanced Settings
 
@@ -121,9 +121,7 @@ _Dynamic block on the storefront_
 
 1. Update the remaining settings as needed.
 
-1. When complete, click <span class="btn">Save</span> to return to the Page Builder workspace.
-
-1. In the upper-right corner, click <span class="btn">Save</span>.
+1. When complete, click <span class="btn">Save</span> to apply the settings and return to the Page Builder workspace.
 
 ## Duplicate a dynamic block
 

src/cms/page-builder-elements-buttons.md

@@ -3,11 +3,13 @@ ee_only: true
 title: Elements - Buttons
 ---
 
-Use the Buttons content type to add either an individual button or a set of buttons to the stage. Buttons can be arranged horizontally or vertically, and added directly to rows, columns, tabs, and banners on the stage.
+Use the _Buttons_ content type to add either an individual button or a set of buttons in the [Page Builder stage]({% link cms/page-builder-workspace.md %}#stage). You can arrange buttons horizontally or vertically, and add them directly to rows, columns, tabs, and banners on the stage.
 
 ![]({% link images/images-ee/page-builder-storefont-banner-with-button.png %}){: .zoom}
 _Banner with a button on the storefront_
 
+{% include page-builder-save-timeout.md %}
+
 ## Toolboxes
 
 When you are working with the Buttons content type, you add and edit individual buttons and the buttons container that holds one or more buttons. Each of these has its own toolbox that you use to design buttons on the Page Builder stage.
@@ -93,9 +95,7 @@ _Buttons container toolbox_
 
 1. Complete the [advanced settings][advanced-settings] as needed.
 
-1. When complete, click <span class="btn">Save</span> in the upper-right corner to close the _Edit Button_ page.
-
-1. In the upper-right corner, click <span class="btn">Save</span>.
+1. When complete, click <span class="btn">Save</span> in the upper-right corner to apply the settings and return to the Page Builder workspace.
 
 ## Add a set of buttons
 
@@ -126,7 +126,7 @@ The following sections describe a series of steps to start with an individual bu
 
 1. Complete the [advanced settings][advanced-settings] as needed.
 
-1. When complete, click <span class="btn">Save</span> to close the _Edit Button_ page.
+1. When complete, click <span class="btn">Save</span> to apply the settings and return to the Page Builder workspace.
 
 ### Step 2: Create the third button
 
@@ -144,7 +144,7 @@ The following sections describe a series of steps to start with an individual bu
 
 1. Update the **Button Link** as needed.
 
-1. In the upper-right corner, click <span class="btn">Save</span> to close the _Edit Button_ page and return to the Page Builder workspace.
+1. In the upper-right corner, click <span class="btn">Save</span> to apply the settings and return to the Page Builder workspace.
 
 ### Step 3: Update the button container
 
@@ -162,15 +162,13 @@ The following sections describe a series of steps to start with an individual bu
 
 1. Update the remaining settings as needed, using the descriptions from [Change settings for a button container][button-container].
 
-1. When complete, click <span class="btn">Save</span> to close the _Edit Buttons_ page and return to the Page Builder workspace.
+1. When complete, click <span class="btn">Save</span> to apply the settings and return to the Page Builder workspace.
 
    The complete stacked button set appears on the stage, with one primary button and two secondary buttons.
 
    ![]({% link images/images-ee/page-builder-elements-buttons-stacked.png %}){: .zoom}
    _Stacked buttons on the stage_
 
-1. In the upper-right corner, click <span class="btn">Save</span>.
-
 ## Move a button
 
 1. Click the button that you want to move.
@@ -225,7 +223,7 @@ The following sections describe a series of steps to start with an individual bu
 
 1. Complete the [Advanced settings][advanced-settings] as needed.
 
-1. When complete, click <span class="btn">Save</span> to close the _Edit Buttons_ page and return to the Page Builder workspace.
+1. When complete, click <span class="btn">Save</span> to apply the settings and return to the Page Builder workspace.
 
 ## Change advanced settings
 

src/cms/page-builder-elements-divider.md

@@ -3,7 +3,7 @@ ee_only: true
 title: Elements - Divider
 ---
 
-Use the Divider content type to add a rule as a visual break between sections of content on the stage. You can specify the line color, thickness, and width of the divider. You can also control the alignment, set the margins and padding, and format of the container border. By default, the divider is a hairline rule that extends the full width of the container, with allowance for padding.
+Use the _Divider_ content type to add a rule as a visual break between sections of content in the [Page Builder stage]({% link cms/page-builder-workspace.md %}#stage). You can specify the line color, thickness, and width of the divider. You can also control the alignment, set the margins and padding, and format of the container border. By default, the divider is a hairline rule that extends the full width of the container, with allowance for padding.
 
 ![]({% link images/images-ee/page-builder-elements-divider-default.png %}){: .zoom}
 _Default divider in a container without a border_
@@ -13,6 +13,8 @@ Although most divider containers are invisible, the following example displays t
 ![]({% link images/images-ee/page-builder-elements-divider-default-border-dashed.png %}){: .zoom}
 _Divider with padding in container with dashed border_
 
+{% include page-builder-save-timeout.md %}
+
 ## Divider toolbox
 
 | Tool | Icon                | Description |
@@ -111,13 +113,11 @@ _Divider with padding in container with dashed border_
       |Margins|The amount of blank space that is applied to the outside edge of all sides of the container. Options: Top / Right / Bottom / Left
       |Padding|The amount of blank space that is applied to the inside edge of all sides of the container. Options: Top / Right / Bottom / Left
 
-1. When complete, click <span class="btn">Save</span> and return to the Page Builder workspace.
+1. When complete, click <span class="btn">Save</span> to apply the settings and return to the Page Builder workspace.
 
    ![]({% link images/images-ee/page-builder-elements-divider-settings-2px-centered.png %}){: .zoom}
    _Divider centered in a row_
 
-1. In the upper-right corner, click <span class="btn">Save</span> for the page.
-
 ## Duplicate a divider
 
 For a formatted divider with specific settings, it is more efficient to make a duplicate, rather than start over with a new placeholder.
@@ -141,6 +141,4 @@ For a formatted divider with specific settings, it is more efficient to make a d
    ![]({% link images/images-ee/page-builder-elements-divider-move-guideline.png %}){: .zoom}
    _Moving the duplicated divider into position_
 
-1. In the upper-right corner of the page, click <span class="btn">Save</span>.
-
 [1]: https://en.wikipedia.org/wiki/Web_colors

src/cms/page-builder-elements-heading.md

@@ -3,7 +3,7 @@ ee_only: true
 title: Elements - Heading
 ---
 
-Heading levels establish a hierarchy that organizes content, and helps search engines index each page. Use the _Heading_ content type in the [Page Builder workspace]({% link cms/page-builder-workspace.md %}) to add a text container with a heading level from H1 to H6 to the stage. Headings are formatted according to the style sheet that is associated with the current theme.
+Heading levels establish a hierarchy that organizes content, and helps search engines index each page. Use the _Heading_ content type in the [Page Builder stage]({% link cms/page-builder-workspace.md %}#stage) to add a text container with a heading level from H1 to H6 to the stage. Headings are formatted according to the style sheet that is associated with the current theme.
 
 The [Content Heading]({% link cms/page-builder-workspace.md %}) field in the _Content_ section can be used to add an H1 heading to the top of the page. However, the field is a legacy from previous versions of Magento and is provided to support older content. Because this field does not take advantage of Page Builder’s advanced features, we recommend that you leave the Content Heading field blank and use the Page Builder Heading content type to add headings of any level to the page.
 
@@ -14,6 +14,8 @@ _Content Heading and heading Levels on the storefront_
 
 You can drag a heading from the _Elements_ section of the Page Builder panel to a row, column, or tab set on the stage. The heading level and alignment can be controlled from the editor toolbar on the stage, or by using the _Settings_ ( ![]({% link images/images-ee/icon-pb-settings.png %})) control.
 
+{% include page-builder-save-timeout.md %}
+
 ## Heading editor
 
 ![]({% link images/images-ee/page-builder-elements-heading-toolbar.png %}){: .zoom}
@@ -54,8 +56,6 @@ _Heading container toolbox_
 
 1. Change the alignment, if needed.
 
-1. When complete, click <span class="btn">Save</span> in the upper-right corner.
-
 ## Edit header settings
 
 1. Hover over the heading container to display the toolbox and choose the _Settings_ (![]({% link images/images-ee/icon-pb-settings.png %})) icon.
@@ -108,9 +108,7 @@ _Heading container toolbox_
       |Margins|The amount of blank space that is applied to the outside edge of all sides of the container. Options: Top / Right / Bottom / Left
       |Padding|The amount of blank space that is applied to the inside edge of all sides of the container. Options: Top / Right / Bottom / Left
 
-1. When complete, click <span class="btn">Save</span> and return to the Page Builder workspace.
-
-1. Click <span class="btn">Save</span> to save the page.
+1. When complete, click <span class="btn">Save</span> to apply the settings and return to the Page Builder workspace.
 
 ## Duplicate a heading