Skip to content

Commit

Permalink
Block Editor: Update BEM syntax to CSS modifer guidelines
Browse files Browse the repository at this point in the history
  • Loading branch information
@aduth
aduth committed Jan 17, 2020
1 parent cf9742c commit d83f4cc
Show file tree
Hide file tree
Showing 4 changed files with 14 additions and 14 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 @@ -202,7 +202,7 @@ function LinkControl( {
<span className="block-editor-link-control__search-item-info">{ filterURLForDisplay( safeDecodeURI( value.url ) ) || '' }</span>
</span>

<Button isSecondary onClick={ setMode( MODE_EDIT ) } className="block-editor-link-control__search-item-action block-editor-link-control__search-item-action--edit">
<Button isSecondary onClick={ setMode( MODE_EDIT ) } className="block-editor-link-control__search-item-action">
{ __( 'Edit' ) }
</Button>
</div>
Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/src/components/responsive-block-control/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,13 +78,13 @@ function ResponsiveBlockControl( props ) {
/>

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

{ isResponsive && (
<div className="block-editor-responsive-block-control__group block-editor-responsive-block-control__group--responsive" hidden={ ! isResponsive }>
<div className="block-editor-responsive-block-control__group is-responsive" hidden={ ! isResponsive }>
{ ( renderResponsiveControls ? renderResponsiveControls( viewports ) : defaultResponsiveControls() ) }
</div>
) }
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 @@ -91,9 +91,9 @@ describe( 'Basic rendering', () => {

const toggleState = container.querySelector( 'input[type="checkbox"]' ).checked;

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

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

expect( container.innerHTML ).not.toBe( '' );

Expand Down Expand Up @@ -198,8 +198,8 @@ describe( 'Default and Responsive modes', () => {
);
} );

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

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

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

// Select elements based on what the user can see
const toggleLabel = Array.from( container.querySelectorAll( 'label' ) ).find( ( label ) => label.innerHTML.includes( 'Use the same padding on all screensizes' ) );
Expand All @@ -291,8 +291,8 @@ describe( 'Default and Responsive modes', () => {
Simulate.change( toggleInput, { target: { checked: false } } );
} );

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

expect( defaultControlGroup ).toBeNull();
expect( responsiveControlGroup ).not.toBeNull();
Expand All @@ -302,8 +302,8 @@ describe( 'Default and Responsive modes', () => {
Simulate.change( toggleInput, { target: { checked: true } } );
} );

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

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

0 comments on commit d83f4cc

Please sign in to comment.