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: Remove legacy "editor-" class name compatibility #19050

Merged
merged 3 commits into from
Dec 11, 2019
Merged

Block Editor: Remove legacy "editor-" class name compatibility #19050

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
df60f4a
Block Editor: Remove legacy "editor-" class name compatibility
aduth Dec 10, 2019
acdb780
Block Editor: Update lingering references to legacy block icon class
aduth Dec 10, 2019
81761ee
E2E Tests: Restore expected block menu class name for group block
aduth Dec 10, 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
1 change: 0 additions & 1 deletion packages/base-styles/_z-index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,6 @@ $z-layers: (
// The toolbar, when contextual, should be above any adjacent nested block click overlays.
".block-editor-block-list__layout .reusable-block-edit-panel": 61,
".block-editor-block-contextual-toolbar": 61,
".editor-inner-blocks .block-editor-block-list__breadcrumb": 62,

// The block mover, particularly in nested contexts,
// should overlap most block content.
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 block-editor-block-compare__content">
<h2 className="editor-block-compare__heading block-editor-block-compare__heading">{ title }</h2>
<div className="block-editor-block-compare__content">
<h2 className="block-editor-block-compare__heading">{ title }</h2>

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

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

<div className="editor-block-compare__action block-editor-block-compare__action">
<div className="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 block-editor-block-compare__added': item.added,
'editor-block-compare__removed block-editor-block-compare__removed': item.removed,
'block-editor-block-compare__added': item.added,
'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 block-editor-block-compare__wrapper">
<div className="block-editor-block-compare__wrapper">
<BlockView
title={ __( 'Current' ) }
className="editor-block-compare__current block-editor-block-compare__current"
className="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 block-editor-block-compare__converted"
className="block-editor-block-compare__converted"
action={ onConvert }
actionText={ convertButtonText }
rawContent={ difference }
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 block-editor-block-compare__content"
className="block-editor-block-compare__content"
>
<h2
className="editor-block-compare__heading block-editor-block-compare__heading"
className="block-editor-block-compare__heading"
>
title
</h2>
<div
className="editor-block-compare__html block-editor-block-compare__html"
className="block-editor-block-compare__html"
>
raw
</div>
<div
className="editor-block-compare__preview block-editor-block-compare__preview edit-post-visual-editor"
className="block-editor-block-compare__preview edit-post-visual-editor"
>
render
</div>
</div>
<div
className="editor-block-compare__action block-editor-block-compare__action"
className="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 @@ -117,7 +117,7 @@ class BlockDropZone extends Component {
const isAppender = index === undefined;
return (
<DropZone
className={ classnames( 'editor-block-drop-zone block-editor-block-drop-zone', {
className={ classnames( 'block-editor-block-drop-zone', {
'is-appender': isAppender,
} ) }
onHTMLDrop={ this.onHTMLDrop }
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 block-editor-block-icon',
'block-editor-block-icon',
className,
{ 'has-colors': showColors }
) }
Expand Down
4 changes: 2 additions & 2 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 @@ -40,7 +40,7 @@ const BlockInspector = ( {
if ( ! blockType || ! selectedBlockClientId || isSelectedBlockUnregistered ) {
if ( showNoBlockSelectedMessage ) {
return (
<span className="editor-block-inspector__no-blocks block-editor-block-inspector__no-blocks">
<span className="block-editor-block-inspector__no-blocks">
{ __( 'No block selected.' ) }
</span>
);
Expand Down Expand Up @@ -70,7 +70,7 @@ const BlockInspector = ( {
{ ( { hasFills } ) =>
hasFills( InspectorAdvancedControls.slotName ) && (
<PanelBody
className="editor-block-inspector__advanced block-editor-block-inspector__advanced"
className="block-editor-block-inspector__advanced"
title={ __( 'Advanced' ) }
initialOpen={ false }
>
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 block-editor-block-contextual-toolbar"
className="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 @@ -39,7 +39,7 @@ function BlockHTML( { clientId } ) {

return (
<TextareaAutosize
className="editor-block-list__block-html-textarea block-editor-block-list__block-html-textarea"
className="block-editor-block-list__block-html-textarea"
value={ html }
onBlur={ onChange }
onChange={ ( event ) => setHtml( event.target.value ) }
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 @@ -71,7 +71,7 @@ export class BlockInvalidWarning extends Component {
__( 'Resolve Block' )
}
onRequestClose={ this.onCompareClose }
className="editor-block-compare block-editor-block-compare"
className="block-editor-block-compare"
>
<BlockCompare
block={ block }
Expand Down
8 changes: 4 additions & 4 deletions packages/block-editor/src/components/block-list/block.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -453,7 +453,7 @@ function BlockListBlock( {
// The wp-block className is important for editor styles.
// Generate the wrapper class names handling the different states of the block.
const wrapperClassName = classnames(
'wp-block editor-block-list__block block-editor-block-list__block',
'wp-block block-editor-block-list__block',
{
'has-warning': ! isValid || !! hasError || isUnregisteredBlock,
'is-selected': shouldAppearSelected,
Expand Down Expand Up @@ -547,7 +547,7 @@ function BlockListBlock( {
/> }
<div
className={ classnames(
'editor-block-list__block-edit block-editor-block-list__block-edit',
'block-editor-block-list__block-edit',
{ 'has-mover-inside': moverDirection === 'horizontal' },
) }
>
Expand Down Expand Up @@ -613,7 +613,7 @@ function BlockListBlock( {
</IgnoreNestedEvents>
</div>
{ showInserterShortcuts && (
<div className="editor-block-list__side-inserter block-editor-block-list__side-inserter">
<div className="block-editor-block-list__side-inserter">
<InserterWithShortcuts
clientId={ clientId }
rootClientId={ rootClientId }
Expand All @@ -622,7 +622,7 @@ function BlockListBlock( {
</div>
) }
{ showEmptyBlockSideInserter && (
<div className="editor-block-list__empty-block-inserter block-editor-block-list__empty-block-inserter">
<div className="block-editor-block-list__empty-block-inserter">
<Inserter
position="top right"
onToggle={ selectOnOpen }
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/block-list/breadcrumb.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const BlockBreadcrumb = forwardRef( ( { clientId }, ref ) => {
const { setNavigationMode } = useDispatch( 'core/block-editor' );

return (
<div className="editor-block-list__breadcrumb block-editor-block-list__breadcrumb">
<div className="block-editor-block-list__breadcrumb">
<Toolbar>
<Button ref={ ref } onClick={ () => setNavigationMode( false ) }>
<BlockTitle clientId={ clientId } />
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/block-list/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ function BlockList( {
<div
ref={ ref }
className={ classnames(
'editor-block-list__layout block-editor-block-list__layout',
'block-editor-block-list__layout',
className
) }
>
Expand Down
6 changes: 3 additions & 3 deletions packages/block-editor/src/components/block-list/insertion-point.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,9 @@ export default function BlockInsertionPoint( { rootClientId, clientId } ) {
}

return (
<div className="editor-block-list__insertion-point block-editor-block-list__insertion-point">
<div className="block-editor-block-list__insertion-point">
{ showInsertionPoint && (
<div className="editor-block-list__insertion-point-indicator block-editor-block-list__insertion-point-indicator" />
<div className="block-editor-block-list__insertion-point-indicator" />
) }
<div
onFocus={ onFocus }
Expand All @@ -59,7 +59,7 @@ export default function BlockInsertionPoint( { rootClientId, clientId } ) {
// See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
tabIndex={ -1 }
className={
classnames( 'editor-block-list__insertion-point-inserter block-editor-block-list__insertion-point-inserter', {
classnames( 'block-editor-block-list__insertion-point-inserter', {
'is-visible': isInserterFocused,
} )
}
Expand Down
12 changes: 6 additions & 6 deletions packages/block-editor/src/components/block-mover/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,9 +86,9 @@ export class BlockMover extends Component {
// to an unfocused state (body as active element) without firing blur on,
// the rendering parent, leaving it unable to react to focus out.
return (
<div className={ classnames( 'editor-block-mover block-editor-block-mover', { 'is-visible': isFocused || ! isHidden, 'is-horizontal': orientation === 'horizontal' } ) }>
<div className={ classnames( 'block-editor-block-mover', { 'is-visible': isFocused || ! isHidden, 'is-horizontal': orientation === 'horizontal' } ) }>
<IconButton
className="editor-block-mover__control block-editor-block-mover__control"
className="block-editor-block-mover__control"
onClick={ isFirst ? null : onMoveUp }
icon={ getArrowIcon( 'up' ) }
// translators: %s: Horizontal direction of block movement ( left, right )
Expand All @@ -103,7 +103,7 @@ export class BlockMover extends Component {
{ ( { onDraggableStart, onDraggableEnd } ) => (
<IconButton
icon={ dragHandle }
className="block-editor-block-mover__control-drag-handle editor-block-mover__control block-editor-block-mover__control"
className="block-editor-block-mover__control-drag-handle block-editor-block-mover__control"
aria-hidden="true"
onDragStart={ onDraggableStart }
onDragEnd={ onDraggableEnd }
Expand All @@ -113,7 +113,7 @@ export class BlockMover extends Component {
</BlockDraggable>

<IconButton
className="editor-block-mover__control block-editor-block-mover__control"
className="block-editor-block-mover__control"
onClick={ isLast ? null : onMoveDown }
icon={ getArrowIcon( 'down' ) }
// translators: %s: Horizontal direction of block movement ( left, right )
Expand All @@ -123,7 +123,7 @@ export class BlockMover extends Component {
onFocus={ this.onFocus }
onBlur={ this.onBlur }
/>
<span id={ `block-editor-block-mover__up-description-${ instanceId }` } className="editor-block-mover__description block-editor-block-mover__description">
<span id={ `block-editor-block-mover__up-description-${ instanceId }` } className="block-editor-block-mover__description">
{
getBlockMoverDescription(
blocksCount,
Expand All @@ -137,7 +137,7 @@ export class BlockMover extends Component {
)
}
</span>
<span id={ `block-editor-block-mover__down-description-${ instanceId }` } className="editor-block-mover__description block-editor-block-mover__description">
<span id={ `block-editor-block-mover__down-description-${ instanceId }` } className="block-editor-block-mover__description">
{
getBlockMoverDescription(
blocksCount,
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/block-mover/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
// Don't add negative vertical margin for wide, fullwide, or mobile.
// @todo: simplify this selector.
@include break-small() {
.block-editor-block-list__block:not([data-align="wide"]):not([data-align="full"]) .editor-block-mover:not(.is-horizontal) {
.block-editor-block-list__block:not([data-align="wide"]):not([data-align="full"]) .block-editor-block-mover:not(.is-horizontal) {
margin-top: 0;
}
}
Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/src/components/block-mover/test/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,15 +42,15 @@ describe( 'BlockMover', () => {
expect( drag.type().name ).toBe( 'BlockDraggable' );
expect( moveDown.name() ).toBe( 'ForwardRef(IconButton)' );
expect( moveUp.props() ).toMatchObject( {
className: 'editor-block-mover__control block-editor-block-mover__control',
className: 'block-editor-block-mover__control',
onClick: undefined,
label: 'Move up',
icon: upArrow,
'aria-disabled': undefined,
'aria-describedby': 'block-editor-block-mover__up-description-1',
} );
expect( moveDown.props() ).toMatchObject( {
className: 'editor-block-mover__control block-editor-block-mover__control',
className: 'block-editor-block-mover__control',
onClick: undefined,
label: 'Move down',
icon: downArrow,
Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/src/components/block-navigation/dropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ function BlockNavigationDropdown( { hasBlocks, isDisabled } ) {

return (
<Dropdown
contentClassName="editor-block-navigation__popover block-editor-block-navigation__popover"
contentClassName="block-editor-block-navigation__popover"
renderToggle={ ( { isOpen, onToggle } ) => (
<>
{ isEnabled && <KeyboardShortcuts
Expand All @@ -37,7 +37,7 @@ function BlockNavigationDropdown( { hasBlocks, isDisabled } ) {
aria-expanded={ isOpen }
onClick={ isEnabled ? onToggle : undefined }
label={ __( 'Block navigation' ) }
className="editor-block-navigation block-editor-block-navigation"
className="block-editor-block-navigation"
shortcut={ displayShortcut.access( 'o' ) }
aria-disabled={ ! isEnabled }
/>
Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/src/components/block-navigation/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,9 @@ function BlockNavigation( { rootBlock, rootBlocks, selectedBlockClientId, select
return (
<NavigableMenu
role="presentation"
className="editor-block-navigation__container block-editor-block-navigation__container"
className="block-editor-block-navigation__container"
>
<p className="editor-block-navigation__label block-editor-block-navigation__label">{ __( 'Block navigation' ) }</p>
<p className="block-editor-block-navigation__label">{ __( 'Block navigation' ) }</p>
{ hasHierarchy && (
<BlockNavigationList
blocks={ [ rootBlock ] }
Expand Down
8 changes: 4 additions & 4 deletions packages/block-editor/src/components/block-navigation/list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,16 +58,16 @@ export default function BlockNavigationList( {
* Safari+VoiceOver won't announce the list otherwise.
*/
/* eslint-disable jsx-a11y/no-redundant-roles */
<ul className="editor-block-navigation__list block-editor-block-navigation__list" role="list">
<ul className="block-editor-block-navigation__list" role="list">
{ map( omitBy( blocks, isNil ), ( block ) => {
const blockType = getBlockType( block.name );
const isSelected = block.clientId === selectedBlockClientId;

return (
<li key={ block.clientId }>
<div className="editor-block-navigation__item block-editor-block-navigation__item">
<div className="block-editor-block-navigation__item">
<Button
className={ classnames( 'editor-block-navigation__item-button block-editor-block-navigation__item-button', {
className={ classnames( 'block-editor-block-navigation__item-button', {
'is-selected': isSelected,
} ) }
onClick={ () => selectBlock( block.clientId ) }
Expand All @@ -92,7 +92,7 @@ export default function BlockNavigationList( {
} ) }
{ shouldShowAppender && (
<li>
<div className="editor-block-navigation__item block-editor-block-navigation__item">
<div className="block-editor-block-navigation__item">
<ButtonBlockAppender
rootClientId={ parentBlockClientId }
__experimentalSelectBlockOnInsert={ false }
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/block-preview/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
padding: 0;
}

.editor-block-list__block-edit [data-block] {
.block-editor-block-list__block-edit [data-block] {
margin: 0;
}

Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/block-settings-menu/block-convert-button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export default function BlockConvertButton( { shouldRender, onClick, small } ) {
const label = __( 'Convert to Blocks' );
return (
<MenuItem
className="editor-block-settings-menu__control block-editor-block-settings-menu__control"
className="block-editor-block-settings-menu__control"
onClick={ onClick }
icon="screenoptions"
>
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/block-settings-menu/block-mode-toggle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export function BlockModeToggle( { blockType, mode, onToggleMode, small = false,

return (
<MenuItem
className="editor-block-settings-menu__control block-editor-block-settings-menu__control"
className="block-editor-block-settings-menu__control"
onClick={ onToggleMode }
icon="html"
>
Expand Down
Loading