Skip to content

Commit bb6bb33

Browse files
R1shabh-GuptaR1shabh-Guptamirkaciampo
authored and
widoz
committed
Storybook: Fix missing block styles in BlockCanvas playground stories (WordPress#81070)
* Storybook: Fix unstyled blocks in the Box playground story * Storybook: Fix the same unstyled-blocks issue in the Default and Undo Redo playground stories * Storybook: Remove unneeded lint disables from playground editor styles * Storybook: Load RTL content styles in playground stories * Storybook: Apply BlockCanvas content styles to the Zoom Out playground story * Storybook: Load block library theme styles in playground BlockCanvas stories Unlinked contributors: ronakganatra9. Co-authored-by: R1shabh-Gupta <rishabhwp@git.wordpress.org> Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: ciampo <mciampini@git.wordpress.org>
1 parent 36b02ce commit bb6bb33

7 files changed

Lines changed: 72 additions & 24 deletions

File tree

‎storybook/stories/playground/box/index.jsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ import {
44
BlockCanvas,
55
BlockToolbar,
66
} from '@wordpress/block-editor';
7-
import { editorStyles } from '../editor-styles';
7+
import { contentStyles } from '../editor-styles';
88
import styles from './style.module.css';
99

10-
export default function EditorBox() {
10+
export default function EditorBox( { direction = 'ltr' } ) {
1111
const [ blocks, updateBlocks ] = useState( [] );
1212

1313
return (
@@ -25,7 +25,10 @@ export default function EditorBox() {
2525
} }
2626
>
2727
<BlockToolbar hideDragHandle />
28-
<BlockCanvas height="500px" styles={ editorStyles } />
28+
<BlockCanvas
29+
height="500px"
30+
styles={ contentStyles[ direction ] }
31+
/>
2932
</BlockEditorProvider>
3033
</div>
3134
);

‎storybook/stories/playground/editor-styles.js‎

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,16 @@
1-
export const editorStyles = [
1+
// Base styles for the content rendered within the BlockCanvas iframe.
2+
import componentsStyles from '@wordpress/components/build-style/style.css?raw';
3+
import componentsStylesRtl from '@wordpress/components/build-style/style-rtl.css?raw';
4+
import blockEditorContentStyles from '@wordpress/block-editor/build-style/content.css?raw';
5+
import blockEditorContentStylesRtl from '@wordpress/block-editor/build-style/content-rtl.css?raw';
6+
import blockLibraryStyles from '@wordpress/block-library/build-style/style.css?raw';
7+
import blockLibraryStylesRtl from '@wordpress/block-library/build-style/style-rtl.css?raw';
8+
import blockLibraryThemeStyles from '@wordpress/block-library/build-style/theme.css?raw';
9+
import blockLibraryThemeStylesRtl from '@wordpress/block-library/build-style/theme-rtl.css?raw';
10+
import blockLibraryEditorStyles from '@wordpress/block-library/build-style/editor.css?raw';
11+
import blockLibraryEditorStylesRtl from '@wordpress/block-library/build-style/editor-rtl.css?raw';
12+
13+
const editorStyles = [
214
{
315
css: `
416
body {
@@ -49,3 +61,25 @@ export const editorStyles = [
4961
`,
5062
},
5163
];
64+
65+
/**
66+
* Styles to pass to `BlockCanvas`, keyed by the Storybook text direction.
67+
*/
68+
export const contentStyles = {
69+
ltr: [
70+
{ css: componentsStyles },
71+
{ css: blockLibraryStyles },
72+
{ css: blockEditorContentStyles },
73+
{ css: blockLibraryThemeStyles },
74+
{ css: blockLibraryEditorStyles },
75+
...editorStyles,
76+
],
77+
rtl: [
78+
{ css: componentsStylesRtl },
79+
{ css: blockLibraryStylesRtl },
80+
{ css: blockEditorContentStylesRtl },
81+
{ css: blockLibraryThemeStylesRtl },
82+
{ css: blockLibraryEditorStylesRtl },
83+
...editorStyles,
84+
],
85+
};

‎storybook/stories/playground/fullpage/index.jsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ import {
66
} from '@wordpress/block-editor';
77
import '@wordpress/format-library';
88
import styles from './style.lazy.scss?inline';
9-
import { editorStyles } from '../editor-styles';
9+
import { contentStyles } from '../editor-styles';
1010

11-
export default function EditorFullPage() {
11+
export default function EditorFullPage( { direction = 'ltr' } ) {
1212
const [ blocks, updateBlocks ] = useState( [] );
1313

1414
// Ensures that the CSS intended for the playground (especially the style resets)
@@ -36,7 +36,10 @@ export default function EditorFullPage() {
3636
<BlockInspector />
3737
</div>
3838
<div className="playground__content">
39-
<BlockCanvas height="100%" styles={ editorStyles } />
39+
<BlockCanvas
40+
height="100%"
41+
styles={ contentStyles[ direction ] }
42+
/>
4043
</div>
4144
</BlockEditorProvider>
4245
</div>

‎storybook/stories/playground/index.story.jsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,32 +13,32 @@ export default {
1313
},
1414
};
1515

16-
export const _default = () => {
17-
return <EditorFullPage />;
16+
export const _default = ( _args, { globals } ) => {
17+
return <EditorFullPage direction={ globals.direction } />;
1818
};
1919

2020
_default.parameters = {
2121
sourceLink: 'storybook/stories/playground/fullpage/index.jsx',
2222
};
2323

24-
export const Box = () => {
25-
return <EditorBox />;
24+
export const Box = ( _args, { globals } ) => {
25+
return <EditorBox direction={ globals.direction } />;
2626
};
2727

2828
Box.parameters = {
2929
sourceLink: 'storybook/stories/playground/box/index.jsx',
3030
};
3131

32-
export const UndoRedo = () => {
33-
return <EditorWithUndoRedo />;
32+
export const UndoRedo = ( _args, { globals } ) => {
33+
return <EditorWithUndoRedo direction={ globals.direction } />;
3434
};
3535

3636
UndoRedo.parameters = {
3737
sourceLink: 'storybook/stories/playground/with-undo-redo/index.jsx',
3838
};
3939

40-
export const ZoomOut = ( props ) => {
41-
return <EditorZoomOut { ...props } />;
40+
export const ZoomOut = ( props, { globals } ) => {
41+
return <EditorZoomOut { ...props } direction={ globals.direction } />;
4242
};
4343

4444
ZoomOut.parameters = {

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ import {
66
} from '@wordpress/block-editor';
77
import { Button } from '@wordpress/components';
88
import { undo as undoIcon, redo as redoIcon } from '@wordpress/icons';
9-
import { editorStyles } from '../editor-styles';
9+
import { contentStyles } from '../editor-styles';
1010
import styles from './style.module.css';
1111

12-
export default function EditorWithUndoRedo() {
12+
export default function EditorWithUndoRedo( { direction = 'ltr' } ) {
1313
const { value, setValue, hasUndo, hasRedo, undo, redo } =
1414
useStateWithHistory( { blocks: [] } );
1515

@@ -51,7 +51,10 @@ export default function EditorWithUndoRedo() {
5151
/>
5252
<BlockToolbar hideDragHandle />
5353
</div>
54-
<BlockCanvas height="100%" styles={ editorStyles } />
54+
<BlockCanvas
55+
height="100%"
56+
styles={ contentStyles[ direction ] }
57+
/>
5558
</BlockEditorProvider>
5659
</div>
5760
);

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,8 @@ import {
88
} from '@wordpress/block-editor';
99
import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
1010
import { parse } from '@wordpress/blocks';
11-
import contentCss from '@wordpress/block-editor/build-style/content.css?raw';
1211
import { pattern } from './pattern';
13-
import { editorStyles } from '../editor-styles';
12+
import { contentStyles } from '../editor-styles';
1413

1514
// Temporary hack to access private APIs before stabilizing zoom level.
1615
const { unlock } = __dangerousOptInToUnstableAPIsOnlyForCoreModules(
@@ -28,7 +27,7 @@ function EnableZoomOut( { zoomLevel } ) {
2827
return null;
2928
}
3029

31-
export default function EditorZoomOut( { zoomLevel } ) {
30+
export default function EditorZoomOut( { zoomLevel, direction = 'ltr' } ) {
3231
const [ blocks, updateBlocks ] = useState( [] );
3332

3433
useEffect( () => {
@@ -48,8 +47,10 @@ export default function EditorZoomOut( { zoomLevel } ) {
4847
onChange={ updateBlocks }
4948
>
5049
<EnableZoomOut zoomLevel={ zoomLevel } />
51-
<BlockCanvas height="500px" styles={ editorStyles }>
52-
<style>{ contentCss }</style>
50+
<BlockCanvas
51+
height="500px"
52+
styles={ contentStyles[ direction ] }
53+
>
5354
<BlockList />
5455
</BlockCanvas>
5556
</BlockEditorProvider>

‎tools/eslint/import-resolver.cjs‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,11 @@ exports.resolve = function ( source, file, config ) {
121121
// wp-build emits a CSS file for each SCSS file in src. This is
122122
// controlled by wpStyleEntryPoints which we don't fully
123123
// recreate here (yet), but generally we don't override this.
124-
.replace( /(^|\/)build-style\/(.+?)\.css/, '$1src/$2.scss' )
124+
// The `-rtl.css` variant is generated from the same SCSS file.
125+
.replace(
126+
/(^|\/)build-style\/(.+?)(?:-rtl)?\.css/,
127+
'$1src/$2.scss'
128+
)
125129
.replace( BUILD_DIRECTORY_PATTERN, '$1src/' );
126130

127131
if ( mapsBuiltJavaScriptToSource ) {

0 commit comments

Comments
 (0)