Merge pull request #18 from magento-devdocs/jh_migratepagebuilder

jhadobe · web-flow · commit 852fecafda4a · 2022-10-14T09:05:44.000-05:00
COMDOX-114 Migrate Page Builder to Developer Site
diff --git a/docs/administration/deactivate-pagebuilder.md b/docs/administration/deactivate-pagebuilder.md
@@ -1,3 +1,9 @@
+---
+title: Deactivate Page Builder
+migrated_to: https://developer.adobe.com/commerce/frontend-core/page-builder/deactivate-pagebuilder
+layout: migrated
+---
+
 # Deactivate Page Builder
 
 We recommend deactivating the Page Builder editor through the Admin UI instead of disabling the module with the CLI (`bin/magento`). If you use the CLI, you could break various layouts, for example, the full-width layouts. Deactivating from the Admin UI allows the Page Builder module to continue rendering the content on the storefront even if the editor is not used in the Admin.
diff --git a/docs/administration/upgrade-content-types.md b/docs/administration/upgrade-content-types.md
@@ -1,3 +1,9 @@
+---
+title: Upgrade content types
+migrated_to: https://developer.adobe.com/commerce/frontend-core/page-builder/upgrade-content-types
+layout: migrated
+---
+
 # Upgrade content types
 
 Before version 1.3, if we updated our content-type configurations and sent them out with a new version of Page Builder, it could break the data you saved using the previous version. This happened because the configuration data of a content type is mapped to the content type's display templates. So when we change a configuration, the display of existing content might also change. With significant changes, the data from the appearance `element` nodes (`attributes`, `css`, `html`, `style`, and `tag`) is lost. Such changes cause existing content to appear incorrectly, or not at all.
diff --git a/docs/administration/use-for-product-attributes.md b/docs/administration/use-for-product-attributes.md
@@ -1,3 +1,9 @@
+---
+title: Use Page Builder for product attributes
+migrated_to: https://developer.adobe.com/commerce/frontend-core/page-builder/use-for-product-attributes
+layout: migrated
+---
+
 # Use Page Builder for product attributes
 
 The Page Builder module is compatible with all product attribute fields that use an input of type `text`.
diff --git a/docs/architecture/configurations.md b/docs/architecture/configurations.md
@@ -1,3 +1,9 @@
+---
+title: Content type configurations
+migrated_to: https://developer.adobe.com/commerce/frontend-core/page-builder/architecture/configurations
+layout: migrated
+---
+
 # Content type configurations
 
 Content type configurations are how you define your content types to Page Builder. Creating new content types, extending content-types, and customizing content types all starts with an XML configuration file.
diff --git a/docs/architecture/data-store.md b/docs/architecture/data-store.md
@@ -1,3 +1,9 @@
+---
+title: Page Builder data store
+migrated_to: https://developer.adobe.com/commerce/frontend-core/page-builder/architecture/data-store
+layout: migrated
+---
+
 # Page Builder data store
 
 The data store is a utility class that stores the user's input data for a content type. When Page Builder creates a content type, either from the master storage format or from a user dragging and dropping a content type, Page Builder also creates a data store instance for that content type. Whenever the user modifies a content type, either by editing it on the stage or from the UI component form, Page Builder updates the data store with the new data. The master format and preview both fetch the data required for their render from the data store.
diff --git a/docs/architecture/events.md b/docs/architecture/events.md
@@ -1,3 +1,9 @@
+---
+title: Page Builder events
+migrated_to: https://developer.adobe.com/commerce/frontend-core/page-builder/architecture/events
+layout: migrated
+---
+
 # Page Builder events
 
 {% raw %}
diff --git a/docs/architecture/knockout-bindings.md b/docs/architecture/knockout-bindings.md
@@ -1,3 +1,9 @@
+---
+title: Page Builder Knockout bindings
+migrated_to: https://developer.adobe.com/commerce/frontend-core/page-builder/architecture/knockout-bindings
+layout: migrated
+---
+
 # Page Builder Knockout bindings
 
 As part of the Page Builder application, we provide a number of several new Knockout bindings to add more functionality to certain content types through Knockouts binding syntax.
diff --git a/docs/architecture/overview.md b/docs/architecture/overview.md
@@ -1,3 +1,9 @@
+---
+title: Page Builder Architecture
+migrated_to: https://developer.adobe.com/commerce/frontend-core/page-builder/architecture/
+layout: migrated
+---
+
 # Page Builder Architecture
 
 We wrote Page Builder in [TypeScript], a superset of JavaScript. Before each release, we transpile the TypeScript to JavaScript.
diff --git a/docs/content-types/create/add-components.md b/docs/content-types/create/add-components.md
@@ -1,3 +1,9 @@
+---
+title: Add components
+migrated_to: https://developer.adobe.com/commerce/frontend-core/page-builder/content-types/create/add-components
+layout: migrated
+---
+
 # Add components
 
 In this step, we will create a preview component in order to customize the options menu for our Quote. The options menu is the popup menu that appears when you mouseover a content type, as shown here:
diff --git a/docs/content-types/create/add-configuration.md b/docs/content-types/create/add-configuration.md
@@ -1,3 +1,9 @@
+---
+title: Add configuration
+migrated_to: https://developer.adobe.com/commerce/frontend-core/page-builder/content-types/create/add-configuration
+layout: migrated
+---
+
 # Add configuration
 
 The configuration file defines the settings and references to your content type files. You will return to this file often to update references and change settings during the development process.
diff --git a/docs/content-types/create/add-form.md b/docs/content-types/create/add-form.md
@@ -1,3 +1,9 @@
+---
+title: Add form
+migrated_to: https://developer.adobe.com/commerce/frontend-core/page-builder/content-types/create/add-form
+layout: migrated
+---
+
 # Add form
 
 In this step, we will create a UI component form. This form will give users another way to enter text for the Quote and style the text's appearance.
diff --git a/docs/content-types/create/add-icon.md b/docs/content-types/create/add-icon.md
@@ -1,3 +1,9 @@
+---
+title: Add icon
+migrated_to: https://developer.adobe.com/commerce/frontend-core/page-builder/content-types/create/add-icon
+layout: migrated
+---
+
 # Add icon
 
 In this last step, we will create a panel icon for our Quote content type so that it has a unique but visually consistent identity alongside Page Builder's native font icons. When finished, the panel icon for our Quote content type will look like this:
diff --git a/docs/content-types/create/add-styles.md b/docs/content-types/create/add-styles.md
@@ -1,3 +1,9 @@
+---
+title: Add styles
+migrated_to: https://developer.adobe.com/commerce/frontend-core/page-builder/content-types/create/add-styles
+layout: migrated
+---
+
 # Add styles
 
 In this step, we will create CSS styles (using LESS) to define the Quote's base appearance. We will also create several optional CSS classes that end-users can apply to our Quote.
diff --git a/docs/content-types/create/add-templates.md b/docs/content-types/create/add-templates.md
@@ -1,3 +1,9 @@
+---
+title: Add templates
+migrated_to: https://developer.adobe.com/commerce/frontend-core/page-builder/content-types/create/add-templates
+layout: migrated
+---
+
 # Add templates
 
 Content type templates are the HTML files (HTML fragments) that define how your content type *appears* on both the Admin stage and within your storefront. The combination of these templates (one `preview.html` and one `master.html`) creates an `appearance`. As discussed in the previous configuration step, you must have at least one `appearance` (two templates) defined for your content type. But like the Banner, you can define several appearances for users to choose from as shown here:
diff --git a/docs/content-types/create/introduction.md b/docs/content-types/create/introduction.md
@@ -1,3 +1,9 @@
+---
+title: Introduction to creating content types
+migrated_to: https://developer.adobe.com/commerce/frontend-core/page-builder/content-types/create/
+layout: migrated
+---
+
 # Introduction to creating content types
 
 Page Builder comes with several content types (controls) you can use to build your storefront pages. In this tutorial, you will add a new content type: a **Quote** control, which you can use to show customer testimonials or other types of quotations within your storefront.
diff --git a/docs/content-types/create/troubleshooting.md b/docs/content-types/create/troubleshooting.md
@@ -1,3 +1,9 @@
+---
+title: Troubleshooting
+migrated_to: https://developer.adobe.com/commerce/frontend-core/page-builder/content-types/create/troubleshooting
+layout: migrated
+---
+
 # Troubleshooting
 
 ## Change in the master.html is not visible
diff --git a/docs/content-types/customize/add-additional-data.md b/docs/content-types/customize/add-additional-data.md
@@ -1,3 +1,9 @@
+---
+title: Add additional data
+migrated_to: https://developer.adobe.com/commerce/frontend-core/page-builder/content-types/customize/
+layout: migrated
+---
+
 # Add additional data
 
 This topic describes how to extend and configure Page Builder content types to accommodate any preferred setting that is not addressed in the confines of our existing `content_type.xsd` schema definition.
diff --git a/docs/content-types/customize/add-block-chooser.md b/docs/content-types/customize/add-block-chooser.md
@@ -1,3 +1,9 @@
+---
+title: Add a block chooser
+migrated_to: https://developer.adobe.com/commerce/frontend-core/page-builder/content-types/customize/add-block-chooser
+layout: migrated
+---
+
 # Add a block chooser
 
 This topic describes how to use the block chooser UI component for a custom content type.
diff --git a/docs/content-types/customize/add-custom-toolbar.md b/docs/content-types/customize/add-custom-toolbar.md
@@ -1,3 +1,9 @@
+---
+title: Add a custom toolbar
+migrated_to: https://developer.adobe.com/commerce/frontend-core/page-builder/content-types/customize/add-custom-toolbar
+layout: migrated
+---
+
 # Add a custom toolbar
 
 This topic shows you how to implement an inline toolbar for your content type. You can see an example of a toolbar in Page Builder's Heading content type, as shown here:
diff --git a/docs/content-types/customize/add-icons-images.md b/docs/content-types/customize/add-icons-images.md
@@ -1,3 +1,9 @@
+---
+title: Add icons and images
+migrated_to: https://developer.adobe.com/commerce/frontend-core/page-builder/content-types/customize/add-icons-images
+layout: migrated
+---
+
 # Add icons and images
 
 Page Builder Admin icons follow the same design principles as the core [Magento Admin icons]. They are simple, flat, and monochromatic to prevent the loss of detail at smaller sizes, while making their shapes easier to comprehend.
diff --git a/docs/content-types/customize/add-image-uploader.md b/docs/content-types/customize/add-image-uploader.md
@@ -1,3 +1,9 @@
+---
+title: Add an image uploader
+migrated_to: https://developer.adobe.com/commerce/frontend-core/page-builder/content-types/customize/add-image-uploader
+layout: migrated
+---
+
 # Add an image uploader
 
 This topic describes how to add the image uploader component to your content type so that end-users can add images from the Admin stage as needed.
diff --git a/docs/content-types/customize/add-storefront-widget.md b/docs/content-types/customize/add-storefront-widget.md
@@ -1,3 +1,9 @@
+---
+title: Add a storefront widget
+migrated_to: https://developer.adobe.com/commerce/frontend-core/page-builder/content-types/customize/add-storefront-widget
+layout: migrated
+---
+
 # Add a storefront widget
 
 A storefront widget is a JavaScript component that handles the behavior of a content type after Page Builder renders it on the storefront. For example, the Tabs and Sliders have their own storefront widgets to handle the end-user's tapping of tabs and swiping of slides on the storefront.
diff --git a/docs/content-types/customize/add-text-editor.md b/docs/content-types/customize/add-text-editor.md
@@ -1,3 +1,9 @@
+---
+title: Add a text editor
+migrated_to: https://developer.adobe.com/commerce/frontend-core/page-builder/content-types/customize/add-text-editor
+layout: migrated
+---
+
 # Add a text editor
 
 This topic describes how to add a reusable inline text editing component to the Page Builder stage for a content type.
diff --git a/docs/content-types/customize/add-visual-selector.md b/docs/content-types/customize/add-visual-selector.md
@@ -1,3 +1,9 @@
+---
+title: Add a visual selector
+migrated_to: https://developer.adobe.com/commerce/frontend-core/page-builder/content-types/customize/add-visual-selector
+layout: migrated
+---
+
 # Add a visual selector
 
 In Page Builder, we use a term called _visual selector_, which refers to a UI select control that makes its options visually clear to end users. You can see examples of these selectors in Page Builder's content type form fields for **Background Type**, **Background Size**, **Alignment**, and more. This topic describes how to add these visual selector controls to your own content types.
diff --git a/docs/content-types/customize/apply-product-conditions.md b/docs/content-types/customize/apply-product-conditions.md
@@ -1,3 +1,9 @@
+---
+title: Apply product conditions
+migrated_to: https://developer.adobe.com/commerce/frontend-core/page-builder/content-types/customize/apply-product-conditions
+layout: migrated
+---
+
 # Apply product conditions
 
 Out-of-the-box, product conditions can be set on Page Builder's Product content type to define which products you want to display based on a variety of product attributes. For example, if you only want display products in a category with a price greater than $50, you would set up a condition for the product as shown here:
diff --git a/docs/content-types/customize/configure-panel.md b/docs/content-types/customize/configure-panel.md
@@ -1,3 +1,9 @@
+---
+title: Configure the panel
+migrated_to: https://developer.adobe.com/commerce/frontend-core/page-builder/content-types/customize/configure-panel
+layout: migrated
+---
+
 # Configure the panel
 
 By default, the Page Builder panel has four menu sections (Layout, Elements, Media, Add Content) and 16 content types as shown here:
diff --git a/docs/content-types/customize/render-server-side-preview.md b/docs/content-types/customize/render-server-side-preview.md
@@ -1,3 +1,9 @@
+---
+title: Render server-side previews
+migrated_to: https://developer.adobe.com/commerce/frontend-core/page-builder/content-types/customize/render-server-side-preview
+layout: migrated
+---
+
 # Render server-side previews
 
 This topic describes how to use the `RenderPool` on the stage to render a backend preview.
diff --git a/docs/content-types/extend/add-appearances.md b/docs/content-types/extend/add-appearances.md
@@ -1,3 +1,9 @@
+---
+title: Add appearances
+migrated_to: https://developer.adobe.com/commerce/frontend-core/page-builder/content-types/extend/add-appearances
+layout: migrated
+---
+
 # Add appearances
 
 This topic shows you how to add an appearance to Page Builder's native content types. An overview of the steps and the files you need to add are illustrated here:
diff --git a/docs/content-types/extend/extend-appearances.md b/docs/content-types/extend/extend-appearances.md
@@ -1,3 +1,9 @@
+---
+title:# Extend an appearance
+migrated_to: https://developer.adobe.com/commerce/frontend-core/page-builder/content-types/extend/extend-appearances
+layout: migrated
+---
+
 ## Extend an appearance
 
 In this topic, you will learn how to add a new user-defined property to an existing content type. Specifically, we will add a `max-height` property to all the Banner appearances. Why? Because our customers told us to, drill sergeant. [(WTM?)](https://www.youtube.com/watch?v=U6VPEcj77v8 "What's That Movie?").
diff --git a/docs/content-types/extend/extend-more-appearances.md b/docs/content-types/extend/extend-more-appearances.md
@@ -1,3 +1,9 @@
+---
+title: Extend another appearance
+migrated_to: https://developer.adobe.com/commerce/frontend-core/page-builder/content-types/extend/extend-more-appearances
+layout: migrated
+---
+
 # Extend another appearance
 
 Out of the box, Page Builder provides a variety of interactive CSS styling options for your content types. For example, Page Builder's `Heading` content type provides options for setting heading types (`h1` through `h6`), text alignments, border properties, margins, and paddings. It also lets users apply one or more static CSS classes by entering them into a text input field.
diff --git a/docs/content-types/extend/introduction.md b/docs/content-types/extend/introduction.md
@@ -1,3 +1,9 @@
+---
+title: Introduction to extending content types
+migrated_to: https://developer.adobe.com/commerce/frontend-core/page-builder/content-types/extend/
+layout: migrated
+---
+
 # Introduction to extending content types
 
 {:.topic-intro}
diff --git a/docs/contributors.md b/docs/contributors.md
@@ -1,3 +1,9 @@
+---
+title: Install Page Builder
+migrated_to: https://developer.adobe.com/commerce/frontend-core/page-builder/contributors
+layout: migrated
+---
+
 # Install Page Builder
 
 {: .bs-callout-info }
diff --git a/docs/index.md b/docs/index.md
@@ -1,3 +1,9 @@
+---
+title: What is Page Builder?
+migrated_to: https://developer.adobe.com/commerce/frontend-core/page-builder/
+layout: migrated
+---
+
 # What is Page Builder?
 
 Page Builder is a Magento extension for creating content by dragging-and-dropping pre-built controls. 
diff --git a/docs/migration/how-content-migration-works.md b/docs/migration/how-content-migration-works.md
@@ -1,3 +1,9 @@
+---
+title: How content migration works
+migrated_to: https://developer.adobe.com/commerce/frontend-core/page-builder/migration/how-content-migration-works
+layout: migrated
+---
+
 # How content migration works
 
 Each content type has a corresponding renderer to convert the old BlueFoot JSON structure into the new PageBuilder format. The Page Builder format uses HTML to store all data associated with the content type within the DOM tree through attributes, styles, and child nodes. See [Page Builder architecture](../architecture/overview.md) and [Configurations](../architecture/configurations.md) for more information.
diff --git a/docs/migration/install-migration-module.md b/docs/migration/install-migration-module.md
@@ -1,3 +1,9 @@
+---
+title: Install the migration module
+migrated_to: https://developer.adobe.com/commerce/frontend-core/page-builder/migration/install-migration-module
+layout: migrated
+---
+
 # Install the migration module
 
 The migration module is a composer package hosted within our repository. This package is only available for those with Commerce access keys.
diff --git a/docs/migration/migrate-content-custom-blocks.md b/docs/migration/migrate-content-custom-blocks.md
@@ -1,3 +1,9 @@
+---
+title: Migrate content from custom blocks
+migrated_to: https://developer.adobe.com/commerce/frontend-core/page-builder/migration/migrate-content-custom-blocks
+layout: migrated
+---
+
 # Migrate content from custom blocks
 
 This topic describes how to migrate content from your custom BlueFoot blocks to Page Builder custom content types.
diff --git a/docs/migration/migrate-other-bluefoot-content.md b/docs/migration/migrate-other-bluefoot-content.md
@@ -1,3 +1,9 @@
+---
+title: Migrate other BlueFoot content
+migrated_to: https://developer.adobe.com/commerce/frontend-core/page-builder/migration/migrate-other-bluefoot-content
+layout: migrated
+---
+
 # Migrate other BlueFoot content
 
 By default, the migration module only migrates content from these tables of the Magento database:
diff --git a/docs/migration/overview.md b/docs/migration/overview.md
@@ -1,3 +1,9 @@
+---
+title: Overview of content migration
+migrated_to: https://developer.adobe.com/commerce/frontend-core/page-builder/migration/
+layout: migrated
+---
+
 # Overview of content migration
 
 Our content migration module (`PageBuilderDataMigration`) enables BlueFoot users to migrate *the content* from their BlueFoot blocks to the new Page Builder content types. The migration module does not convert the code from the BlueFoot blocks; it only migrates the content.
diff --git a/docs/migration/run-migration-module.md b/docs/migration/run-migration-module.md
@@ -1,3 +1,9 @@
+---
+title: Run the migration module
+migrated_to: https://developer.adobe.com/commerce/frontend-core/page-builder/migration/run-migration-module
+layout: migrated
+---
+
 # Run the migration module
 
 {:.bs-callout-warning }
diff --git a/docs/pagebuilder-examples.md b/docs/pagebuilder-examples.md
@@ -1,3 +1,9 @@
+---
+title: Install Page Builder example modules
+migrated_to: https://developer.adobe.com/commerce/frontend-core/page-builder/pagebuilder-examples
+layout: migrated
+---
+
 # Install Page Builder example modules
 
 Learning by example is one of the best ways to absorb the knowledge you need when learning new development tasks. We take that approach to heart and have tried to provide several example modules that focus on different areas of Page Builder development.
diff --git a/docs/release-notes.md b/docs/release-notes.md
diff --git a/docs/styles/introduction.md b/docs/styles/introduction.md
diff --git a/docs/styles/override-pagebuilder-styles.md b/docs/styles/override-pagebuilder-styles.md
diff --git a/docs/styles/use-htmlcode-to-override-styles.md b/docs/styles/use-htmlcode-to-override-styles.md
diff --git a/docs/styles/use-modules-to-override-styles.md b/docs/styles/use-modules-to-override-styles.md
diff --git a/docs/styles/use-themes-to-override-styles.md b/docs/styles/use-themes-to-override-styles.md
diff --git a/docs/viewports/add-breakpoints.md b/docs/viewports/add-breakpoints.md
diff --git a/docs/viewports/add-viewports.md b/docs/viewports/add-viewports.md
diff --git a/docs/viewports/change-breakpoints-viewports.md b/docs/viewports/change-breakpoints-viewports.md
diff --git a/docs/viewports/introduction.md b/docs/viewports/introduction.md
diff --git a/docs/viewports/use-breakpoints.md b/docs/viewports/use-breakpoints.md
diff --git a/docs/viewports/use-viewports.md b/docs/viewports/use-viewports.md
