Site editor routes: add docs for areas and prevent edit area from rendering when canvas is edit (#66309)

Co-authored-by: oandregal <[email protected]>
Co-authored-by: youknowriad <[email protected]>

Author: oandregal

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">

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. |