Port PR #2480: Content-type Builder revamp (stable release) to next branch

Author: actions-user

docusaurus/docs/cms/features/content-type-builder.md

@@ -17,22 +17,13 @@ import ScreenshotNumberReference from '/src/components/ScreenshotNumberReference
 
 From the <Icon name="layout" /> Content-type Builder, accessible via the main navigation of the admin panel, users can create and edit their content types.
 
-:::prerequisites Identity Card of the Content-type Builder
-<Icon name="user"/> **Role & permission:** Minimum "Read" permission in Roles > Plugins - Content Type Builder. <br/>
-<Icon name="laptop"/> **Environment:** Available in Development environment only.
-:::
+<IdentityCard>
+  <IdentityCardItem icon="user" title="Role & permission">Minimum "Read" permission in Roles > Plugins - Content Type Builder.</IdentityCardItem>
+  <IdentityCardItem icon="desktop" title="Environment">Available in Development environment only.</IdentityCardItem>
+</IdentityCard>
 
 ## Overview
 
-<!-- Replace with Guideflow -->
-<!-- <ThemedImage
-  alt="Content-type Builder interface"
-  sources={{
-    light: '/img/assets/content-type-builder/content-types-builder.png',
-    dark: '/img/assets/content-type-builder/content-types-builder_DARK.png',
-  }}
-/> -->
-
 <Guideflow lightId="vkm9jeqb2p" darkId="lpnz47qtep" />
 
 The <Icon name="layout" /> Content-type Builder allows the creation and management of content-types, which can be:
@@ -47,19 +38,22 @@ All 3 are displayed as categories in the sub navigation of the <Icon name="layou
 Click the search icon <Icon name="magnifying-glass" classes="ph-bold" /> in the <Icon name="layout" /> Content-type Builder sub navigation to find a specific collection type, single type, or component.
 :::
 
+In the Content-type Builder's sub navigation is also displayed a centralised **Save** button that applies for all content-types and components. Along with the display of statuses for both content-types/components and fields, this allows you to work on several content-types and components at the same time. The following statuses can be displayed:
+
+- `New` or `N` indicates that a content-type/component or field is new and hasn't been saved yet,
+- `Modified` or `M` indicates that a content-type/component or field has been modified since the last save,
+- `Deleted` or `D` indicates that a content-type/component or field has been deleted but that it will only be confirmed once saved.
+
+:::note
+Clicking on the **...** button next to **Save** gives access to other options, such as **Undo/Redo last change** and **Discard all changes**. These options are also centralised, meaning that they apply to the last action(s) that was/were done on all content-types, components and fields since the last time you saved.
+:::
+
 ## Usage
 
 <br/>
 
 ### Creating content-types
 
-<!-- MAY BE REMOVED - FEELS REDUNDANT WITH ID CARD
-
-:::note Development-only
-The Content-type Builder is only accessible to create and update content-types when your Strapi application is in a development environment, else it will be in a read-only mode in other environments.
-:::
--->
-
 The Content-type Builder allows to create new content-types: single and collection types, but also components.
 
 #### New content-type
@@ -77,14 +71,10 @@ The Content-type Builder allows to create new content-types: single and collecti
 3. In the content-type creation window, write the name of the new content-type in the *Display name* textbox.
 4. Check the *API ID* to make sure the automatically pre-filled values are correct. Collection type names are indeed automatically pluralized when displayed in the Content Manager. It is recommended to opt for singular names, but the *API ID* field allows to fix any pluralization mistake.
 5. (optional) In the Advanced Settings tab, configure the available settings for the new content-type:
-
       | Setting name    | Instructions                                                                                                                                     |
       |-----------------|--------------------------------------------------------------------------------------------------------------------------------------------------|
       | Draft & publish | Tick the checkbox to allow entries of the content-type to be managed as draft versions, before they are published (see [Draft & Publish](/cms/features/draft-and-publish)). |
       | Internationalization | Tick the checkbox to allow entries of the content-type to be translated into other locales. |
-<!--
-| Review workflows | <EnterpriseBadge /> Tick the checkbox to allow entries of the content-type to be managed through defined review stages (see [Managing Review Workflows](/cms/features/review-workflows#configuration)). |
--->
 6. Click on the **Continue** button.
 7. Add and configure chosen fields for your content-type (see [Configuring fields for content-types](#configuring-fields-content-type)).
 8. Click on the **Save** button.
@@ -119,21 +109,20 @@ The Content-type Builder allows to manage all existing content-types. For an cho
 <ThemedImage
   alt="Content-type Builder's edition interface"
   sources={{
-    light: '/img/assets/content-type-builder/content-types-builder_edition.png',
-    dark: '/img/assets/content-type-builder/content-types-builder_edition_DARK.png',
+    light: '/img/assets/content-type-builder/new_CTB.png',
+    dark: '/img/assets/content-type-builder/new_CTB_DARK.png',
   }}
 />
 
-- Click on the **Add new/another field** button <ScreenshotNumberReference number="1" /> in the top right corner to add more fields to your content-type.
-- In the table that displays the fields of your content-type <ScreenshotNumberReference number="2" />, click on the <Icon name="pencil-simple" /> and/or <Icon name="trash" /> buttons to respectively edit and/or delete these fields.
-- Click on the <Icon name="pencil-simple" /> **Edit** button <ScreenshotNumberReference number="3" /> to access the basic and advanced settings of your content-type:
+#### Settings
+
+1. Click on the <Icon name="pencil-simple" /> **Edit** button of your content-type to access its settings.
+2. Edit the available settings of your choice:
 
   <Tabs groupId="CTSettings">
 
   <TabItem value="CTBasicSettings" label="Basic settings">
 
-  The **Basic Settings** tab allows to edit the following properties of the content-type or component:
-
   <ThemedImage
     alt="Content-type Builder's basic settings"
     sources={{
@@ -151,8 +140,6 @@ The Content-type Builder allows to manage all existing content-types. For an cho
 
   <TabItem value="CTAdvancedSettings" label="Advanced settings">
 
-  The **Advanced Settings** tab allows to edit the following properties of the content-type or component:
-
   <ThemedImage
     alt="Content-type Builder's advanced settings"
     sources={{
@@ -167,22 +154,23 @@ The Content-type Builder allows to manage all existing content-types. For an cho
   </TabItem>
 
   </Tabs>
+3. Click the **Finish** button in the dialog.
+4. Click the **Save** button in the Content-Type Builder navigation.
 
-- Click on the **Save** button <ScreenshotNumberReference number="4" /> to confirm any ongoing modification.
+#### Fields
+
+From the table that lists the fields of your content-type, you can:
+- Click on the <Icon name="pencil-simple" /> button to access a field's basic and advanced settings to edit them
+- Click on the **Add another field** buttons to create a new field for the selected content-type
+- Click on the <Icon name="dots-six-vertical" classes="ph-bold"/> button and drag and drop any field to reorder the content-type's fields
+- Click on the <Icon name="trash" /> button to delete a field
 
 :::caution
 Editing a field allows renaming it. However, keep in mind that regarding the database, renaming a field means creating a whole new field and deleting the former one. Although nothing is deleted from the database, the data that was associated with the former field name will not be accessible from the admin panel of your application anymore.
 :::
 
 ### Configuring content-types fields {#configuring-fields-content-type}
 
-<!-- MAY BE REMOVED - FEELS REDUNDANT WITH ID CARD 
-
-:::note Development-only
-The Content-type Builder is only accessible to create and update content-types when your Strapi application is in a development environment, else it will be in a read-only mode in other environments.
-:::
--->
-
 Content-types are composed of one or several fields. Each field is designed to contain specific kind of data, filled up in the Content Manager (see [Creating & Writing content](/cms/features/content-manager#creating--writing-content)).
 
 In the <Icon name="layout" /> Content-type Builder, fields can be added at the creation of a new content-type or component, or afterward when a content-type or component is edited or updated.
@@ -533,8 +521,6 @@ The Password field displays a password field that is encrypted.
 
 The Enumeration field allows to configure a list of values displayed in a drop-down list.
 
-<!--- Add note about Enumeration fields known issues (i.e. recommending a relation using either oneWay or manyWay for some use-cases instead of enum) --->
-
 <Tabs>
 
 <TabItem value="base" label="Base settings">
@@ -708,6 +694,7 @@ Content types and components can be deleted through the Content-type Builder. De
 2. In the edition interface of the chosen content-type or component, click on the <Icon name="pencil-simple" /> **Edit** button on the right side of the content-type's or component's name.
 3. In the edition window, click on the **Delete** button.
 4. In the confirmation window, confirm the deletion.
+5. Click on the **Save** button in the Content-type Builder sub navigation.
 
 :::caution
 Deleting a content-type only deletes what was created and available from the Content-type Builder, and by extent from the admin panel of your Strapi application. All the data that was created based on that content-type is however kept in the database. For more information, please refer to the related <ExternalLink to="https://github.com/strapi/strapi/issues/1114" text="GitHub issue"/>.
@@ -716,7 +703,7 @@ Deleting a content-type only deletes what was created and available from the Con
 <ThemedImage
   alt="Deletion of content type in Content-type Builder"
   sources={{
-    light: '/img/assets/content-type-builder/ctb-delete.png',
-    dark: '/img/assets/content-type-builder/ctb-delete_DARK.png',
+    light: '/img/assets/content-type-builder/new_CTB_deletion.png',
+    dark: '/img/assets/content-type-builder/new_CTB_deletion_DARK.png',
   }}
 />