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

Jump to bottom

Block Editor: Update Block Editor classNames to convention #14420

Merged
merged 1 commit into from
Mar 14, 2019
+765 −767
Merged

Block Editor: Update Block Editor classNames to convention #14420

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
36 changes: 18 additions & 18 deletions assets/stylesheets/_z-index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,37 +3,37 @@
// value is designed to work with).

$z-layers: (
".editor-block-list__block-edit::before": 0,
".editor-block-switcher__arrow": 1,
".editor-block-list__block {core/image aligned wide or fullwide}": 20,
".block-editor-block-list__block-edit::before": 0,
".block-editor-block-switcher__arrow": 1,
".block-editor-block-list__block {core/image aligned wide or fullwide}": 20,
".block-library-classic__toolbar": 10,
".editor-block-list__layout .reusable-block-indicator": 1,
".editor-block-list__breadcrumb": 2,
".block-editor-block-list__layout .reusable-block-indicator": 1,
".block-editor-block-list__breadcrumb": 2,
".components-form-toggle__input": 1,
".components-panel__header.edit-post-sidebar__panel-tabs": -1,
".edit-post-sidebar .components-panel": -2,
".editor-inserter__tabs": 1,
".editor-inserter__tab.is-active": 1,
".block-editor-inserter__tabs": 1,
".block-editor-inserter__tab.is-active": 1,
".components-panel__header": 1,
".components-modal__header": 10,
".edit-post-meta-boxes-area.is-loading::before": 1,
".edit-post-meta-boxes-area .spinner": 5,
".editor-block-contextual-toolbar": 21,
".block-editor-block-contextual-toolbar": 21,
".components-popover__close": 5,
".editor-block-list__insertion-point": 6,
".editor-inserter-with-shortcuts": 5,
".editor-warning": 5,
".block-editor-block-list__insertion-point": 6,
".block-editor-inserter-with-shortcuts": 5,
".block-editor-warning": 5,
".block-library-gallery-item__inline-menu": 20,
".editor-url-input__suggestions": 30,
".block-editor-url-input__suggestions": 30,
".edit-post-header": 30,
".block-library-button__inline-link .editor-url-input__suggestions": 6, // URL suggestions for button block above sibling inserter
".block-library-button__inline-link .block-editor-url-input__suggestions": 6, // URL suggestions for button block above sibling inserter
".block-library-image__resize-handlers": 1, // Resize handlers above sibling inserter
".wp-block-cover__inner-container": 1, // InnerBlocks area inside cover image block
".wp-block-cover.has-background-dim::before": 1, // Overlay area inside block cover need to be higher than the video background.
".wp-block-cover__video-background": 0, // Video background inside cover block.

// Side UI active buttons
".editor-block-mover__control": 1,
".block-editor-block-mover__control": 1,

// Active pill button
".components-button.is-button {:focus or .is-primary}": 1,
Expand All @@ -43,22 +43,22 @@ $z-layers: (

// Should have higher index than the inset/underlay used for dragging
".components-placeholder__fieldset": 1,
".editor-block-list__block-edit .reusable-block-edit-panel *": 1,
".block-editor-block-list__block-edit .reusable-block-edit-panel *": 1,

// Show drop zone above most standard content, but below any overlays
".components-drop-zone": 100,
".components-drop-zone__content": 110,

// The block mover, particularly in nested contexts,
// should overlap most block content.
".editor-block-list__block.is-{selected,hovered} .editor-block-mover": 80,
".block-editor-block-list__block.is-{selected,hovered} .block-editor-block-mover": 80,

// The block mover for floats should overlap the controls of adjacent blocks.
".editor-block-list__block {core/image aligned left or right}": 81,
".block-editor-block-list__block {core/image aligned left or right}": 81,

// Small screen inner blocks overlay must be displayed above drop zone,
// settings menu, and movers.
".editor-inner-blocks__small-screen-overlay:after": 120,
".block-editor-inner-blocks__small-screen-overlay:after": 120,

// Show sidebar above wp-admin navigation bar for mobile viewports:
// #wpadminbar { z-index: 99999 }
Expand Down
10 changes: 5 additions & 5 deletions packages/block-editor/src/components/block-compare/block-view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,19 @@ import { Button } from '@wordpress/components';
const BlockView = ( { title, rawContent, renderedContent, action, actionText, className } ) => {
return (
<div className={ className }>
<div className="editor-block-compare__content">
<h2 className="editor-block-compare__heading">{ title }</h2>
<div className="editor-block-compare__content block-editor-block-compare__content">
<h2 className="editor-block-compare__heading block-editor-block-compare__heading">{ title }</h2>

<div className="editor-block-compare__html">
<div className="editor-block-compare__html block-editor-block-compare__html">
{ rawContent }
</div>

<div className="editor-block-compare__preview edit-post-visual-editor">
<div className="editor-block-compare__preview block-editor-block-compare__preview edit-post-visual-editor">
{ renderedContent }
</div>
</div>

<div className="editor-block-compare__action">
<div className="editor-block-compare__action block-editor-block-compare__action">
<Button isLarge tabIndex="0" onClick={ action }>{ actionText }</Button>
</div>
</div>
Expand Down
10 changes: 5 additions & 5 deletions packages/block-editor/src/components/block-compare/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@ class BlockCompare extends Component {

return difference.map( ( item, pos ) => {
const classes = classnames( {
'editor-block-compare__added': item.added,
'editor-block-compare__removed': item.removed,
'editor-block-compare__added block-editor-block-compare__added': item.added,
Copy link
Member Author

Choose a reason for hiding this comment

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

Of my own curiosity, I did confirm that classnames is capable of handling the assigning of two classes with respect to a single boolean property:

⇒ node       
> var cn = require( 'classnames' )
undefined
> cn( { 'foo bar': true } )
'foo bar'

'editor-block-compare__removed block-editor-block-compare__removed': item.removed,
} );

return <span key={ pos } className={ classes }>{ item.value }</span>;
Expand Down Expand Up @@ -59,10 +59,10 @@ class BlockCompare extends Component {
const difference = this.getDifference( original.rawContent, converted.rawContent );

return (
<div className="editor-block-compare__wrapper">
<div className="editor-block-compare__wrapper block-editor-block-compare__wrapper">
<BlockView
title={ __( 'Current' ) }
className="editor-block-compare__current"
className="editor-block-compare__current block-editor-block-compare__current"
action={ onKeep }
actionText={ __( 'Convert to HTML' ) }
rawContent={ original.rawContent }
Expand All @@ -71,7 +71,7 @@ class BlockCompare extends Component {

<BlockView
title={ __( 'After Conversion' ) }
className="editor-block-compare__converted"
className="editor-block-compare__converted block-editor-block-compare__converted"
action={ onConvert }
actionText={ convertButtonText }
rawContent={ difference }
Expand Down
18 changes: 9 additions & 9 deletions packages/block-editor/src/components/block-compare/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
*/

// Ensure the modal fits the content, otherwise it could be too big
.editor-block-compare {
.block-editor-block-compare {
overflow: auto;
height: auto;

Expand All @@ -12,7 +12,7 @@
}
}

.editor-block-compare__wrapper {
.block-editor-block-compare__wrapper {
display: flex;
padding-bottom: $panel-padding;

Expand All @@ -29,12 +29,12 @@
}
}

.editor-block-compare__converted {
.block-editor-block-compare__converted {
border-left: 1px solid #ddd;
padding-left: 15px;
}

.editor-block-compare__html {
.block-editor-block-compare__html {
font-family: $editor-html-font;
font-size: 12px;
color: $dark-gray-800;
Expand All @@ -48,16 +48,16 @@
padding-bottom: 3px;
}

span.editor-block-compare__added {
span.block-editor-block-compare__added {
background-color: #acf2bd;
}

span.editor-block-compare__removed {
span.block-editor-block-compare__removed {
background-color: $alert-red;
}
}

.editor-block-compare__preview {
.block-editor-block-compare__preview {
padding: 0;
padding-top: $block-padding;

Expand All @@ -67,11 +67,11 @@
}
}

.editor-block-compare__action {
.block-editor-block-compare__action {
margin-top: $block-padding;
}

.editor-block-compare__heading {
.block-editor-block-compare__heading {
font-size: 1em;
font-weight: 400;
margin: 0.67em 0;
Expand Down
10 changes: 5 additions & 5 deletions packages/block-editor/src/components/block-compare/test/__snapshots__/block-view.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,26 +5,26 @@ exports[`BlockView should match snapshot 1`] = `
className="class"
>
<div
className="editor-block-compare__content"
className="editor-block-compare__content block-editor-block-compare__content"
>
<h2
className="editor-block-compare__heading"
className="editor-block-compare__heading block-editor-block-compare__heading"
>
title
</h2>
<div
className="editor-block-compare__html"
className="editor-block-compare__html block-editor-block-compare__html"
>
raw
</div>
<div
className="editor-block-compare__preview edit-post-visual-editor"
className="editor-block-compare__preview block-editor-block-compare__preview edit-post-visual-editor"
>
render
</div>
</div>
<div
className="editor-block-compare__action"
className="editor-block-compare__action block-editor-block-compare__action"
>
<ForwardRef(Button)
isLarge={true}
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/block-drop-zone/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@ class BlockDropZone extends Component {
return (
<MediaUploadCheck>
<DropZone
className={ classnames( 'editor-block-drop-zone', {
className={ classnames( 'editor-block-drop-zone block-editor-block-drop-zone', {
'is-appender': isAppender,
} ) }
onFilesDrop={ this.onFilesDrop }
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/block-drop-zone/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// Dropzones
.editor-block-drop-zone {
.block-editor-block-drop-zone {
border: none;
border-radius: 0;

Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/block-icon/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export default function BlockIcon( { icon, showColors = false, className } ) {
<span
style={ style }
className={ classnames(
'editor-block-icon',
'editor-block-icon block-editor-block-icon',
className,
{ 'has-colors': showColors }
) }
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/block-icon/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.editor-block-icon {
.block-editor-block-icon {
display: flex;
align-items: center;
justify-content: center;
Expand Down
12 changes: 6 additions & 6 deletions packages/block-editor/src/components/block-inspector/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,16 +34,16 @@ const BlockInspector = ( { selectedBlockClientId, selectedBlockName, blockType,
* because we want the user to focus on the unregistered block warning, not block settings.
*/
if ( ! blockType || ! selectedBlockClientId || isSelectedBlockUnregistered ) {
return <span className="editor-block-inspector__no-blocks">{ __( 'No block selected.' ) }</span>;
return <span className="editor-block-inspector__no-blocks block-editor-block-inspector__no-blocks">{ __( 'No block selected.' ) }</span>;
}

return (
<Fragment>
<div className="editor-block-inspector__card">
<div className="editor-block-inspector__card block-editor-block-inspector__card">
<BlockIcon icon={ blockType.icon } showColors />
<div className="editor-block-inspector__card-content">
<div className="editor-block-inspector__card-title">{ blockType.title }</div>
<div className="editor-block-inspector__card-description">{ blockType.description }</div>
<div className="editor-block-inspector__card-content block-editor-block-inspector__card-content">
<div className="editor-block-inspector__card-title block-editor-block-inspector__card-title">{ blockType.title }</div>
<div className="editor-block-inspector__card-description block-editor-block-inspector__card-description">{ blockType.description }</div>
</div>
</div>
{ hasBlockStyles && (
Expand All @@ -63,7 +63,7 @@ const BlockInspector = ( { selectedBlockClientId, selectedBlockName, blockType,
<InspectorAdvancedControls.Slot>
{ ( fills ) => ! isEmpty( fills ) && (
<PanelBody
className="editor-block-inspector__advanced"
className="editor-block-inspector__advanced block-editor-block-inspector__advanced"
title={ __( 'Advanced' ) }
initialOpen={ false }
>
Expand Down
14 changes: 7 additions & 7 deletions packages/block-editor/src/components/block-inspector/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.editor-block-inspector__no-blocks {
.block-editor-block-inspector__no-blocks {
display: block;
font-size: $default-font-size;
background: $white;
Expand All @@ -7,35 +7,35 @@
}


.editor-block-inspector__card {
.block-editor-block-inspector__card {
display: flex;
align-items: flex-start;
margin: -16px;
padding: 16px;
}

.editor-block-inspector__card-icon {
.block-editor-block-inspector__card-icon {
border: $border-width solid $light-gray-700;
padding: 7px;
margin-right: 10px;
height: 36px;
width: 36px;
}

.editor-block-inspector__card-content {
.block-editor-block-inspector__card-content {
flex-grow: 1;
}

.editor-block-inspector__card-title {
.block-editor-block-inspector__card-title {
font-weight: 500;
margin-bottom: 5px;
}

.editor-block-inspector__card-description {
.block-editor-block-inspector__card-description {
font-size: $default-font-size;
}

.editor-block-inspector__card .editor-block-icon {
.block-editor-block-inspector__card .block-editor-block-icon {
margin-left: -2px;
margin-right: 10px;
padding: 0 3px;
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/block-list-appender/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.block-list-appender > .editor-inserter {
.block-list-appender > .block-editor-inserter {
display: block;
}

Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/block-list/block-contextual-toolbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ function BlockContextualToolbar( { focusOnMount } ) {
return (
<NavigableToolbar
focusOnMount={ focusOnMount }
className="editor-block-contextual-toolbar"
className="editor-block-contextual-toolbar block-editor-block-contextual-toolbar"
/* translators: accessibility text for the block toolbar */
aria-label={ __( 'Block tools' ) }
>
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/block-list/block-html.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export class BlockHTML extends Component {
const { html } = this.state;
return (
<TextareaAutosize
className="editor-block-list__block-html-textarea"
className="editor-block-list__block-html-textarea block-editor-block-list__block-html-textarea"
value={ html }
onBlur={ this.onBlur }
onChange={ this.onChange }
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/block-list/block-invalid-warning.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export class BlockInvalidWarning extends Component {
__( 'Resolve Block' )
}
onRequestClose={ this.onCompareClose }
className="editor-block-compare"
className="editor-block-compare block-editor-block-compare"
>
<BlockCompare
block={ block }
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/block-list/block-mobile-toolbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import VisualEditorInserter from '../inserter';

function BlockMobileToolbar( { clientId } ) {
return (
<div className="editor-block-list__block-mobile-toolbar">
<div className="editor-block-list__block-mobile-toolbar block-editor-block-list__block-mobile-toolbar">
<VisualEditorInserter />
<BlockMover clientIds={ [ clientId ] } />
</div>
Expand Down
Loading