Storybook: Fix missing block styles in BlockCanvas playground stories

storybook/stories/playground/box/index.jsx

@@ -5,10 +5,10 @@ import {
 	BlockCanvas,
 	BlockToolbar,
 } from '@wordpress/block-editor';
-import { editorStyles } from '../editor-styles';
+import { contentStyles } from '../editor-styles';
 import styles from './style.module.css';
 
-export default function EditorBox() {
+export default function EditorBox( { direction = 'ltr' } ) {
 	const [ blocks, updateBlocks ] = useState( [] );
 
 	useEffect( () => {
@@ -30,7 +30,10 @@ export default function EditorBox() {
 				} }
 			>
 				<BlockToolbar hideDragHandle />
-				<BlockCanvas height="500px" styles={ editorStyles } />
+				<BlockCanvas
+					height="500px"
+					styles={ contentStyles[ direction ] }
+				/>
 			</BlockEditorProvider>
 		</div>
 	);

storybook/stories/playground/editor-styles.js

@@ -1,4 +1,16 @@
-export const editorStyles = [
+// Base styles for the content rendered within the BlockCanvas iframe.
+import componentsStyles from '@wordpress/components/build-style/style.css?raw';
+import componentsStylesRtl from '@wordpress/components/build-style/style-rtl.css?raw';
+import blockEditorContentStyles from '@wordpress/block-editor/build-style/content.css?raw';
+import blockEditorContentStylesRtl from '@wordpress/block-editor/build-style/content-rtl.css?raw';
+import blockLibraryStyles from '@wordpress/block-library/build-style/style.css?raw';
+import blockLibraryStylesRtl from '@wordpress/block-library/build-style/style-rtl.css?raw';
+import blockLibraryThemeStyles from '@wordpress/block-library/build-style/theme.css?raw';
+import blockLibraryThemeStylesRtl from '@wordpress/block-library/build-style/theme-rtl.css?raw';
+import blockLibraryEditorStyles from '@wordpress/block-library/build-style/editor.css?raw';
+import blockLibraryEditorStylesRtl from '@wordpress/block-library/build-style/editor-rtl.css?raw';
+
+const editorStyles = [
 	{
 		css: `
         body {
@@ -49,3 +61,25 @@ export const editorStyles = [
         `,
 	},
 ];
+
+/**
+ * Styles to pass to `BlockCanvas`, keyed by the Storybook text direction.
+ */
+export const contentStyles = {
+	ltr: [
+		{ css: componentsStyles },
+		{ css: blockLibraryStyles },
+		{ css: blockEditorContentStyles },
+		{ css: blockLibraryThemeStyles },
+		{ css: blockLibraryEditorStyles },
+		...editorStyles,
+	],
+	rtl: [
+		{ css: componentsStylesRtl },
+		{ css: blockLibraryStylesRtl },
+		{ css: blockEditorContentStylesRtl },
+		{ css: blockLibraryThemeStylesRtl },
+		{ css: blockLibraryEditorStylesRtl },
+		...editorStyles,
+	],
+};

storybook/stories/playground/fullpage/index.jsx

@@ -7,9 +7,9 @@ import {
 import { registerCoreBlocks } from '@wordpress/block-library';
 import '@wordpress/format-library';
 import styles from './style.lazy.scss?inline';
-import { editorStyles } from '../editor-styles';
+import { contentStyles } from '../editor-styles';
 
-export default function EditorFullPage() {
+export default function EditorFullPage( { direction = 'ltr' } ) {
 	const [ blocks, updateBlocks ] = useState( [] );
 
 	useEffect( () => {
@@ -41,7 +41,10 @@ export default function EditorFullPage() {
 					<BlockInspector />
 				</div>
 				<div className="playground__content">
-					<BlockCanvas height="100%" styles={ editorStyles } />
+					<BlockCanvas
+						height="100%"
+						styles={ contentStyles[ direction ] }
+					/>
 				</div>
 			</BlockEditorProvider>
 		</div>

storybook/stories/playground/index.story.jsx

@@ -10,32 +10,32 @@ export default {
 	},
 };
 
-export const _default = () => {
-	return <EditorFullPage />;
+export const _default = ( _args, { globals } ) => {
+	return <EditorFullPage direction={ globals.direction } />;
 };
 
 _default.parameters = {
 	sourceLink: 'storybook/stories/playground/fullpage/index.jsx',
 };
 
-export const Box = () => {
-	return <EditorBox />;
+export const Box = ( _args, { globals } ) => {
+	return <EditorBox direction={ globals.direction } />;
 };
 
 Box.parameters = {
 	sourceLink: 'storybook/stories/playground/box/index.jsx',
 };
 
-export const UndoRedo = () => {
-	return <EditorWithUndoRedo />;
+export const UndoRedo = ( _args, { globals } ) => {
+	return <EditorWithUndoRedo direction={ globals.direction } />;
 };
 
 UndoRedo.parameters = {
 	sourceLink: 'storybook/stories/playground/with-undo-redo/index.jsx',
 };
 
-export const ZoomOut = ( props ) => {
-	return <EditorZoomOut { ...props } />;
+export const ZoomOut = ( props, { globals } ) => {
+	return <EditorZoomOut { ...props } direction={ globals.direction } />;
 };
 
 ZoomOut.parameters = {

storybook/stories/playground/with-undo-redo/index.jsx

@@ -8,10 +8,10 @@ import {
 } from '@wordpress/block-editor';
 import { Button } from '@wordpress/components';
 import { undo as undoIcon, redo as redoIcon } from '@wordpress/icons';
-import { editorStyles } from '../editor-styles';
+import { contentStyles } from '../editor-styles';
 import styles from './style.module.css';
 
-export default function EditorWithUndoRedo() {
+export default function EditorWithUndoRedo( { direction = 'ltr' } ) {
 	const { value, setValue, hasUndo, hasRedo, undo, redo } =
 		useStateWithHistory( { blocks: [] } );
 
@@ -57,7 +57,10 @@ export default function EditorWithUndoRedo() {
 					/>
 					<BlockToolbar hideDragHandle />
 				</div>
-				<BlockCanvas height="100%" styles={ editorStyles } />
+				<BlockCanvas
+					height="100%"
+					styles={ contentStyles[ direction ] }
+				/>
 			</BlockEditorProvider>
 		</div>
 	);

storybook/stories/playground/zoom-out/index.jsx

@@ -9,9 +9,8 @@ import {
 } from '@wordpress/block-editor';
 import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
 import { parse } from '@wordpress/blocks';
-import contentCss from '@wordpress/block-editor/build-style/content.css?raw';
 import { pattern } from './pattern';
-import { editorStyles } from '../editor-styles';
+import { contentStyles } from '../editor-styles';
 
 // Temporary hack to access private APIs before stabilizing zoom level.
 const { unlock } = __dangerousOptInToUnstableAPIsOnlyForCoreModules(
@@ -29,7 +28,7 @@ function EnableZoomOut( { zoomLevel } ) {
 	return null;
 }
 
-export default function EditorZoomOut( { zoomLevel } ) {
+export default function EditorZoomOut( { zoomLevel, direction = 'ltr' } ) {
 	const [ blocks, updateBlocks ] = useState( [] );
 
 	useEffect( () => {
@@ -50,8 +49,10 @@ export default function EditorZoomOut( { zoomLevel } ) {
 				onChange={ updateBlocks }
 			>
 				<EnableZoomOut zoomLevel={ zoomLevel } />
-				<BlockCanvas height="500px" styles={ editorStyles }>
-					<style>{ contentCss }</style>
+				<BlockCanvas
+					height="500px"
+					styles={ contentStyles[ direction ] }
+				>
 					<BlockList />
 				</BlockCanvas>
 			</BlockEditorProvider>

tools/eslint/import-resolver.cjs

@@ -121,7 +121,11 @@ exports.resolve = function ( source, file, config ) {
 				// wp-build emits a CSS file for each SCSS file in src. This is
 				// controlled by wpStyleEntryPoints which we don't fully
 				// recreate here (yet), but generally we don't override this.
-				.replace( /(^|\/)build-style\/(.+?)\.css/, '$1src/$2.scss' )
+				// The `-rtl.css` variant is generated from the same SCSS file.
+				.replace(
+					/(^|\/)build-style\/(.+?)(?:-rtl)?\.css/,
+					'$1src/$2.scss'
+				)
 				.replace( BUILD_DIRECTORY_PATTERN, '$1src/' );
 
 			if ( mapsBuiltJavaScriptToSource ) {