Skip to content

Commit

Permalink
Block Editor: Update BEM syntax to CSS modifer guidelines (#19738)
Browse files Browse the repository at this point in the history 
* Block Editor: Update BEM syntax to CSS modifer guidelines

* Block Editor: Unify responsive block control group wrapper
  • Loading branch information
@aduth
aduth authored Feb 7, 2020
1 parent 12a6ee4 commit 4e3a617
Show file tree
Hide file tree
Showing 4 changed files with 30 additions and 30 deletions.
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/link-control/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -354,7 +354,7 @@ function LinkControl( {
<Button
isSecondary
onClick={ () => setIsEditingLink( true ) }
className="block-editor-link-control__search-item-action block-editor-link-control__search-item-action--edit"
className="block-editor-link-control__search-item-action"
>
{ __( 'Edit' ) }
</Button>
Expand Down
36 changes: 18 additions & 18 deletions packages/block-editor/src/components/responsive-block-control/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
/**
* External dependencies
*/
import classnames from 'classnames';

/**
* WordPress dependencies
*/
import { __, sprintf } from '@wordpress/i18n';

import { Fragment } from '@wordpress/element';

import { ToggleControl } from '@wordpress/components';

/**
Expand Down Expand Up @@ -93,23 +96,20 @@ function ResponsiveBlockControl( props ) {
onChange={ onIsResponsiveChange }
help={ toggleHelpText }
/>

{ ! isResponsive && (
<div className="block-editor-responsive-block-control__group block-editor-responsive-block-control__group--default">
{ defaultControl }
</div>
) }

{ isResponsive && (
<div
className="block-editor-responsive-block-control__group block-editor-responsive-block-control__group--responsive"
hidden={ ! isResponsive }
>
{ renderResponsiveControls
<div
className={ classnames(
'block-editor-responsive-block-control__group',
{
'is-responsive': isResponsive,
}
) }
>
{ ! isResponsive && defaultControl }
{ isResponsive &&
( renderResponsiveControls
? renderResponsiveControls( viewports )
: defaultResponsiveControls() }
</div>
) }
: defaultResponsiveControls() ) }
</div>
</div>
</fieldset>
);
Expand Down
2 changes: 1 addition & 1 deletion ...ges/block-editor/src/components/responsive-block-control/test/__snapshots__/index.js.snap
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

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 width=\\"2\\" height=\\"6\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 2 6\\" class=\\"components-form-toggle__on\\" 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 viewports.</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 width=\\"2\\" height=\\"6\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 2 6\\" class=\\"components-form-toggle__on\\" 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\\"><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 viewports.</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
Original file line number Diff line number Diff line change
Expand Up @@ -101,11 +101,11 @@ describe( 'Basic rendering', () => {
.checked;

const defaultControlGroup = container.querySelector(
'.block-editor-responsive-block-control__group--default'
'.block-editor-responsive-block-control__group:not(.is-responsive)'
);

const responsiveControlGroup = container.querySelector(
'.block-editor-responsive-block-control__group--responsive'
'.block-editor-responsive-block-control__group.is-responsive'
);

expect( container.innerHTML ).not.toBe( '' );
Expand Down Expand Up @@ -220,10 +220,10 @@ describe( 'Default and Responsive modes', () => {
} );

const defaultControlGroup = container.querySelector(
'.block-editor-responsive-block-control__group--default'
'.block-editor-responsive-block-control__group:not(.is-responsive)'
);
const responsiveControlGroup = container.querySelector(
'.block-editor-responsive-block-control__group--responsive'
'.block-editor-responsive-block-control__group.is-responsive'
);

expect( defaultControlGroup ).toBeNull();
Expand Down Expand Up @@ -310,10 +310,10 @@ describe( 'Default and Responsive modes', () => {
} );

let defaultControlGroup = container.querySelector(
'.block-editor-responsive-block-control__group--default'
'.block-editor-responsive-block-control__group:not(.is-responsive)'
);
let responsiveControlGroup = container.querySelector(
'.block-editor-responsive-block-control__group--responsive'
'.block-editor-responsive-block-control__group.is-responsive'
);

// Select elements based on what the user can see
Expand All @@ -338,10 +338,10 @@ describe( 'Default and Responsive modes', () => {
} );

defaultControlGroup = container.querySelector(
'.block-editor-responsive-block-control__group--default'
'.block-editor-responsive-block-control__group:not(.is-responsive)'
);
responsiveControlGroup = container.querySelector(
'.block-editor-responsive-block-control__group--responsive'
'.block-editor-responsive-block-control__group.is-responsive'
);

expect( defaultControlGroup ).toBeNull();
Expand All @@ -353,10 +353,10 @@ describe( 'Default and Responsive modes', () => {
} );

defaultControlGroup = container.querySelector(
'.block-editor-responsive-block-control__group--default'
'.block-editor-responsive-block-control__group:not(.is-responsive)'
);
responsiveControlGroup = container.querySelector(
'.block-editor-responsive-block-control__group--responsive'
'.block-editor-responsive-block-control__group.is-responsive'
);

expect( defaultControlGroup ).not.toBeNull();
Expand Down

0 comments on commit 4e3a617

Please sign in to comment.