Allow double quotes and template string sometimes (#7555)

* chore: Allow double quotes when strings contain single quotes

Fixes #7366

.eslintrc.js

@@ -130,7 +130,7 @@ module.exports = {
 			},
 			{
 				selector: 'ImportDeclaration[source.value="lodash"] Identifier.imported[name="memoize"]',
-				message: 'Use memize instead of Lodash\'s memoize',
+				message: 'Use memize instead of Lodash’s memoize',
 			},
 			{
 				selector: 'CallExpression[callee.object.name="page"][callee.property.name="waitFor"]',

core-blocks/categories/index.js

@@ -14,7 +14,7 @@ export const name = 'core/categories';
 export const settings = {
 	title: __( 'Categories' ),
 
-	description: __( 'Display a list of all your site\'s categories.' ),
+	description: __( 'Display a list of all your site’s categories.' ),
 
 	icon: 'list-view',
 

core-blocks/columns/index.js

@@ -66,7 +66,7 @@ export const settings = {
 		},
 	},
 
-	description: __( 'Add a block that displays content in multiple columns, then add whatever content blocks you\'d like.' ),
+	description: __( 'Add a block that displays content in multiple columns, then add whatever content blocks you’d like.' ),
 
 	supports: {
 		align: [ 'wide', 'full' ],

core-blocks/freeform/index.js

@@ -14,7 +14,7 @@ export const name = 'core/freeform';
 export const settings = {
 	title: __( 'Classic' ),
 
-	description: __( 'It\'s the classic WordPress editor and it\'s a block! Drop the editor right in.' ),
+	description: __( 'It’s the classic WordPress editor and it’s a block! Drop the editor right in.' ),
 
 	icon: 'editor-kitchensink',
 

core-blocks/image/index.js

@@ -93,7 +93,7 @@ const schema = {
 export const settings = {
 	title: __( 'Image' ),
 
-	description: __( 'They\'re worth 1,000 words! Insert a single image.' ),
+	description: __( 'They’re worth 1,000 words! Insert a single image.' ),
 
 	icon: 'format-image',
 

core-blocks/more/index.js

@@ -20,7 +20,7 @@ export const name = 'core/more';
 export const settings = {
 	title: __( 'More' ),
 
-	description: __( 'Want to show only part of this post on your blog\'s home page? Insert a "More" block where you want the split.' ),
+	description: __( 'Want to show only part of this post on your blog’s home page? Insert a "More" block where you want the split.' ),
 
 	icon: 'editor-insertmore',
 

core-blocks/subhead/index.js

@@ -21,7 +21,7 @@ export const name = 'core/subhead';
 export const settings = {
 	title: __( 'Subheading' ),
 
-	description: __( 'What\'s a subhead? Smaller than a headline, bigger than basic text.' ),
+	description: __( 'What’s a subhead? Smaller than a headline, bigger than basic text.' ),
 
 	icon: 'text',
 

core-blocks/test/full-content.js

@@ -146,7 +146,7 @@ describe( 'full post content fixture', () => {
 				).toEqual( parserOutputExpected );
 			} catch ( err ) {
 				throw new Error( format(
-					'File \'%s.parsed.json\' does not match expected value:\n\n%s',
+					"File '%s.parsed.json' does not match expected value:\n\n%s",
 					f,
 					err.message
 				) );
@@ -188,7 +188,7 @@ describe( 'full post content fixture', () => {
 				).toEqual( blocksExpected );
 			} catch ( err ) {
 				throw new Error( format(
-					'File \'%s.json\' does not match expected value:\n\n%s',
+					"File '%s.json' does not match expected value:\n\n%s",
 					f,
 					err.message
 				) );
@@ -214,7 +214,7 @@ describe( 'full post content fixture', () => {
 				expect( serializedActual ).toEqual( serializedExpected );
 			} catch ( err ) {
 				throw new Error( format(
-					'File \'%s.serialized.html\' does not match expected value:\n\n%s',
+					"File '%s.serialized.html' does not match expected value:\n\n%s",
 					f,
 					err.message
 				) );
@@ -253,7 +253,7 @@ describe( 'full post content fixture', () => {
 
 			if ( ! foundFixtures.length ) {
 				errors.push( format(
-					'Expected a fixture file called \'%s.html\' or \'%s__*.html\'.',
+					"Expected a fixture file called '%s.html' or '%s__*.html'.",
 					nameToFilename,
 					nameToFilename
 				) );
@@ -262,7 +262,7 @@ describe( 'full post content fixture', () => {
 			foundFixtures.forEach( ( fixture ) => {
 				if ( name !== fixture.firstBlock ) {
 					errors.push( format(
-						'Expected fixture file \'%s\' to test the \'%s\' block.',
+						"Expected fixture file '%s' to test the '%s' block.",
 						fixture.filename,
 						name
 					) );

docs/reference/coding-guidelines.md

@@ -168,6 +168,41 @@ An exception to camel case is made for constant values which are never intended
 
 In almost all cases, a constant should be defined in the top-most scope of a file. It is important to note that [JavaScript's `const` assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) is conceptually more limited than what is implied here, where a value assigned by `const` in JavaScript can in-fact be mutated, and is only protected against reassignment. A constant as defined in these coding guidelines applies only to values which are expected to never change, and is a strategy for developers to communicate intent moreso than it is a technical restriction.
 
+### Strings
+
+String literals should be declared with single-quotes *unless* the string itself contains a single-quote that would need to be escaped–in that case: use a double-quote. If the string contains a single-quote *and* a double-quote, you can use ES6 template strings to avoid escaping the quotes.
+
+**Note:** The single-quote character (`'`) should never be used in place of an apostrophe (`’`) for words like `it’s` or `haven’t` in user-facing strings. For test code it's still encouraged to use a real apostrophe.
+
+In general, avoid backslash-escaping quotes:
+
+```js
+// Bad:
+const name = "Matt";
+// Good:
+const name = 'Matt';
+
+// Bad:
+const pet = 'Matt\'s dog';
+// Also bad (not using an apostrophe): 
+const pet = "Matt's dog";
+// Good:
+const pet = 'Matt’s dog';
+// Also good:
+const oddString = "She said 'This is odd.'";
+```
+
+You should use ES6 Template Strings over string concatenation whenever possible:
+
+```js
+const name = 'Stacey';
+
+// Bad:
+alert( 'My name is ' + name + '.' );
+// Good:
+alert( `My name is ${ name }.` );
+```
+
 ## PHP
 
 We use

docs/tool/config.js

@@ -32,12 +32,12 @@ module.exports = {
 			actions: [ path.resolve( root, 'packages/blocks/src/store/actions.js' ) ],
 		},
 		'core/editor': {
-			title: 'The Editor\'s Data',
+			title: 'The Editor’s Data',
 			selectors: [ path.resolve( root, 'editor/store/selectors.js' ) ],
 			actions: [ path.resolve( root, 'editor/store/actions.js' ) ],
 		},
 		'core/edit-post': {
-			title: 'The Editor\'s UI Data',
+			title: 'The Editor’s UI Data',
 			selectors: [ path.resolve( root, 'edit-post/store/selectors.js' ) ],
 			actions: [ path.resolve( root, 'edit-post/store/actions.js' ) ],
 		},

editor/components/autocompleters/test/block.js

@@ -82,7 +82,7 @@ describe( 'block', () => {
 		expect( labelComponents.at( 1 ).text() ).toBe( 'expected-text' );
 	} );
 
-	it( 'should derive isOptionDisabled from the item\'s isDisabled', () => {
+	it( "should derive isOptionDisabled from the item's isDisabled", () => {
 		const disabledInserterItem = {
 			name: 'core/foo',
 			title: 'foo',

editor/components/block-settings-menu/test/block-mode-toggle.js

@@ -9,7 +9,7 @@ import { shallow } from 'enzyme';
 import { BlockModeToggle } from '../block-mode-toggle';
 
 describe( 'BlockModeToggle', () => {
-	it( 'should not render the HTML mode button if the block doesn\'t support it', () => {
+	it( "should not render the HTML mode button if the block doesn't support it", () => {
 		const wrapper = shallow(
 			<BlockModeToggle blockType={ { supports: { html: false } } } />
 		);

editor/components/post-author/test/check.js

@@ -49,7 +49,7 @@ describe( 'PostAuthorCheck', () => {
 		expect( wrapper.type() ).toBe( null );
 	} );
 
-	it( 'should not render anything if doesn\'t have author action', () => {
+	it( "should not render anything if doesn't have author action", () => {
 		const wrapper = shallow(
 			<PostAuthorCheck authors={ users } hasAssignAuthorAction={ false }>
 				authors
@@ -58,7 +58,7 @@ describe( 'PostAuthorCheck', () => {
 		expect( wrapper.type() ).toBe( null );
 	} );
 
-	it( 'should render  control', () => {
+	it( 'should render control', () => {
 		const wrapper = shallow(
 			<PostAuthorCheck authors={ users } hasAssignAuthorAction={ true }>
 				authors

editor/components/post-pending-status/test/check.js

@@ -9,7 +9,7 @@ import { shallow } from 'enzyme';
 import { PostPendingStatusCheck } from '../check';
 
 describe( 'PostPendingStatusCheck', () => {
-	it( 'should not render anything if the user doesn\'t have the right capabilities', () => {
+	it( "should not render anything if the user doesn't have the right capabilities", () => {
 		const wrapper = shallow(
 			<PostPendingStatusCheck hasPublishAction={ false }>
 				status

editor/components/post-publish-panel/postpublish.js

@@ -56,7 +56,7 @@ class PostPublishPanelPostpublish extends Component {
 			__( 'is now live.' );
 		const postPublishBodyText = isScheduled ?
 			__( 'The post address will be:' ) :
-			__( 'What\'s next?' );
+			__( 'What’s next?' );
 
 		return (
 			<div className="post-publish-panel__postpublish">

editor/components/post-publish-panel/prepublish.js

@@ -26,7 +26,7 @@ function PostPublishPanelPrepublish( {
 	return (
 		<div className="editor-post-publish-panel__prepublish">
 			<div><strong>{ hasPublishAction ? __( 'Are you ready to publish?' ) : __( 'Are you ready to submit for review?' ) }</strong></div>
-			<p>{ hasPublishAction ? __( 'Here, you can do a last-minute check up of your settings below, before you publish.' ) : __( 'When you\'re ready, submit your work for review, and an Editor will be able to approve it for you.' ) }</p>
+			<p>{ hasPublishAction ? __( 'Here, you can do a last-minute check up of your settings below, before you publish.' ) : __( 'When you’re ready, submit your work for review, and an Editor will be able to approve it for you.' ) }</p>
 			{ hasPublishAction && (
 				<Fragment>
 					<PanelBody initialOpen={ false } title={ [

editor/components/post-schedule/test/check.js

@@ -9,7 +9,7 @@ import { shallow } from 'enzyme';
 import { PostScheduleCheck } from '../check';
 
 describe( 'PostScheduleCheck', () => {
-	it( 'should not render anything if the user doesn\'t have the right capabilities', () => {
+	it( "should not render anything if the user doesn't have the right capabilities", () => {
 		const wrapper = shallow( <PostScheduleCheck hasPublishAction={ false } >yes</PostScheduleCheck> );
 		expect( wrapper.type() ).toBe( null );
 	} );

editor/components/post-sticky/test/index.js

@@ -18,7 +18,7 @@ describe( 'PostSticky', () => {
 		expect( wrapper.type() ).toBe( null );
 	} );
 
-	it( 'should not render anything if post doesn\'t support stickying', () => {
+	it( "should not render anything if post doesn't support stickying", () => {
 		const wrapper = shallow(
 			<PostStickyCheck postType="post" hasStickyAction={ false }>
 				Can Toggle Sticky

editor/components/post-visibility/test/check.js

@@ -11,7 +11,7 @@ import { PostVisibilityCheck } from '../check';
 describe( 'PostVisibilityCheck', () => {
 	const render = ( { canEdit } ) => ( canEdit ? 'yes' : 'no' );
 
-	it( 'should not render the edit link if the user doesn\'t have the right capability', () => {
+	it( "should not render the edit link if the user doesn't have the right capability", () => {
 		const wrapper = shallow( <PostVisibilityCheck hasPublishAction={ false } render={ render } /> );
 		expect( wrapper.text() ).toBe( 'no' );
 	} );

editor/components/template-validation-notice/index.js

@@ -25,7 +25,7 @@ function TemplateValidationNotice( { isValid, ...props } ) {
 
 	return (
 		<Notice className="editor-template-validation-notice" isDismissible={ false } status="warning">
-			<p>{ __( 'The content of your post doesn\'t match the template assigned to your post type.' ) }</p>
+			<p>{ __( 'The content of your post doesn’t match the template assigned to your post type.' ) }</p>
 			<div>
 				<Button isDefault onClick={ props.resetTemplateValidity }>{ __( 'Keep it as is' ) }</Button>
 				<Button onClick={ confirmSynchronization } isPrimary>{ __( 'Reset the template' ) }</Button>

editor/components/theme-support-check/test/index.js

@@ -9,7 +9,7 @@ import { shallow } from 'enzyme';
 import { ThemeSupportCheck } from '../index';
 
 describe( 'ThemeSupportCheck', () => {
-	it( 'should not render if there\'s no support check provided', () => {
+	it( "should not render if there's no support check provided", () => {
 		const wrapper = shallow( <ThemeSupportCheck>foobar</ThemeSupportCheck> );
 		expect( wrapper.type() ).toBe( null );
 	} );
@@ -37,7 +37,7 @@ describe( 'ThemeSupportCheck', () => {
 		expect( wrapper.type() ).not.toBe( null );
 	} );
 
-	it( 'should not render if post-thumbnails aren\'t supported for the post type', () => {
+	it( "should not render if post-thumbnails aren't supported for the post type", () => {
 		const themeSupports = {
 			'post-thumbnails': [ 'post' ],
 		};
@@ -61,7 +61,7 @@ describe( 'ThemeSupportCheck', () => {
 		expect( wrapper.type() ).toBe( null );
 	} );
 
-	it( 'should not render if theme doesn\'t support post-thumbnails', () => {
+	it( "should not render if theme doesn't support post-thumbnails", () => {
 		const themeSupports = {
 			'post-thumbnails': false,
 		};

editor/store/test/reducer.js

@@ -1968,7 +1968,7 @@ describe( 'state', () => {
 			} );
 		} );
 
-		it( 'should update the shared block\'s id if it was temporary', () => {
+		it( "should update the shared block's id if it was temporary", () => {
 			const initialState = {
 				data: {
 					shared1: { clientId: '', title: '' },

editor/store/test/selectors.js

@@ -395,7 +395,7 @@ describe( 'selectors', () => {
 	} );
 
 	describe( 'getEditedPostAttribute', () => {
-		it( 'should return the current post\'s slug if no edits have been made', () => {
+		it( 'should return the current post’s slug if no edits have been made', () => {
 			const state = {
 				currentPost: { slug: 'post slug' },
 				editor: {
@@ -3870,7 +3870,7 @@ describe( 'selectors', () => {
 			} );
 		} );
 
-		it( 'should return undefined if settings for the block don\'t exist', () => {
+		it( 'should return undefined if settings for the block don’t exist', () => {
 			const state = {
 				blockListSettings: {},
 			};

eslint/config.js

@@ -99,6 +99,7 @@ module.exports = {
 		'no-whitespace-before-property': 'error',
 		'object-curly-spacing': [ 'error', 'always' ],
 		'padded-blocks': [ 'error', 'never' ],
+		quotes: [ 'error', 'single', { allowTemplateLiterals: true, avoidEscape: true } ],
 		'quote-props': [ 'error', 'as-needed' ],
 		'react/display-name': 'off',
 		'react/jsx-curly-spacing': [ 'error', {

lib/class-wp-rest-blocks-controller.php

@@ -108,12 +108,12 @@ public function get_item_schema() {
 					'readonly'    => true,
 				),
 				'title'   => array(
-					'description' => __( 'The block\'s title.', 'gutenberg' ),
+					'description' => __( 'The block’s title.', 'gutenberg' ),
 					'type'        => 'string',
 					'required'    => true,
 				),
 				'content' => array(
-					'description' => __( 'The block\'s HTML content.', 'gutenberg' ),
+					'description' => __( 'The block’s HTML content.', 'gutenberg' ),
 					'type'        => 'string',
 					'required'    => true,
 				),

packages/api-fetch/src/middlewares/test/http-v1.js

@@ -15,7 +15,7 @@ describe( 'HTTP v1 Middleware', () => {
 		httpV1Middleware( { method: 'PUT', data: {} }, callback );
 	} );
 
-	it( 'shouldn\'t touch the options for GET requests', () => {
+	it( "shouldn't touch the options for GET requests", () => {
 		expect.hasAssertions();
 
 		const requestOptions = { method: 'GET', path: '/wp/v2/posts' };

packages/autop/src/test/index.test.js

@@ -76,7 +76,7 @@ done = 0;
 	str = `Look at this code\n\n<pre>${ code }</pre>\n\nIsn't that cool?`;
 
 	// Expected text after autop
-	let expected = '<p>Look at this code</p>\n<pre>' + code + '</pre>\n<p>Isn\'t that cool?</p>';
+	let expected = `<p>Look at this code</p>\n<pre>${ code }</pre>\n<p>Isn't that cool?</p>`;
 	expect( autop( str ).trim() ).toBe( expected );
 
 	// Make sure HTML breaks are maintained if manually inserted