Merge pull request #298004 from dlepow/devtut

[APIM] Update dev portal UX

Author: JamesJBarnett

articles/api-management/api-management-howto-developer-portal-customize.md

@@ -6,7 +6,7 @@ author: dlepow
 
 ms.service: azure-api-management
 ms.topic: tutorial
-ms.date: 03/29/2024
+ms.date: 04/28/2025
 ms.author: danlep
 ms.custom: engagement-fy23
 ---
@@ -28,7 +28,7 @@ In this tutorial, you learn how to:
 
 For more information about developer portal features and options, see [Azure API Management developer portal overview](developer-portal-overview.md).
 
-:::image type="content" source="media/api-management-howto-developer-portal-customize/cover.png" alt-text="Screenshot of the API Management developer portal - administrator mode." border="false":::
+:::image type="content" source="media/api-management-howto-developer-portal-customize/cover.png" alt-text="Screenshot of the API Management developer portal - administrator mode." :::
 
 ## Prerequisites
 
@@ -49,6 +49,8 @@ Follow these steps to access the managed version of the developer portal.
     It might take a few minutes to enable the developer portal.
 1. In the left menu, under **Developer portal**, select **Portal overview**. Then select the **Developer portal** button in the top navigation bar. A new browser tab with an administrative version of the portal will open.
 
+[!INCLUDE [developer-portal-editor-refresh](../../includes/developer-portal-editor-refresh.md)] 
+
 ## Understand the portal's administrative interface
 
 [!INCLUDE [api-management-developer-portal-editor](../../includes/api-management-developer-portal-editor.md)]
@@ -70,7 +72,7 @@ You'll want to use your own images and other media content in the developer port
 
 A placeholder logo is provided in the top left corner of the navigation bar. You can replace it with your own logo to match your organization's branding.
 
-1. In the developer portal, select the default **Contoso** logo in the top left of the navigation bar. 
+1. In the developer portal, select the default logo in the top left of the navigation bar. 
 1. Select **Edit**. 
 1. In the **Picture** pop-up, under **Main**, select **Source**.
 1. In the **Media** pop-up, select one of the following:

articles/api-management/developer-portal-overview.md

@@ -7,7 +7,7 @@ author: dlepow
 
 ms.service: azure-api-management
 ms.topic: concept-article
-ms.date: 03/29/2024
+ms.date: 04/28/2025
 ms.author: danlep 
 ---
 
@@ -76,21 +76,18 @@ The developer portal's administrative interface provides a visual editor for pub
 
 [!INCLUDE [api-management-developer-portal-add](../../includes/api-management-developer-portal-add.md)]
 
-[!INCLUDE [api-management-developer-portal-wordpress](../../includes/api-management-developer-portal-wordpress.md)]
+### Pages and layouts
 
+The pre-provisioned content in the developer portal showcases pages with commonly used features. Find them on the **Pages** panel. You can modify the content of these pages or add new ones to suit your needs.
 
-### Layouts and pages
-
-Layouts define how pages are displayed. For example, in the default content, there are two layouts: one applies to the home page, and the other to all remaining pages. You can modify these layouts and add more layouts to suit your needs.
+Select **Layouts** on the **Pages** panel to define how pages are displayed. The developer portal comes with a default layout that's applied to the pages. You can modify this layout and add more layouts to suit your needs.
 
 A layout gets applied to a page by matching its URL template to the page's URL. For example, a layout with a URL template of `/wiki/*` is applied to every page with the `/wiki/` segment in the URL: `/wiki/getting-started`, `/wiki/styles`, etc.
 
 In the following image, content belonging to the layout is outlined in blue, while the page-specific content is outlined in red. 
 
 :::image type="content" source="media/developer-portal-overview/pages-layouts.png" alt-text="Screenshot of layout content in the developer portal." :::
 
-The pre-provisioned content in the developer portal showcases pages with commonly used features. You can modify the content of these pages or add new ones to suit your needs.
-
 > [!NOTE]
 > Due to integration considerations, the following pages can't be removed or moved under a different URL: `/404`, `/500`, `/captcha`, `/change-password`, `/config.json`, `/confirm/invitation`, `/confirm-v2/identities/basic/signup`, `/confirm-v2/password`, `/internal-status-0123456789abcdef`, `/publish`, `/signin`, `/signin-sso`, `/signup`.
 
@@ -248,7 +245,8 @@ To restore a previous portal revision:
 If you want to discard all changes you've made to the developer portal, you can reset the website to its starting state. Resetting the portal deletes any changes you've made to the developer portal pages, layouts, customizations, and uploaded media.
 
 > [!NOTE]
-> Resetting the developer portal doesn't delete the published version of the developer portal.
+> * Resetting the developer portal doesn't delete the published version of the developer portal.
+> * Resetting the portal could update the portal to a newer version of the developer portal codebase with updated components. The placeholder content that appears might also be changed. Developer portal features and customization options remain consistent. 
 
 To reset the developer portal:
 

articles/api-management/media/api-management-howto-developer-portal-customize/cover.png

@@ -2,10 +2,11 @@
 author: dlepow
 ms.service: azure-api-management
 ms.topic: include
-ms.date: 12/22/2023
+ms.date: 04/28/2025
 ms.author: danlep
 ---
 
 
 > [!NOTE]
-> We recently improved the portal editor interface to boost your productivity and enhance the interactions with your favorite features and tools. We also redesigned the API and product details widgets to elevate the portal experience for visitors.
+> * We're enhancing the developer portal with [Fluent UI Web Components](/fluent-ui/web-components) in the React framework. We're also refreshing the placeholder content displayed when you first open the portal. Your portal's appearance may differ slightly from the screenshots in this article, but the functionality remains consistent.
+> * If you're using a version of the portal built on the previous components, you'll see a **Preview new UI design** setting at the bottom of the menu on the left. Enable this setting to try the latest experience.<br/><br/> :::image type="content" source="../articles/api-management/media/api-management-howto-developer-portal-customize/preview-new-ui.png" alt-text="Screenshot of preview toggle in the API Management developer portal.":::