Storybook: Fix warnings in Layout document (WordPress#67865)

Co-authored-by: tyxla <[email protected]> Co-authored-by: jameskoster <[email protected]> Co-authored-by: mirka <[email protected]>
bph · Dec 13, 2024 · aca8187 · aca8187
1 parent 8d6b8c5
commit aca8187
Showing 1 changed file with 31 additions and 29 deletions.
diff --git a/storybook/stories/foundations/layout.mdx b/storybook/stories/foundations/layout.mdx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/blocks';
 import areas from './static/areas.svg';
 import pageLayoutExample1 from './static/page-layout-example-1.svg';
 import pageLayoutExample2 from './static/page-layout-example-2.svg';
@@ -27,32 +27,34 @@ At the highest level admin pages are comprised of _areas_, that can be arranged
 Areas can be combined in different ways depending on the use case. Here are some examples.
 
 <table>
-	<tr>
-		<td style={{verticalAlign: 'top', width: '50%'}}>
-			#### Sidebar, Content Frame and Preview Frame
-			<img src={ pageLayoutExample1 } alt="Diagram illustrating an example of the 'Sidebar, Content Frame and Preview Frame' arrangement" width="100%" />
-
-			A demonstration of this arrangement can be found in the Styles section of the Site Editor, and in the Pages and Templates sections when List layout is selected.
-		</td>
-		<td style={{verticalAlign: 'top', width: '50%'}}>
-			#### Sidebar and Preview Frame
-			<img src={ pageLayoutExample2 } alt="Diagram illustrating an example of the 'Sidebar and Preview Frame' arrangement" width="100%" />
-
-			A demonstration of this arrangement can be found in the Design section.
-		</td>
-	</tr>
-	<tr>
-		<td style={{verticalAlign: 'top', width: '50%'}}>
-			#### Sidebar and Content Frame
-			<img src={ pageLayoutExample3 } alt="Diagram illustrating an example of the 'Sidebar and Content Frame' arrangement" width="100%" />
-
-			A demonstration of this arrangement can be found in the Patterns and Templates sections of the Site Editor, or in the Pages section when Table or Grid layout are selected.
-		</td>
-		<td style={{verticalAlign: 'top', width: '50%'}}>
-			#### Sidebar and multiple Content Frames
-			<img src={ pageLayoutExample4 } alt="Diagram illustrating an example of the 'Sidebar and multiple Content Frames' arrangement" width="100%" />
-
-			Multiple content frames can be utilised as required.
-		</td>
-	</tr>
+	<tbody>
+		<tr>
+			<td style={{verticalAlign: 'top', width: '50%'}}>
+				#### Sidebar, Content Frame and Preview Frame
+				<img src={ pageLayoutExample1 } alt="Diagram illustrating an example of the 'Sidebar, Content Frame and Preview Frame' arrangement" width="100%" />
+
+				A demonstration of this arrangement can be found in the Styles section of the Site Editor, and in the Pages and Templates sections when List layout is selected.
+			</td>
+			<td style={{verticalAlign: 'top', width: '50%'}}>
+				#### Sidebar and Preview Frame
+				<img src={ pageLayoutExample2 } alt="Diagram illustrating an example of the 'Sidebar and Preview Frame' arrangement" width="100%" />
+
+				A demonstration of this arrangement can be found in the Design section.
+			</td>
+		</tr>
+		<tr>
+			<td style={{verticalAlign: 'top', width: '50%'}}>
+				#### Sidebar and Content Frame
+				<img src={ pageLayoutExample3 } alt="Diagram illustrating an example of the 'Sidebar and Content Frame' arrangement" width="100%" />
+
+				A demonstration of this arrangement can be found in the Patterns and Templates sections of the Site Editor, or in the Pages section when Table or Grid layout are selected.
+			</td>
+			<td style={{verticalAlign: 'top', width: '50%'}}>
+				#### Sidebar and multiple Content Frames
+				<img src={ pageLayoutExample4 } alt="Diagram illustrating an example of the 'Sidebar and multiple Content Frames' arrangement" width="100%" />
+
+				Multiple content frames can be utilised as required.
+			</td>
+		</tr>
+	</tbody>
 </table>