From 0b76a258213bde016726e16949d76fed12c5a34d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Tue, 22 Oct 2024 11:40:45 +0200
Subject: [PATCH] Site editor routes: add docs for areas and prevent `edit`
 area from rendering when canvas is `edit` (#66309)

Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
---
 .../edit-site/src/components/layout/index.js  | 22 ++++++++++---------
 .../components/site-editor-routes/README.md   | 20 +++++++++++++++++
 2 files changed, 32 insertions(+), 10 deletions(-)
 create mode 100644 packages/edit-site/src/components/site-editor-routes/README.md

diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
index d02f2905f24d8..8c150039c6df8 100644
--- a/packages/edit-site/src/components/layout/index.js
+++ b/packages/edit-site/src/components/layout/index.js
@@ -183,16 +183,18 @@ export default function Layout( { route } ) {
 							</div>
 						) }
 
-					{ ! isMobileViewport && areas.edit && (
-						<div
-							className="edit-site-layout__area"
-							style={ {
-								maxWidth: widths?.edit,
-							} }
-						>
-							{ areas.edit }
-						</div>
-					) }
+					{ ! isMobileViewport &&
+						areas.edit &&
+						canvasMode !== 'edit' && (
+							<div
+								className="edit-site-layout__area"
+								style={ {
+									maxWidth: widths?.edit,
+								} }
+							>
+								{ areas.edit }
+							</div>
+						) }
 
 					{ ! isMobileViewport && areas.preview && (
 						<div className="edit-site-layout__canvas-container">
diff --git a/packages/edit-site/src/components/site-editor-routes/README.md b/packages/edit-site/src/components/site-editor-routes/README.md
new file mode 100644
index 0000000000000..64121c8bd9a6b
--- /dev/null
+++ b/packages/edit-site/src/components/site-editor-routes/README.md
@@ -0,0 +1,20 @@
+# Site Editor Routes
+
+## Areas
+
+When `canvasMode` is not `edit`, the areas avaliable to use are:
+
+| Area | Non-mobile viewport | Mobile viewport |
+| --- | --- | --- |
+| `sidebar` | Always rendered. | Only if `mobile` is not provided. |
+| `content` | Rendered if provided. | Not rendered. |
+| `preview` | Rendered if provided. | Not rendered. |
+| `edit` | Rendered if provided. | Not rendered. |
+| `mobile` | Not rendered | Rendered as full-screen, if provided. |
+
+When `canvasMode` is `edit`, the areas avaliable to use are:
+
+| Area | Non-mobile viewport | Mobile viewport |
+| --- | --- | --- |
+| `preview` | Rendered as full-screen, if provided. Otherwise, it'll display an empty blank sidebar. | Not rendered. |
+| `mobile` | Not rendered | Rendered as full-screen, if provided. Otherwise, it'll display an empty blank sidebar. |