Skip to content

Add experimental ResponsiveBlockControl component #16790

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
getdave merged 43 commits into from
Nov 1, 2019
Merged

Add experimental ResponsiveBlockControl component #16790

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
43 commits
Select commit Hold shift + click to select a range
23807cf
Basic component skeleton
getdave Jul 29, 2019
95bfae8
Adds component demo to Group Block
getdave Jul 29, 2019
dd64a53
Make toggle control label dynamic and translatable
getdave Jul 29, 2019
8116762
Adds styles
getdave Jul 29, 2019
4ca0fc5
Automatically render responsive controls based on default control
getdave Sep 14, 2019
fe7c77d
Wrap each field group in a `fieldset` element
getdave Sep 15, 2019
e051305
Invert toggle and language to be on by default.
getdave Sep 15, 2019
9c6e8b2
Adds initial tests
getdave Sep 15, 2019
f2d1bfc
Update tests to resemble how a user interacts with Component
getdave Sep 16, 2019
aa1ec5f
Add toggle state test
getdave Sep 16, 2019
eb5e9ba
Update to switch toggle to preceed controls
getdave Sep 16, 2019
bec9001
Update individual control labels to fully describe control for a11y
getdave Sep 17, 2019
1907640
Fixes form ui to improve alignment
getdave Sep 26, 2019
17eec18
Improves i18n of generated control label
getdave Oct 2, 2019
c9c5e08
Improve a11y by leaving DOM intact between state changes.
getdave Oct 2, 2019
eb9c5f3
Adds aria description to toggle control for improved a11y context
getdave Oct 2, 2019
238d541
Update tests
getdave Oct 4, 2019
1af87b9
Update toggle of responsive controls internal to the component
getdave Oct 4, 2019
51b43a6
Adds test for responsiveControlsActive setting prop
getdave Oct 4, 2019
20a95b4
Add tests to cover custom labels and custom device sets
getdave Oct 4, 2019
a64c2cd
Fix to only build default repsonsive controls when necessary
getdave Oct 4, 2019
9926612
Adds tests to cover rendering of custom responsive controls
getdave Oct 4, 2019
d210cfe
Update to make label component part of component’s internal API
getdave Oct 8, 2019
b81e605
Adds callback prop to fire when responsive mode state changes
getdave Oct 8, 2019
8605087
Update to utilise withInstanceId HOC
getdave Oct 8, 2019
3ac118d
Removes unused export
getdave Oct 28, 2019
045dd49
Mark as “experimental”
getdave Oct 28, 2019
b5bfc06
Remove non exposed component API doc
getdave Oct 28, 2019
5c9841c
Extracts label to be a dedicated component
getdave Oct 28, 2019
b2bea8c
Updates to completely switch out DOM when responsive mode is toggled
getdave Oct 28, 2019
827bb82
Update to useCallback to avoid expensive DOM re-renders
getdave Oct 28, 2019
059b5a5
Updates i18n to provide better descriptions for translators
getdave Oct 28, 2019
ce3be6f
Updates devices list to contain unique non-translatable slug
getdave Oct 30, 2019
195aef5
Ensure renderDefault controls render prop has access to device details
getdave Oct 30, 2019
e821dc9
Begin documentation
getdave Oct 30, 2019
863783c
Rename “legend” prop to “title”
getdave Oct 30, 2019
8ebbd2c
Fix incorrect usage of _x and replace with translator comments
getdave Oct 30, 2019
64e719f
Update internal nomenclature from “device” to “viewport”
getdave Oct 30, 2019
e6aad72
Refactor to make component fully controlled
getdave Nov 1, 2019
48529f7
Adds custom hook useResponsiveBlockControl
getdave Nov 1, 2019
d72e6af
Revert "Adds custom hook useResponsiveBlockControl"
getdave Nov 1, 2019
a46f406
Remove testing implementation in Group Block
getdave Nov 1, 2019
15da1b3
Docs update
getdave Nov 1, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Rename “legend” prop to “title” 
This prop was named based on implementation details. Switching out for more agnostic term.
  • Loading branch information
@getdave
getdave committed Oct 30, 2019
commit 863783c5cccb6dfb54118c57f22770f17dbc5c2c
16 changes: 2 additions & 14 deletions packages/block-editor/src/components/responsive-block-control/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,24 +88,12 @@ registerBlockType( 'my-plugin/my-block', {

## Props

```
legend,
property,
toggleLabel,
onIsResponsiveModeChange,
renderDefaultControl,
renderResponsiveControls,
responsiveControlsActive = false,
defaultLabel
devices
```

### `legend`
### `title`
* **Type:** `String`
* **Default:** `undefined`
* **Required:** `true`

The title of the control group used in the `fieldset`'s `legend` element to label the entire set of controls.
The title of the control group used in the `fieldset`'s `legend` element to label the _entire_ set of controls.

### `property`
* **Type:** `String`
Expand Down
6 changes: 3 additions & 3 deletions packages/block-editor/src/components/responsive-block-control/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import ResponsiveBlockControlLabel from './label';

function ResponsiveBlockControl( props ) {
const {
legend,
title,
property,
toggleLabel,
onIsResponsiveModeChange,
Expand Down Expand Up @@ -60,7 +60,7 @@ function ResponsiveBlockControl( props ) {
setIsResponsiveMode( ! isChecked );
} );

if ( ! legend || ! property || ! renderDefaultControl ) {
if ( ! title || ! property || ! renderDefaultControl ) {
return null;
}

Expand All @@ -81,7 +81,7 @@ function ResponsiveBlockControl( props ) {
return (

<fieldset className="block-editor-responsive-block-control">
<legend className="block-editor-responsive-block-control__legend">{ legend }</legend>
<legend className="block-editor-responsive-block-control__title">{ title }</legend>

<div className="block-editor-responsive-block-control__inner">
<ToggleControl
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/responsive-block-control/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
}
}

.block-editor-responsive-block-control__legend {
.block-editor-responsive-block-control__title {
margin: 0;
margin-bottom: 0.6em;
margin-left: -3px;
Expand Down
2 changes: 1 addition & 1 deletion ...ges/block-editor/src/components/responsive-block-control/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
Copy link
Contributor

@tellthemachines tellthemachines Mar 17, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Any idea how this snapshot ended up minified? Makes it impossible to review changes to the component 😞

Copy link
Member

@aduth aduth Mar 17, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@tellthemachines It's quite likely that because the test is using a string of HTML for the snapshot, it doesn't know how to make sense of the string as markup of elements to break across lines, vs. say a React element tree. I'd agree though that it sort of defeats the purpose of a snapshot if a future maintainer is unable to assess whether changes in the snapshot are sensible.

I'm not sure exactly what our current configuration will support for those snapshots, but I'd wonder if it could be using the DOM element or if we could adapt somehow for the React element to be used. Otherwise, we may ought to avoid using the snapshot altogether and instead assert directly against specific values we're expecting in the markup.


exports[`Basic rendering should render with required props 1`] = `"<fieldset class=\\"block-editor-responsive-block-control\\"><legend class=\\"block-editor-responsive-block-control__legend\\">Padding</legend><div class=\\"block-editor-responsive-block-control__inner\\"><div class=\\"components-base-control components-toggle-control block-editor-responsive-block-control__toggle\\"><div class=\\"components-base-control__field\\"><span class=\\"components-form-toggle is-checked\\"><input class=\\"components-form-toggle__input\\" id=\\"inspector-toggle-control-0\\" type=\\"checkbox\\" aria-describedby=\\"inspector-toggle-control-0__help\\" checked=\\"\\"><span class=\\"components-form-toggle__track\\"></span><span class=\\"components-form-toggle__thumb\\"></span><svg class=\\"components-form-toggle__on\\" width=\\"2\\" height=\\"6\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 2 6\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M0 0h2v6H0z\\"></path></svg></span><label for=\\"inspector-toggle-control-0\\" class=\\"components-toggle-control__label\\">Use the same padding on all screensizes.</label></div><p id=\\"inspector-toggle-control-0__help\\" class=\\"components-base-control__help\\">Toggle between using the same value for all screen sizes or using a unique value per screen size.</p></div><div class=\\"block-editor-responsive-block-control__group block-editor-responsive-block-control__group--default\\"><div class=\\"components-base-control\\"><div class=\\"components-base-control__field\\"><label class=\\"components-base-control__label\\" for=\\"inspector-select-control-0\\"><span aria-describedby=\\"rbc-desc-0\\">All</span><span class=\\"screen-reader-text\\" id=\\"rbc-desc-0\\">Controls the padding property for All devices.</span></label><select id=\\"inspector-select-control-0\\" class=\\"components-select-control__input\\"><option value=\\"\\">Please select</option><option value=\\"small\\">Small</option><option value=\\"medium\\">Medium</option><option value=\\"large\\">Large</option></select></div></div><p id=\\"all\\">All is used here for testing purposes to ensure we have access to details about the device.</p></div></div></fieldset>"`;
exports[`Basic rendering should render with required props 1`] = `"<fieldset class=\\"block-editor-responsive-block-control\\"><legend class=\\"block-editor-responsive-block-control__title\\">Padding</legend><div class=\\"block-editor-responsive-block-control__inner\\"><div class=\\"components-base-control components-toggle-control block-editor-responsive-block-control__toggle\\"><div class=\\"components-base-control__field\\"><span class=\\"components-form-toggle is-checked\\"><input class=\\"components-form-toggle__input\\" id=\\"inspector-toggle-control-0\\" type=\\"checkbox\\" aria-describedby=\\"inspector-toggle-control-0__help\\" checked=\\"\\"><span class=\\"components-form-toggle__track\\"></span><span class=\\"components-form-toggle__thumb\\"></span><svg class=\\"components-form-toggle__on\\" width=\\"2\\" height=\\"6\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 2 6\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M0 0h2v6H0z\\"></path></svg></span><label for=\\"inspector-toggle-control-0\\" class=\\"components-toggle-control__label\\">Use the same padding on all screensizes.</label></div><p id=\\"inspector-toggle-control-0__help\\" class=\\"components-base-control__help\\">Toggle between using the same value for all screen sizes or using a unique value per screen size.</p></div><div class=\\"block-editor-responsive-block-control__group block-editor-responsive-block-control__group--default\\"><div class=\\"components-base-control\\"><div class=\\"components-base-control__field\\"><label class=\\"components-base-control__label\\" for=\\"inspector-select-control-0\\"><span aria-describedby=\\"rbc-desc-0\\">All</span><span class=\\"screen-reader-text\\" id=\\"rbc-desc-0\\">Controls the padding property for All devices.</span></label><select id=\\"inspector-select-control-0\\" class=\\"components-select-control__input\\"><option value=\\"\\">Please select</option><option value=\\"small\\">Small</option><option value=\\"medium\\">Medium</option><option value=\\"large\\">Large</option></select></div></div><p id=\\"all\\">All is used here for testing purposes to ensure we have access to details about the device.</p></div></div></fieldset>"`;
20 changes: 10 additions & 10 deletions packages/block-editor/src/components/responsive-block-control/test/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ describe( 'Basic rendering', () => {
act( () => {
render(
<ResponsiveBlockControl
legend="Padding"
title="Padding"
property="padding"
renderDefaultControl={ renderTestDefaultControlComponent }
/>, container
Expand Down Expand Up @@ -124,7 +124,7 @@ describe( 'Basic rendering', () => {
act( () => {
render(
<ResponsiveBlockControl
legend="Padding"
title="Padding"
renderDefaultControl={ renderTestDefaultControlComponent }
/>, container
);
Expand All @@ -137,7 +137,7 @@ describe( 'Basic rendering', () => {
act( () => {
render(
<ResponsiveBlockControl
legend="Padding"
title="Padding"
property="padding"
/>, container
);
Expand All @@ -151,7 +151,7 @@ describe( 'Basic rendering', () => {
act( () => {
render(
<ResponsiveBlockControl
legend="Padding"
title="Padding"
property="padding"
renderDefaultControl={ renderTestDefaultControlComponent }
toggleLabel={ customToggleLabel }
Expand All @@ -170,7 +170,7 @@ describe( 'Basic rendering', () => {
act( () => {
render(
<ResponsiveBlockControl
legend="Padding"
title="Padding"
property="padding"
renderDefaultControl={ renderTestDefaultControlComponent }
defaultLabel={ customDefaultControlGroupLabel }
Expand All @@ -189,7 +189,7 @@ describe( 'Default and Responsive modes', () => {
act( () => {
render(
<ResponsiveBlockControl
legend="Padding"
title="Padding"
property="padding"
responsiveControlsActive={ true }
renderDefaultControl={ renderTestDefaultControlComponent }
Expand Down Expand Up @@ -229,7 +229,7 @@ describe( 'Default and Responsive modes', () => {
act( () => {
render(
<ResponsiveBlockControl
legend="Padding"
title="Padding"
property="padding"
responsiveControlsActive={ true }
renderDefaultControl={ mockRenderDefaultControl }
Expand All @@ -255,7 +255,7 @@ describe( 'Default and Responsive modes', () => {
act( () => {
render(
<ResponsiveBlockControl
legend="Padding"
title="Padding"
property="padding"
renderDefaultControl={ renderTestDefaultControlComponent }
/>, container
Expand Down Expand Up @@ -317,7 +317,7 @@ describe( 'Default and Responsive modes', () => {
act( () => {
render(
<ResponsiveBlockControl
legend="Padding"
title="Padding"
property="padding"
renderDefaultControl={ spyRenderDefaultControl }
renderResponsiveControls={ mockRenderResponsiveControls }
Expand All @@ -344,7 +344,7 @@ describe( 'Default and Responsive modes', () => {
act( () => {
render(
<ResponsiveBlockControl
legend="Padding"
title="Padding"
property="padding"
renderDefaultControl={ renderTestDefaultControlComponent }
onIsResponsiveModeChange={ onIsResponsiveModeChangeSpy }
Expand Down