Storybook: Adds story for Spacing-sizes-control. #68339
Conversation
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
shail-mehta
added
[Type] Developer Documentation
There was a problem hiding this comment.
Thanks for the work on this. Seems like a good start. In testing, I found that when switching to a size preset the component currently errors (I left a specific comment about that). Once that’s fixed and switching to presets works, there aren’t any available since the component depends on getting them from the block editor store. I'm including a diff here that makes some presets available and includes a fix for the error I mentioned earlier.
Add presets and update values prop
diff --git a/packages/block-editor/src/components/spacing-sizes-control/stories/index.story.js b/packages/block-editor/src/components/spacing-sizes-control/stories/index.story.js
index 2716bb3fa9..921070855c 100644
--- a/packages/block-editor/src/components/spacing-sizes-control/stories/index.story.js
+++ b/packages/block-editor/src/components/spacing-sizes-control/stories/index.story.js
@@ -7,10 +7,46 @@ import { useState } from '@wordpress/element';
* Internal dependencies
*/
import SpacingSizesControl from '../';
+import { ExperimentalBlockEditorProvider } from '../../provider';
const meta = {
title: 'BlockEditor/SpacingSizesControl',
component: SpacingSizesControl,
+ // The component depends on block-editor store state for size presets so the
+ // provider is required to supply those.
+ decorators: [
+ ( Story ) => (
+ <ExperimentalBlockEditorProvider
+ settings={ {
+ __experimentalFeatures: {
+ spacing: {
+ spacingSizes: {
+ default: [
+ {
+ name: 'Small',
+ slug: '40',
+ size: '1rem',
+ },
+ {
+ name: 'Medium',
+ slug: '50',
+ size: '1.5rem',
+ },
+ {
+ name: 'Large',
+ slug: '60',
+ size: '2.25rem',
+ },
+ ],
+ },
+ },
+ },
+ } }
+ >
+ <Story />
+ </ExperimentalBlockEditorProvider>
+ ),
+ ],
argTypes: {
label: {
control: 'text',
@@ -114,10 +150,10 @@ export const Default = {
args: {
label: 'Padding',
values: {
- top: 10,
- right: 12,
- bottom: 23,
- left: 25,
+ top: '10px',
+ right: '1.5rem',
+ bottom: '2em',
+ left: '12px',
},
minimumCustomValue: 0,
sides: [ 'top', 'right', 'bottom', 'left' ],
| top: 10, | ||
| right: 12, | ||
| bottom: 23, | ||
| left: 25, |
There was a problem hiding this comment.
Testing this out I found that these need to be strings or the component errors when switching one of the sides to use a size preset. I think too it’s probably better to actual provide a unit as well, e.g. '10px'.
What?
This PR adds story for
SpacingSizesControlcomponent.Why?
Part of: #67165
Testing Instructions
SpacingSizesControlScreenshots or screencast
Screen.Recording.2024-12-27.at.1.52.15.PM.mov