Rename Shared Blocks to Reusable Blocks (#8123)

* Rename Shared Blocks to Reusable Blocks * Add deprecated aliases for public reusable block functions * Change copy surrounding reusable blocks Change reusable block button copy so that 'reusable blocks' are treated as a collection that blocks are added to or removed from.
WordPress · Jul 27, 2018 · b3230f0 · b3230f0
1 parent 68519eb
commit b3230f0
Show file tree

Hide file tree

Showing 41 changed files with 681 additions and 568 deletions.
diff --git a/core-blocks/block/edit-panel/index.js b/core-blocks/block/edit-panel/index.js
@@ -12,7 +12,7 @@ import { withInstanceId } from '@wordpress/compose';
  */
 import './style.scss';
 
-class SharedBlockEditPanel extends Component {
+class ReusableBlockEditPanel extends Component {
 	constructor() {
 		super( ...arguments );
 
@@ -63,52 +63,52 @@ class SharedBlockEditPanel extends Component {
 		return (
 			<Fragment>
 				{ ( ! isEditing && ! isSaving ) && (
-					<div className="shared-block-edit-panel">
-						<b className="shared-block-edit-panel__info">
+					<div className="reusable-block-edit-panel">
+						<b className="reusable-block-edit-panel__info">
 							{ title }
 						</b>
 						<Button
 							ref={ this.editButton }
 							isLarge
-							className="shared-block-edit-panel__button"
+							className="reusable-block-edit-panel__button"
 							onClick={ onEdit }
 						>
 							{ __( 'Edit' ) }
 						</Button>
 					</div>
 				) }
 				{ ( isEditing || isSaving ) && (
-					<form className="shared-block-edit-panel" onSubmit={ this.handleFormSubmit }>
+					<form className="reusable-block-edit-panel" onSubmit={ this.handleFormSubmit }>
 						<label
-							htmlFor={ `shared-block-edit-panel__title-${ instanceId }` }
-							className="shared-block-edit-panel__label"
+							htmlFor={ `reusable-block-edit-panel__title-${ instanceId }` }
+							className="reusable-block-edit-panel__label"
 						>
 							{ __( 'Name:' ) }
 						</label>
 						<input
 							ref={ this.titleField }
 							type="text"
 							disabled={ isSaving }
-							className="shared-block-edit-panel__title"
+							className="reusable-block-edit-panel__title"
 							value={ title }
 							onChange={ this.handleTitleChange }
 							onKeyDown={ this.handleTitleKeyDown }
-							id={ `shared-block-edit-panel__title-${ instanceId }` }
+							id={ `reusable-block-edit-panel__title-${ instanceId }` }
 						/>
 						<Button
 							type="submit"
 							isPrimary
 							isLarge
 							isBusy={ isSaving }
 							disabled={ ! title || isSaving }
-							className="shared-block-edit-panel__button"
+							className="reusable-block-edit-panel__button"
 						>
 							{ __( 'Save' ) }
 						</Button>
 						<Button
 							isLarge
 							disabled={ isSaving }
-							className="shared-block-edit-panel__button"
+							className="reusable-block-edit-panel__button"
 							onClick={ onCancel }
 						>
 							{ __( 'Cancel' ) }
@@ -120,4 +120,4 @@ class SharedBlockEditPanel extends Component {
 	}
 }
 
-export default withInstanceId( SharedBlockEditPanel );
+export default withInstanceId( ReusableBlockEditPanel );
diff --git a/core-blocks/block/edit-panel/style.scss b/core-blocks/block/edit-panel/style.scss
@@ -1,4 +1,4 @@
-.editor-block-list__layout .shared-block-edit-panel {
+.editor-block-list__layout .reusable-block-edit-panel {
 	align-items: center;
 	background: $light-gray-100;
 	color: $dark-gray-500;
@@ -17,39 +17,39 @@
 		padding: 10px $block-padding;
 	}
 
-	.shared-block-edit-panel__spinner {
+	.reusable-block-edit-panel__spinner {
 		margin: 0 5px;
 	}
 
-	.shared-block-edit-panel__info {
+	.reusable-block-edit-panel__info {
 		margin-right: auto;
 	}
 
-	.shared-block-edit-panel__label {
+	.reusable-block-edit-panel__label {
 		margin-right: $item-spacing;
 		white-space: nowrap;
 		font-weight: 600;
 	}
 
-	.shared-block-edit-panel__title {
+	.reusable-block-edit-panel__title {
 		flex: 1 1 100%;
 		font-size: 14px;
 		height: 30px;
 		margin: #{ $item-spacing / 2 } 0 $item-spacing;
 	}
 
-	.components-button.shared-block-edit-panel__button {
+	.components-button.reusable-block-edit-panel__button {
 		margin: 0 5px 0 0;
 	}
 
 	@include break-large() {
 		flex-wrap: nowrap;
 
-		.shared-block-edit-panel__title {
+		.reusable-block-edit-panel__title {
 			margin: 0;
 		}
 
-		.components-button.shared-block-edit-panel__button {
+		.components-button.reusable-block-edit-panel__button {
 			margin: 0 0 0 5px;
 		}
 	}

diff --git a/core-blocks/block/edit.js b/core-blocks/block/edit.js
@@ -16,11 +16,11 @@ import { compose } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import SharedBlockEditPanel from './edit-panel';
-import SharedBlockIndicator from './indicator';
+import ReusableBlockEditPanel from './edit-panel';
+import ReusableBlockIndicator from './indicator';
 
-class SharedBlockEdit extends Component {
-	constructor( { sharedBlock } ) {
+class ReusableBlockEdit extends Component {
+	constructor( { reusableBlock } ) {
 		super( ...arguments );
 
 		this.startEditing = this.startEditing.bind( this );
@@ -29,15 +29,15 @@ class SharedBlockEdit extends Component {
 		this.setTitle = this.setTitle.bind( this );
 		this.save = this.save.bind( this );
 
-		if ( sharedBlock && sharedBlock.isTemporary ) {
-			// Start in edit mode when we're working with a newly created shared block
+		if ( reusableBlock && reusableBlock.isTemporary ) {
+			// Start in edit mode when we're working with a newly created reusable block
 			this.state = {
 				isEditing: true,
-				title: sharedBlock.title,
+				title: reusableBlock.title,
 				changedAttributes: {},
 			};
 		} else {
-			// Start in preview mode when we're working with an existing shared block
+			// Start in preview mode when we're working with an existing reusable block
 			this.state = {
 				isEditing: false,
 				title: null,
@@ -47,17 +47,17 @@ class SharedBlockEdit extends Component {
 	}
 
 	componentDidMount() {
-		if ( ! this.props.sharedBlock ) {
-			this.props.fetchSharedBlock();
+		if ( ! this.props.reusableBlock ) {
+			this.props.fetchReusableBlock();
 		}
 	}
 
 	startEditing() {
-		const { sharedBlock } = this.props;
+		const { reusableBlock } = this.props;
 
 		this.setState( {
 			isEditing: true,
-			title: sharedBlock.title,
+			title: reusableBlock.title,
 			changedAttributes: {},
 		} );
 	}
@@ -83,10 +83,10 @@ class SharedBlockEdit extends Component {
 	}
 
 	save() {
-		const { sharedBlock, onUpdateTitle, updateAttributes, block, onSave } = this.props;
+		const { reusableBlock, onUpdateTitle, updateAttributes, block, onSave } = this.props;
 		const { title, changedAttributes } = this.state;
 
-		if ( title !== sharedBlock.title ) {
+		if ( title !== reusableBlock.title ) {
 			onUpdateTitle( title );
 		}
 
@@ -97,14 +97,14 @@ class SharedBlockEdit extends Component {
 	}
 
 	render() {
-		const { isSelected, sharedBlock, block, isFetching, isSaving } = this.props;
+		const { isSelected, reusableBlock, block, isFetching, isSaving } = this.props;
 		const { isEditing, title, changedAttributes } = this.state;
 
-		if ( ! sharedBlock && isFetching ) {
+		if ( ! reusableBlock && isFetching ) {
 			return <Placeholder><Spinner /></Placeholder>;
 		}
 
-		if ( ! sharedBlock || ! block ) {
+		if ( ! reusableBlock || ! block ) {
 			return <Placeholder>{ __( 'Block has been deleted or is unavailable.' ) }</Placeholder>;
 		}
 
@@ -127,17 +127,17 @@ class SharedBlockEdit extends Component {
 			<Fragment>
 				{ element }
 				{ ( isSelected || isEditing ) && (
-					<SharedBlockEditPanel
+					<ReusableBlockEditPanel
 						isEditing={ isEditing }
-						title={ title !== null ? title : sharedBlock.title }
-						isSaving={ isSaving && ! sharedBlock.isTemporary }
+						title={ title !== null ? title : reusableBlock.title }
+						isSaving={ isSaving && ! reusableBlock.isTemporary }
 						onEdit={ this.startEditing }
 						onChangeTitle={ this.setTitle }
 						onSave={ this.save }
 						onCancel={ this.stopEditing }
 					/>
 				) }
-				{ ! isSelected && ! isEditing && <SharedBlockIndicator title={ sharedBlock.title } /> }
+				{ ! isSelected && ! isEditing && <ReusableBlockIndicator title={ reusableBlock.title } /> }
 			</Fragment>
 		);
 	}
@@ -146,35 +146,35 @@ class SharedBlockEdit extends Component {
 export default compose( [
 	withSelect( ( select, ownProps ) => {
 		const {
-			getSharedBlock,
-			isFetchingSharedBlock,
-			isSavingSharedBlock,
+			getReusableBlock,
+			isFetchingReusableBlock,
+			isSavingReusableBlock,
 			getBlock,
 		} = select( 'core/editor' );
 		const { ref } = ownProps.attributes;
-		const sharedBlock = getSharedBlock( ref );
+		const reusableBlock = getReusableBlock( ref );
 
 		return {
-			sharedBlock,
-			isFetching: isFetchingSharedBlock( ref ),
-			isSaving: isSavingSharedBlock( ref ),
-			block: sharedBlock ? getBlock( sharedBlock.clientId ) : null,
+			reusableBlock,
+			isFetching: isFetchingReusableBlock( ref ),
+			isSaving: isSavingReusableBlock( ref ),
+			block: reusableBlock ? getBlock( reusableBlock.clientId ) : null,
 		};
 	} ),
 	withDispatch( ( dispatch, ownProps ) => {
 		const {
-			fetchSharedBlocks,
+			fetchReusableBlocks,
 			updateBlockAttributes,
-			updateSharedBlockTitle,
-			saveSharedBlock,
+			updateReusableBlockTitle,
+			saveReusableBlock,
 		} = dispatch( 'core/editor' );
 		const { ref } = ownProps.attributes;
 
 		return {
-			fetchSharedBlock: partial( fetchSharedBlocks, ref ),
+			fetchReusableBlock: partial( fetchReusableBlocks, ref ),
 			updateAttributes: updateBlockAttributes,
-			onUpdateTitle: partial( updateSharedBlockTitle, ref ),
-			onSave: partial( saveSharedBlock, ref ),
+			onUpdateTitle: partial( updateReusableBlockTitle, ref ),
+			onSave: partial( saveReusableBlock, ref ),
 		};
 	} ),
-] )( SharedBlockEdit );
+] )( ReusableBlockEdit );
diff --git a/core-blocks/block/index.js b/core-blocks/block/index.js
@@ -11,8 +11,8 @@ import edit from './edit';
 export const name = 'core/block';
 
 export const settings = {
-	title: __( 'Shared Block' ),
-	category: 'shared',
+	title: __( 'Reusable Block' ),
+	category: 'reusable',
 
 	attributes: {
 		ref: {

diff --git a/core-blocks/block/index.php b/core-blocks/block/index.php
@@ -17,12 +17,12 @@ function render_block_core_block( $attributes ) {
 		return '';
 	}
 
-	$shared_block = get_post( $attributes['ref'] );
-	if ( ! $shared_block || 'wp_block' !== $shared_block->post_type ) {
+	$reusable_block = get_post( $attributes['ref'] );
+	if ( ! $reusable_block || 'wp_block' !== $reusable_block->post_type ) {
 		return '';
 	}
 
-	return do_blocks( $shared_block->post_content );
+	return do_blocks( $reusable_block->post_content );
 }
 
 register_block_type( 'core/block', array(

diff --git a/core-blocks/block/indicator/index.js b/core-blocks/block/indicator/index.js
@@ -9,16 +9,16 @@ import { __, sprintf } from '@wordpress/i18n';
  */
 import './style.scss';
 
-function SharedBlockIndicator( { title } ) {
-	// translators: %s: title/name of the shared block
-	const tooltipText = sprintf( __( 'Shared Block: %s' ), title );
+function ReusableBlockIndicator( { title } ) {
+	// translators: %s: title/name of the reusable block
+	const tooltipText = sprintf( __( 'Reusable Block: %s' ), title );
 	return (
 		<Tooltip text={ tooltipText }>
-			<span className="shared-block-indicator">
+			<span className="reusable-block-indicator">
 				<Dashicon icon="controls-repeat" />
 			</span>
 		</Tooltip>
 	);
 }
 
-export default SharedBlockIndicator;
+export default ReusableBlockIndicator;
diff --git a/core-blocks/block/indicator/style.scss b/core-blocks/block/indicator/style.scss
@@ -1,4 +1,4 @@
-.editor-block-list__layout .shared-block-indicator {
+.editor-block-list__layout .reusable-block-indicator {
 	background: $white;
 	border-left: 1px dashed $light-gray-500;
 	color: $dark-gray-500;

diff --git a/core-blocks/index.js b/core-blocks/index.js
@@ -35,7 +35,7 @@ import * as more from './more';
 import * as nextpage from './nextpage';
 import * as preformatted from './preformatted';
 import * as pullquote from './pullquote';
-import * as sharedBlock from './block';
+import * as reusableBlock from './block';
 import * as separator from './separator';
 import * as shortcode from './shortcode';
 import * as spacer from './spacer';
@@ -79,7 +79,7 @@ export const registerCoreBlocks = () => {
 		preformatted,
 		pullquote,
 		separator,
-		sharedBlock,
+		reusableBlock,
 		spacer,
 		subhead,
 		table,