Framework: rename blocks- classNames to editor- since we moved the files

WordPress · Sep 27, 2017 · 94a905c · 94a905c
1 parent b0d8521
commit 94a905c
Show file tree

Hide file tree

Showing 42 changed files with 115 additions and 115 deletions.
diff --git a/editor/assets/stylesheets/_z-index.scss b/editor/assets/stylesheets/_z-index.scss
@@ -14,7 +14,7 @@ $z-layers: (
 	'.editor-inserter__tabs': 1,
 	'.editor-inserter__tab.is-active': 1,
 	'.components-panel__header': 1,
-	'.blocks-format-toolbar__link-modal': 1,
+	'.editor-format-toolbar__link-modal': 1,
 	'.editor-block-switcher__menu': 2,
 	'.editor-block-mover': 10,
 	'.blocks-gallery-image__inline-menu': 10,
@@ -37,7 +37,7 @@ $z-layers: (
 	// #adminmenuwrap { z-index: 9990 }
 	'.components-popover': 1000000,
 	'.components-autocomplete__results': 1000000,
-	'.blocks-url-input__suggestions': 9999,
+	'.editor-url-input__suggestions': 9999,
 );
 
 @function z-index( $key ) {

diff --git a/editor/block-autocomplete/index.js b/editor/block-autocomplete/index.js
@@ -45,7 +45,7 @@ class BlockAutocomplete extends Component {
 				triggerPrefix="/"
 				options={ options }
 				onSelect={ this.onSelect }
-				className="blocks-block-autocomplete"
+				className="editor-block-autocomplete"
 			>
 				{ children }
 			</Autocomplete>

diff --git a/editor/block-autocomplete/style.scss b/editor/block-autocomplete/style.scss
@@ -1,3 +1,3 @@
-.blocks-block-autocomplete .dashicon {
+.editor-block-autocomplete .dashicon {
 	margin-right: 8px;
 }
diff --git a/editor/color-palette/index.js b/editor/color-palette/index.js
@@ -38,14 +38,14 @@ class ColorPalette extends Component {
 	render() {
 		const { colors, value, onChange } = this.props;
 		return (
-			<div className="blocks-color-palette">
+			<div className="editor-color-palette">
 				{ colors.map( ( color ) => {
 					const style = { color: color };
-					const className = classnames( 'blocks-color-palette__item', { 'is-active': value === color } );
+					const className = classnames( 'editor-color-palette__item', { 'is-active': value === color } );
 					/* Disable reason: aria-current seems like a valid aria-prop and well-suited for this */
 					/* eslint-disable jsx-a11y/aria-props */
 					return (
-						<div key={ color } className="blocks-color-palette__item-wrapper">
+						<div key={ color } className="editor-color-palette__item-wrapper">
 							<button
 								className={ className }
 								style={ style }
@@ -58,16 +58,16 @@ class ColorPalette extends Component {
 					/* eslint-enable jsx-a11y/aria-props */
 				} ) }
 
-				<div className="blocks-color-palette__item-wrapper blocks-color-palette__custom-color">
+				<div className="editor-color-palette__item-wrapper editor-color-palette__custom-color">
 					<button
-						className="blocks-color-palette__item"
+						className="editor-color-palette__item"
 						onClick={ this.openPicker }
 						aria-label={ __( 'Open custom color picker' ) }
 					/>
 					<Popover
 						isOpen={ this.state.opened }
 						onClose={ this.closePicker }
-						className="blocks-color-palette__picker"
+						className="editor-color-palette__picker"
 					>
 						<ChromePicker
 							color={ value }
@@ -81,9 +81,9 @@ class ColorPalette extends Component {
 					</Popover>
 				</div>
 
-				<div className="blocks-color-palette__item-wrapper blocks-color-palette__clear-color">
-					<button className="blocks-color-palette__item" onClick={ () => onChange( undefined ) }>
-						<div className="blocks-color-palette__clear-color-line" />
+				<div className="editor-color-palette__item-wrapper editor-color-palette__clear-color">
+					<button className="editor-color-palette__item" onClick={ () => onChange( undefined ) }>
+						<div className="editor-color-palette__clear-color-line" />
 					</button>
 				</div>
 			</div>

diff --git a/editor/color-palette/style.scss b/editor/color-palette/style.scss
@@ -1,11 +1,11 @@
 $color-palette-circle-size: 28px;
 $color-palette-circle-spacing: 14px;
 
-.blocks-color-palette {
+.editor-color-palette {
 	margin-right: -14px;
 }
 
-.blocks-color-palette__item-wrapper {
+.editor-color-palette__item-wrapper {
 	display: inline-block;
 	height: $color-palette-circle-size;
 	width: $color-palette-circle-size;
@@ -18,7 +18,7 @@ $color-palette-circle-spacing: 14px;
 	}
 }
 
-.blocks-color-palette__item {
+.editor-color-palette__item {
 	display: inline-block;
 	height: 100%;
 	width: 100%;
@@ -48,13 +48,13 @@ $color-palette-circle-spacing: 14px;
 	}
 }
 
-.blocks-color-palette__clear-color .blocks-color-palette__item {
+.editor-color-palette__clear-color .editor-color-palette__item {
 	color: $white;
 	background: $white;
 	overflow: hidden;
 }
 
-.blocks-color-palette__clear-color-line {
+.editor-color-palette__clear-color-line {
 	cursor: pointer;
 	position: absolute;
 	border: 2px solid $alert-red;
@@ -78,13 +78,13 @@ $color-palette-circle-spacing: 14px;
 	}
 }
 
-.blocks-color-palette__custom-color .blocks-color-palette__item {
+.editor-color-palette__custom-color .editor-color-palette__item {
 	position: relative;
 	box-shadow: none;
 	overflow: hidden;
 }
 
-.blocks-color-palette__custom-color .blocks-color-palette__item:before {
+.editor-color-palette__custom-color .editor-color-palette__item:before {
 	box-sizing: border-box;
 	content: '';
 	filter: blur( 6px ) saturate( 0.7 ) brightness( 1.1 );
@@ -112,6 +112,6 @@ $color-palette-circle-spacing: 14px;
 	background-clip: content-box, content-box, content-box, content-box, content-box, content-box, padding-box, padding-box, padding-box, padding-box, padding-box, padding-box;
 }
 
-.blocks-color-palette__picker .chrome-picker {
+.editor-color-palette__picker .chrome-picker {
 	width: 100% !important;
 }
diff --git a/editor/editable/format-toolbar/index.js b/editor/editable/format-toolbar/index.js
@@ -147,7 +147,7 @@ class FormatToolbar extends Component {
 			} ) );
 
 		const linkSettings = settingsVisible && (
-			<fieldset className="blocks-format-toolbar__link-settings">
+			<fieldset className="editor-format-toolbar__link-settings">
 				<ToggleControl
 					label={ __( 'Open in new window' ) }
 					checked={ opensInNewWindow }
@@ -165,12 +165,12 @@ class FormatToolbar extends Component {
 		}
 
 		return (
-			<div className="blocks-format-toolbar">
+			<div className="editor-format-toolbar">
 				<Toolbar controls={ toolbarControls } />
 
 				{ ( isAddingLink || isEditingLink ) &&
 					<form
-						className="blocks-format-toolbar__link-modal"
+						className="editor-format-toolbar__link-modal"
 						style={ linkStyle }
 						onSubmit={ this.submitLink }>
 						<UrlInput value={ newLinkValue } onChange={ this.onChangeLinkValue } />
@@ -182,9 +182,9 @@ class FormatToolbar extends Component {
 				}
 
 				{ !! formats.link && ! isAddingLink && ! isEditingLink &&
-					<div className="blocks-format-toolbar__link-modal" style={ linkStyle }>
+					<div className="editor-format-toolbar__link-modal" style={ linkStyle }>
 						<a
-							className="blocks-format-toolbar__link-value"
+							className="editor-format-toolbar__link-value"
 							href={ formats.link.value }
 							target="_blank"
 						>

diff --git a/editor/editable/format-toolbar/style.scss b/editor/editable/format-toolbar/style.scss
@@ -1,8 +1,8 @@
-.blocks-format-toolbar {
+.editor-format-toolbar {
 	display: inline-flex;
 }
 
-.blocks-format-toolbar__link-modal {
+.editor-format-toolbar__link-modal {
 	position: absolute;
 	box-shadow: 0px 3px 20px rgba( 18, 24, 30, .1 ), 0px 1px 3px rgba( 18, 24, 30, .1 );
 	border: 1px solid #e0e5e9;
@@ -14,14 +14,14 @@
 	font-family: $default-font;
 	font-size: $default-font-size;
 	line-height: $default-line-height;
-	z-index: z-index( '.blocks-format-toolbar__link-modal' );
+	z-index: z-index( '.editor-format-toolbar__link-modal' );
 
-	.blocks-url-input {
+	.editor-url-input {
 		width: auto;
 	}
 }
 
-.blocks-format-toolbar__link-value {
+.editor-format-toolbar__link-value {
 	padding: 10px;
 	flex-grow: 1;
 	overflow: hidden;
@@ -32,12 +32,12 @@
 	}
 }
 
-.blocks-format-toolbar__link-settings {
+.editor-format-toolbar__link-settings {
 	border-top: 1px solid $light-gray-500;
 	width: 100%;
 	padding: 10px 8px;
 
-	.blocks-base-control {
+	.editor-base-control {
 		margin: 0;
 	}
 }
diff --git a/editor/editable/index.js b/editor/editable/index.js
@@ -266,7 +266,7 @@ export default class Editable extends Component {
 
 		// Find the parent "relative" positioned container
 		const container = this.props.inlineToolbar
-			? this.editor.getBody().closest( '.blocks-editable' )
+			? this.editor.getBody().closest( '.editor-editable' )
 			: this.editor.getBody().closest( '.editor-visual-editor__block' );
 		const containerPosition = container.getBoundingClientRect();
 		const blockPadding = 14;
@@ -601,7 +601,7 @@ export default class Editable extends Component {
 		// mount and initialize a new child element in its place.
 		const key = [ 'editor', Tagname ].join();
 		const isPlaceholderVisible = placeholder && ( ! focus || keepPlaceholderOnFocus ) && this.state.empty;
-		const classes = classnames( wrapperClassname, 'blocks-editable' );
+		const classes = classnames( wrapperClassname, 'editor-editable' );
 
 		const formatToolbar = (
 			<FormatToolbar
@@ -638,7 +638,7 @@ export default class Editable extends Component {
 				/>
 				{ isPlaceholderVisible &&
 					<Tagname
-						className={ classnames( 'blocks-editable__tinymce', className ) }
+						className={ classnames( 'editor-editable__tinymce', className ) }
 						style={ style }
 					>
 						{ MultilineTag ? <MultilineTag>{ placeholder }</MultilineTag> : placeholder }

diff --git a/editor/editable/style.scss b/editor/editable/style.scss
@@ -1,8 +1,8 @@
-.blocks-editable {
+.editor-editable {
 	position: relative;
 }
 
-.blocks-editable__tinymce {
+.editor-editable__tinymce {
 	margin: 0;
 	position: relative;
 
@@ -58,13 +58,13 @@
 		}
 	}
 
-	& + .blocks-editable__tinymce {
+	& + .editor-editable__tinymce {
 		opacity: 0.5;
 		pointer-events: none;
 	}
 }
 
-.has-drop-cap .blocks-editable__tinymce:not( :focus )  {
+.has-drop-cap .editor-editable__tinymce:not( :focus )  {
 	&:first-letter {
 		float: left;
 		font-size: 4.1em;

diff --git a/editor/editable/tinymce.js b/editor/editable/tinymce.js
@@ -37,7 +37,7 @@ export default class TinyMCE extends Component {
 		}
 
 		if ( ! isEqual( this.props.className, nextProps.className ) ) {
-			this.editorNode.className = classnames( nextProps.className, 'blocks-editable__tinymce' );
+			this.editorNode.className = classnames( nextProps.className, 'editor-editable__tinymce' );
 		}
 	}
 
@@ -97,7 +97,7 @@ export default class TinyMCE extends Component {
 			ref: ( node ) => this.editorNode = node,
 			contentEditable: true,
 			suppressContentEditableWarning: true,
-			className: classnames( className, 'blocks-editable__tinymce' ),
+			className: classnames( className, 'editor-editable__tinymce' ),
 			style,
 			'aria-label': label,
 		}, children );

diff --git a/editor/inspector-controls/base-control/index.js b/editor/inspector-controls/base-control/index.js
@@ -10,10 +10,10 @@ import './style.scss';
 
 function BaseControl( { id, label, help, className, children } ) {
 	return (
-		<div className={ classnames( 'blocks-base-control', className ) }>
-			{ label && <label className="blocks-base-control__label" htmlFor={ id }>{ label }</label> }
+		<div className={ classnames( 'editor-base-control', className ) }>
+			{ label && <label className="editor-base-control__label" htmlFor={ id }>{ label }</label> }
 			{ children }
-			{ !! help && <p id={ id + '__help' } className="blocks-base-control__help">{ help }</p> }
+			{ !! help && <p id={ id + '__help' } className="editor-base-control__help">{ help }</p> }
 		</div>
 	);
 }

diff --git a/editor/inspector-controls/base-control/style.scss b/editor/inspector-controls/base-control/style.scss
@@ -1,12 +1,12 @@
-.blocks-base-control {
+.editor-base-control {
 	margin: 0 0 1.5em 0;
 }
 
-.blocks-base-control__label {
+.editor-base-control__label {
 	display: block;
 	margin-bottom: 5px;
 }
 
-.blocks-base-control__help {
+.editor-base-control__help {
 	font-style: italic;
 }
diff --git a/editor/inspector-controls/checkbox-control/index.js b/editor/inspector-controls/checkbox-control/index.js
@@ -17,15 +17,15 @@ function CheckboxControl( { label, heading, checked, help, instanceId, onChange,
 		<BaseControl label={ heading } id={ id } help={ help }>
 			<input
 				id={ id }
-				className="blocks-checkbox-control__input"
+				className="editor-checkbox-control__input"
 				type="checkbox"
 				value="1"
 				onChange={ onChangeValue }
 				checked={ checked }
 				aria-describedby={ !! help ? id + '__help' : undefined }
 				{ ...props }
 			/>
-			<label className="blocks-checkbox-control__label" htmlFor={ id }>
+			<label className="editor-checkbox-control__label" htmlFor={ id }>
 				{ label }
 			</label>
 		</BaseControl>

diff --git a/editor/inspector-controls/checkbox-control/style.scss b/editor/inspector-controls/checkbox-control/style.scss
@@ -1,4 +1,4 @@
-.blocks-checkbox-control__input[type=checkbox] {
+.editor-checkbox-control__input[type=checkbox] {
 	margin-top: 0;
 	margin-right: 6px;
 }
diff --git a/editor/inspector-controls/radio-control/index.js b/editor/inspector-controls/radio-control/index.js
@@ -19,15 +19,15 @@ function RadioControl( { label, selected, help, instanceId, onChange, options =
 	const onChangeValue = ( event ) => onChange( event.target.value );
 
 	return ! isEmpty( options ) && (
-		<BaseControl label={ label } id={ id } help={ help } className="blocks-radio-control">
+		<BaseControl label={ label } id={ id } help={ help } className="editor-radio-control">
 			{ options.map( ( option, index ) =>
 				<div
 					key={ ( id + '-' + index ) }
-					className="blocks-radio-control__option"
+					className="editor-radio-control__option"
 				>
 					<input
 						id={ ( id + '-' + index ) }
-						className="blocks-radio-control__input"
+						className="editor-radio-control__input"
 						type="radio"
 						name={ id }
 						value={ option.value }

diff --git a/editor/inspector-controls/radio-control/style.scss b/editor/inspector-controls/radio-control/style.scss
@@ -1,13 +1,13 @@
-.blocks-radio-control {
+.editor-radio-control {
 	display: flex;
 	flex-direction: column;
 }
 
-.blocks-radio-control__option:not(:last-child) {
+.editor-radio-control__option:not(:last-child) {
 	margin-bottom: 4px;
 }
 
-.blocks-radio-control__input[type=radio] {
+.editor-radio-control__input[type=radio] {
 	margin-top: 0;
 	margin-right: 6px;
 }