Fix warnings in Layout document

WordPress · Dec 12, 2024 · 3303342 · 3303342
1 parent 683bd53
commit 3303342
Showing 1 changed file with 31 additions and 29 deletions.
diff --git a/storybook/stories/foundations/layout/page-composition.mdx b/storybook/stories/foundations/layout/page-composition.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>