Skip to content
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

Block Editor: Update BEM syntax to CSS modifer guidelines #19738

Merged
merged 2 commits into from
Feb 7, 2020
Merged

Block Editor: Update BEM syntax to CSS modifer guidelines #19738

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e3f7a7f
Block Editor: Update BEM syntax to CSS modifer guidelines
aduth Jan 17, 2020
b4a46ad
Block Editor: Unify responsive block control group wrapper
aduth Jan 17, 2020
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
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/link-control/index.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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