-
-
-
+
{ blockType.title }
{ blockType.description }
@@ -60,8 +56,11 @@ const BlockInspector = ( { selectedBlock, count } ) => {
export default withSelect(
( select ) => {
const { getSelectedBlock, getSelectedBlockCount } = select( 'core/editor' );
+ const selectedBlock = getSelectedBlock();
+ const blockType = selectedBlock && getBlockType( selectedBlock.name );
return {
- selectedBlock: getSelectedBlock(),
+ selectedBlock,
+ blockType,
count: getSelectedBlockCount(),
};
}
diff --git a/editor/components/block-list/block-html.js b/editor/components/block-list/block-html.js
index 177449a5aa978..8a33cfa9f8f66 100644
--- a/editor/components/block-list/block-html.js
+++ b/editor/components/block-list/block-html.js
@@ -22,10 +22,10 @@ class BlockHTML extends Component {
};
}
- componentWillReceiveProps( nextProps ) {
- if ( ! isEqual( nextProps.block.attributes, this.props.block.attributes ) ) {
+ componentDidUpdate( prevProps ) {
+ if ( ! isEqual( this.props.block.attributes, prevProps.block.attributes ) ) {
this.setState( {
- html: getBlockContent( nextProps.block ),
+ html: getBlockContent( this.props.block ),
} );
}
}
diff --git a/editor/components/block-list/block.js b/editor/components/block-list/block.js
index 88059e8212490..fb03d7b7d0c4a 100644
--- a/editor/components/block-list/block.js
+++ b/editor/components/block-list/block.js
@@ -2,7 +2,7 @@
* External dependencies
*/
import classnames from 'classnames';
-import { get, reduce, size, castArray, first, last, noop } from 'lodash';
+import { get, reduce, size, castArray, first, last } from 'lodash';
import tinymce from 'tinymce';
/**
@@ -50,7 +50,6 @@ import IgnoreNestedEvents from './ignore-nested-events';
import InserterWithShortcuts from '../inserter-with-shortcuts';
import Inserter from '../inserter';
import withHoverAreas from './with-hover-areas';
-import { createInnerBlockList } from '../../utils/block-list';
const { BACKSPACE, DELETE, ENTER } = keycodes;
@@ -75,7 +74,6 @@ export class BlockListBlock extends Component {
this.onDragStart = this.onDragStart.bind( this );
this.onDragEnd = this.onDragEnd.bind( this );
this.selectOnOpen = this.selectOnOpen.bind( this );
- this.createInnerBlockList = this.createInnerBlockList.bind( this );
this.hadTouchStart = false;
this.state = {
@@ -85,38 +83,17 @@ export class BlockListBlock extends Component {
};
}
- createInnerBlockList( uid ) {
- return createInnerBlockList( uid );
- }
-
- /**
- * Provides context for descendent components for use in block rendering.
- *
- * @return {Object} Child context.
- */
- getChildContext() {
- // Blocks may render their own BlockEdit, in which case we must provide
- // a mechanism for them to create their own InnerBlockList. BlockEdit
- // is defined in `@wordpress/blocks`, so to avoid a circular dependency
- // we inject this function via context.
- return {
- createInnerBlockList: this.createInnerBlockList,
- };
- }
-
componentDidMount() {
if ( this.props.isSelected ) {
this.focusTabbable();
}
}
- componentWillReceiveProps( newProps ) {
- if ( newProps.isTypingWithinBlock || newProps.isSelected ) {
+ componentDidUpdate( prevProps ) {
+ if ( this.props.isTypingWithinBlock || this.props.isSelected ) {
this.hideHoverEffects();
}
- }
- componentDidUpdate( prevProps ) {
if ( this.props.isSelected && ! prevProps.isSelected ) {
this.focusTabbable();
}
@@ -511,6 +488,7 @@ export class BlockListBlock extends Component {
rootUID={ rootUID }
layout={ layout }
canShowInserter={ canShowInBetweenInserter }
+ onInsert={ this.hideHoverEffects }
/>
) }
{
};
} );
-BlockListBlock.childContextTypes = {
- createInnerBlockList: noop,
-};
-
export default compose(
applyWithSelect,
applyWithDispatch,
diff --git a/editor/components/block-list/insertion-point.js b/editor/components/block-list/insertion-point.js
index f205d6812dd68..960f3f8793f0b 100644
--- a/editor/components/block-list/insertion-point.js
+++ b/editor/components/block-list/insertion-point.js
@@ -27,6 +27,7 @@ class BlockInsertionPoint extends Component {
onFocusInserter( event ) {
// We stop propagation of the focus event to avoid selecting the current block
// While we're trying to insert a new block
+ // We also attach this to onMouseDown, due to a difference in behavior in Firefox and Safari, where buttons don't receive focus: https://gist.github.com/cvrebert/68659d0333a578d75372
event.stopPropagation();
this.setState( {
@@ -45,6 +46,9 @@ class BlockInsertionPoint extends Component {
props.insertDefaultBlock( { layout }, rootUID, index );
props.startTyping();
this.onBlurInserter();
+ if ( props.onInsert ) {
+ this.props.onInsert();
+ }
}
render() {
@@ -62,6 +66,7 @@ class BlockInsertionPoint extends Component {
onClick={ this.onClick }
label={ __( 'Insert block' ) }
onFocus={ this.onFocusInserter }
+ onMouseDown={ this.onFocusInserter }
onBlur={ this.onBlurInserter }
/>
diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss
index 0b2c228fc836c..0bcaac46b62a4 100644
--- a/editor/components/block-list/style.scss
+++ b/editor/components/block-list/style.scss
@@ -104,11 +104,11 @@
}
.editor-block-list__layout {
- // make room in the main content column for the side UI
- // the side UI uses negative margins to position itself so as to not affect the block width
+ // Make room in the main content column for the side UI.
+ // The side UI uses negative margins to position itself so as to not affect the block width.
@include break-small() {
- padding-left: $block-side-ui-padding;
- padding-right: $block-side-ui-padding;
+ padding-left: $block-container-side-padding;
+ padding-right: $block-container-side-padding;
}
// Don't add side padding for nested blocks, and compensate for block padding
@@ -136,6 +136,9 @@
padding-left: $block-padding;
padding-right: $block-padding;
+ // Break long strings of text without spaces so they don't overflow the block.
+ overflow-wrap: break-word;
+
@include break-small() {
// The block mover needs to stay inside the block to allow clicks when hovering the block
padding-left: $block-padding + $block-side-ui-padding - $border-width;
@@ -221,14 +224,19 @@
transition: outline .1s linear;
pointer-events: none;
- // show wider padding for top level blocks
- right: -$parent-block-padding;
- left: -$parent-block-padding;
top: -$block-padding;
bottom: -$block-padding;
+ right: -$block-padding;
+ left: -$block-padding;
+
+ // Show wider padding for top level blocks.
+ @include break-small() {
+ right: -$parent-block-padding;
+ left: -$parent-block-padding;
+ }
}
- // show smaller padding for child blocks
+ // Show smaller padding for child blocks.
.editor-block-list__block-edit:before {
right: -$block-padding;
left: -$block-padding;
@@ -346,16 +354,24 @@
// Alignments
&[data-align="left"],
&[data-align="right"] {
- // Without z-index, won't be clickable as "above" adjacent content
+ // Without z-index, won't be clickable as "above" adjacent content.
z-index: z-index( '.editor-block-list__block {core/image aligned left or right}' );
width: 100%;
- // When images are floated, the block itself should collapse to zero height
+ // When images are floated, the block itself should collapse to zero height.
margin-bottom: 0;
+ height: 0;
- // Hide block outline when an image is floated
- &:before {
- content: none;
+ // Hide block outline when an image is floated.
+ .editor-block-list__block-edit {
+ &:before {
+ content: none;
+ }
+ }
+
+ // The padding collapses, but the outline is still 1px to compensate for.
+ .editor-block-contextual-toolbar {
+ margin-bottom: 1px;
}
}
@@ -432,6 +448,7 @@
> .editor-block-mover {
display: none;
}
+
@include break-wide() {
> .editor-block-mover {
display: block;
@@ -454,11 +471,11 @@
> .editor-block-list__breadcrumb {
right: -$border-width;
}
-
- // compensate for main container padding, subtract border
+
+ // Compensate for main container padding and subtract border.
@include break-small() {
- margin-left: -$block-side-ui-padding + $border-width;
- margin-right: -$block-side-ui-padding + $border-width;
+ margin-left: -$block-side-ui-width - $block-padding - $block-side-ui-clearance - $border-width;
+ margin-right: -$block-side-ui-width - $block-padding - $block-side-ui-clearance - $border-width;
}
> .editor-block-list__block-edit {
@@ -470,7 +487,7 @@
margin-right: -$block-side-ui-padding - $block-padding;
}
- // this explicitly sets the width of the block, to override the fit-content from the image block
+ // This explicitly sets the width of the block, to override the fit-content from the image block.
figure {
width: 100%;
}
@@ -579,12 +596,20 @@
display: block;
}
}
+}
+
+
+/**
+ * Mobile unified toolbar.
+ */
+
+.editor-block-list__block {
// Show side UI inline below the block on mobile.
.editor-block-list__block-mobile-toolbar {
display: flex;
flex-direction: row;
- margin-top: $item-spacing + $block-toolbar-height; // Make room for the height of the block toolbar above.
+ margin-top: $item-spacing + $block-toolbar-height; // Make room for the height of the block toolbar above.
margin-right: -$block-padding;
margin-bottom: -$block-padding - $border-width;
margin-left: -$block-padding;
@@ -640,6 +665,12 @@
float: left;
}
}
+
+ // sth
+ &[data-align="full"] .editor-block-list__block-mobile-toolbar {
+ margin-left: 0;
+ margin-right: 0;
+ }
}
@@ -682,11 +713,11 @@
height: $block-padding * 2; // Matches the whole empty space between two blocks
justify-content: center;
- // Show a clickable plus
+ // Show a clickable plus.
.editor-block-list__insertion-point-button {
margin-top: -4px;
border-radius: 50%;
- color: $dark-gray-100;
+ color: $blue-medium-focus;
background: $white;
height: $block-padding * 2 + 8px;
width: $block-padding * 2 + 8px;
@@ -694,29 +725,32 @@
&:not(:disabled):not([aria-disabled="true"]):hover {
box-shadow: none;
}
-
}
- // Show a line indicator when hovering, but this is unclickable
- &:before {
- position: absolute;
- top: calc( 50% - #{ $border-width } );
- height: 2px;
- left: 0;
- right: 0;
- background: $dark-gray-100;
- content: '';
- }
-
- // Hide both the line and button until hovered
+ // Hide both the button until hovered.
opacity: 0;
transition: opacity 0.1s linear 0.1s;
- &:hover, &.is-visible {
+ &:hover,
+ &.is-visible {
opacity: 1;
}
}
+// Don't show the sibling inserter before the selected block.
+.edit-post-layout:not( .has-fixed-toolbar ) {
+ // The child selector is necessary for this to work properly in nested contexts.
+ .is-selected > .editor-block-list__insertion-point > .editor-block-list__insertion-point-inserter {
+ opacity: 0;
+ pointer-events: none;
+
+ &.is-visible {
+ opacity: 1;
+ pointer-events: auto;
+ }
+ }
+}
+
.editor-block-list__block {
> .editor-block-list__insertion-point {
position: absolute;
@@ -771,18 +805,26 @@
left: $block-padding;
right: $block-padding;
+ @include break-small() {
+ top: -$border-width;
+ }
+
// Position the contextual toolbar above the block.
@include break-mobile() {
- position: sticky;
+ position: relative;
+ top: auto;
bottom: auto;
left: auto;
right: auto;
margin-top: -$block-toolbar-height - $border-width;
margin-bottom: $block-padding + $border-width;
- }
- @include break-small() {
- top: -$border-width;
+ // IE11 does not support `position: sticky`.
+ @supports (position: sticky) {
+ position: sticky;
+ // Avoid appearance of double border when toolbar sticks at the top of the editor.
+ top: -$border-width;
+ }
}
// Floated items have special needs for the contextual toolbar position.
@@ -853,7 +895,11 @@
z-index: z-index( '.editor-block-list__breadcrumb' );
// Position in the top right of the border
- right: -$block-parent-side-ui-clearance;
+ right: -$block-side-ui-clearance;
+
+ @include break-small() {
+ right: -$block-parent-side-ui-clearance;
+ }
top: 0;
// Nested
@@ -871,7 +917,7 @@
padding: 4px 4px;
background: theme( outlines );
color: $white;
-
+
// Animate in
.editor-block-list__block:hover & {
@include fade_in( .1s );
diff --git a/editor/components/block-preview/index.js b/editor/components/block-preview/index.js
index 104e885ce6744..a5aae1cbdc3d4 100644
--- a/editor/components/block-preview/index.js
+++ b/editor/components/block-preview/index.js
@@ -7,56 +7,37 @@ import { noop } from 'lodash';
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
-import { Component } from '@wordpress/element';
import { createBlock } from '@wordpress/blocks';
/**
* Internal dependencies
*/
import BlockEdit from '../block-edit';
-import { createInnerBlockList } from '../../utils/block-list';
import './style.scss';
/**
* Block Preview Component: It renders a preview given a block name and attributes.
*
- * @param {Object} props Component props.
- * @return {WPElement} Rendered element.
+ * @param {Object} props Component props.
+ *
+ * @return {WPElement} Rendered element.
*/
-class BlockPreview extends Component {
- getChildContext() {
- // Blocks may render their own BlockEdit, in which case we must provide
- // a mechanism for them to create their own InnerBlockList. BlockEdit
- // is defined in `@wordpress/blocks`, so to avoid a circular dependency
- // we inject this function via context.
- return {
- createInnerBlockList,
- };
- }
-
- render() {
- const { name, attributes } = this.props;
-
- const block = createBlock( name, attributes );
-
- return (
-
-
{ __( 'Preview' ) }
-
-
-
+function BlockPreview( { name, attributes } ) {
+ const block = createBlock( name, attributes );
+
+ return (
+
+
{ __( 'Preview' ) }
+
+
- );
- }
+
+ );
}
-BlockPreview.childContextTypes = {
- createInnerBlockList: noop,
-};
-
export default BlockPreview;
diff --git a/editor/components/colors/with-colors-deprecated.js b/editor/components/colors/with-colors-deprecated.js
new file mode 100644
index 0000000000000..e55dbd6e5b51c
--- /dev/null
+++ b/editor/components/colors/with-colors-deprecated.js
@@ -0,0 +1,91 @@
+/**
+ * External dependencies
+ */
+import memoize from 'memize';
+import { get } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { createHigherOrderComponent, Component, compose } from '@wordpress/element';
+import { withSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { getColorValue, getColorClass, setColorValue } from './utils';
+
+const DEFAULT_COLORS = [];
+
+/**
+ * Higher-order component, which handles color logic for class generation
+ * color value, retrieval and color attribute setting.
+ *
+ * @param {Function} mapGetSetColorToProps Function that receives getColor, setColor, and props,
+ * and returns additional props to pass to the component.
+ *
+ * @return {Function} Higher-order component.
+ */
+export default ( mapGetSetColorToProps ) => createHigherOrderComponent(
+ compose( [
+ withSelect(
+ ( select ) => {
+ const settings = select( 'core/editor' ).getEditorSettings();
+ return {
+ colors: get( settings, [ 'colors' ], DEFAULT_COLORS ),
+ };
+ } ),
+ ( WrappedComponent ) => {
+ return class extends Component {
+ constructor() {
+ super( ...arguments );
+ /**
+ * Even though we don't expect setAttributes or colors to change memoizing it is essential.
+ * If setAttributes or colors are not memoized, each time memoizedGetColor/memoizedSetColor are called:
+ * a new function reference is returned (even if arguments have not changed).
+ * This would make our memoized chain useless.
+ */
+ this.memoizedGetColor = memoize( this.memoizedGetColor, { maxSize: 1 } );
+ this.memoizedSetColor = memoize( this.memoizedSetColor, { maxSize: 1 } );
+ }
+
+ memoizedGetColor( colors ) {
+ return memoize(
+ ( colorName, customColorValue, colorContext ) => {
+ return {
+ name: colorName,
+ class: getColorClass( colorContext, colorName ),
+ value: getColorValue( colors, colorName, customColorValue ),
+ };
+ }
+ );
+ }
+
+ memoizedSetColor( setAttributes, colors ) {
+ return memoize(
+ ( colorNameAttribute, customColorAttribute ) => {
+ return setColorValue( colors, colorNameAttribute, customColorAttribute, setAttributes );
+ }
+ );
+ }
+
+ render() {
+ return (
+
+ );
+ }
+ };
+ },
+ ] ),
+ 'withColors'
+);
diff --git a/editor/components/colors/with-colors.js b/editor/components/colors/with-colors.js
index 6d51e4f02b0cc..d02c4f7978a7b 100644
--- a/editor/components/colors/with-colors.js
+++ b/editor/components/colors/with-colors.js
@@ -1,19 +1,20 @@
/**
* External dependencies
*/
-import memoize from 'memize';
-import { get } from 'lodash';
+import { find, get, isFunction, isString, kebabCase, reduce, upperFirst } from 'lodash';
/**
* WordPress dependencies
*/
import { createHigherOrderComponent, Component, compose } from '@wordpress/element';
import { withSelect } from '@wordpress/data';
+import { deprecated } from '@wordpress/utils';
/**
* Internal dependencies
*/
-import { getColorValue, getColorClass, setColorValue } from './utils';
+import { getColorValue, getColorClass } from './utils';
+import withColorsDeprecated from './with-colors-deprecated';
const DEFAULT_COLORS = [];
@@ -21,71 +22,114 @@ const DEFAULT_COLORS = [];
* Higher-order component, which handles color logic for class generation
* color value, retrieval and color attribute setting.
*
- * @param {Function} mapGetSetColorToProps Function that receives getColor, setColor, and props,
- * and returns additional props to pass to the component.
+ * @param {...(object|string)} args The arguments can be strings or objects. If the argument is an object,
+ * it should contain the color attribute name as key and the color context as value.
+ * If the argument is a string the value should be the color attribute name,
+ * the color context is computed by applying a kebab case transform to the value.
+ * Color context represents the context/place where the color is going to be used.
+ * The class name of the color is generated using 'has' followed by the color name
+ * and ending with the color context all in kebab case e.g: has-green-background-color.
+ *
*
* @return {Function} Higher-order component.
*/
-export default ( mapGetSetColorToProps ) => createHigherOrderComponent(
- compose( [
- withSelect(
- ( select ) => {
+export default ( ...args ) => {
+ if ( isFunction( args[ 0 ] ) ) {
+ deprecated( 'Using withColors( mapGetSetColorToProps ) ', {
+ version: '3.3',
+ alternative: 'withColors( colorAttributeName, { secondColorAttributeName: \'color-context\' }, ... )',
+ } );
+ return withColorsDeprecated( args[ 0 ] );
+ }
+
+ const colorMap = reduce( args, ( colorObject, arg ) => {
+ return {
+ ...colorObject,
+ ...( isString( arg ) ? { [ arg ]: kebabCase( arg ) } : arg ),
+ };
+ }, {} );
+
+ return createHigherOrderComponent(
+ compose( [
+ withSelect( ( select ) => {
const settings = select( 'core/editor' ).getEditorSettings();
return {
colors: get( settings, [ 'colors' ], DEFAULT_COLORS ),
};
} ),
- ( WrappedComponent ) => {
- return class extends Component {
- constructor() {
- super( ...arguments );
- /**
- * Even though, we don't expect setAttributes or colors to change memoizing it is essential.
- * If setAttributes or colors are not memoized, each time memoizedGetColor/memoizedSetColor are called:
- * a new function reference is returned (even if arguments have not changed).
- * This would make our memoized chain useless.
- */
- this.memoizedGetColor = memoize( this.memoizedGetColor, { maxSize: 1 } );
- this.memoizedSetColor = memoize( this.memoizedSetColor, { maxSize: 1 } );
- }
+ ( WrappedComponent ) => {
+ return class extends Component {
+ constructor( props ) {
+ super( props );
+
+ this.setters = this.createSetters();
- memoizedGetColor( colors ) {
- return memoize(
- ( colorName, customColorValue, colorContext ) => {
- return {
- name: colorName,
- class: getColorClass( colorContext, colorName ),
- value: getColorValue( colors, colorName, customColorValue ),
- };
- }
- );
- }
+ this.state = {};
+ }
- memoizedSetColor( setAttributes, colors ) {
- return memoize(
- ( colorNameAttribute, customColorAttribute ) => {
- return setColorValue( colors, colorNameAttribute, customColorAttribute, setAttributes );
- }
- );
- }
+ createSetters() {
+ return reduce( colorMap, ( settersAccumulator, colorContext, colorAttributeName ) => {
+ const upperFirstColorAttributeName = upperFirst( colorAttributeName );
+ const customColorAttributeName = `custom${ upperFirstColorAttributeName }`;
+ settersAccumulator[ `set${ upperFirstColorAttributeName }` ] =
+ this.createSetColor( colorAttributeName, customColorAttributeName );
+ return settersAccumulator;
+ }, {} );
+ }
- render() {
- return (
-
- );
- }
- };
- },
- ] ),
- 'withColors'
-);
+ createSetColor( colorAttributeName, customColorAttributeName ) {
+ return ( colorValue ) => {
+ const colorObject = find( this.props.colors, { color: colorValue } );
+ this.props.setAttributes( {
+ [ colorAttributeName ]: colorObject && colorObject.name ? colorObject.name : undefined,
+ [ customColorAttributeName ]: colorObject && colorObject.name ? undefined : colorValue,
+ } );
+ };
+ }
+
+ static getDerivedStateFromProps( { attributes, colors }, previousState ) {
+ return reduce( colorMap, ( newState, colorContext, colorAttributeName ) => {
+ const colorName = attributes[ colorAttributeName ];
+ const colorValue = getColorValue(
+ colors,
+ colorName,
+ attributes[ `custom${ upperFirst( colorAttributeName ) }` ]
+ );
+ const previousColorObject = previousState[ colorAttributeName ];
+ const previousColorValue = get( previousColorObject, [ 'value' ] );
+ /**
+ * The "and previousColorObject" condition checks that a previous color object was already computed.
+ * At the start previousColorObject and colorValue are both equal to undefined
+ * bus as previousColorObject does not exist we should compute the object.
+ */
+ if ( previousColorValue === colorValue && previousColorObject ) {
+ newState[ colorAttributeName ] = previousColorObject;
+ } else {
+ newState[ colorAttributeName ] = {
+ name: colorName,
+ class: getColorClass( colorContext, colorName ),
+ value: colorValue,
+ };
+ }
+ return newState;
+ }, {} );
+ }
+
+ render() {
+ return (
+
+ );
+ }
+ };
+ },
+ ] ),
+ 'withColors'
+ );
+};
diff --git a/editor/components/default-block-appender/index.js b/editor/components/default-block-appender/index.js
index 5a844824ba62b..292a4fc89ec29 100644
--- a/editor/components/default-block-appender/index.js
+++ b/editor/components/default-block-appender/index.js
@@ -59,7 +59,7 @@ export function DefaultBlockAppender( {
- { __( 'Welcome to the wonderful world of blocks! Click ‘Add block’ to insert different kinds of content—text, images, quotes, video, lists, and much more.' ) }
+ { __( 'Welcome to the wonderful world of blocks! Click the “+” (“Add block”) button to add a new block. There are blocks available for all kind of content: you can insert text, headings, images, lists, and lots more!' ) }
diff --git a/editor/components/default-block-appender/style.scss b/editor/components/default-block-appender/style.scss
index 68c229dfaa9cc..3a5c27b33580e 100644
--- a/editor/components/default-block-appender/style.scss
+++ b/editor/components/default-block-appender/style.scss
@@ -74,7 +74,7 @@ $empty-paragraph-height: $text-editor-font-size * 4;
right: $item-spacing; // show on the right on mobile
@include break-small {
- left: -$icon-button-size - $block-side-ui-clearance - $block-parent-side-ui-clearance;
+ left: -$block-side-ui-width - $block-padding - $block-side-ui-clearance;
right: auto;
}
@@ -85,6 +85,10 @@ $empty-paragraph-height: $text-editor-font-size * 4;
.editor-inserter__toggle {
transition: opacity 0.2s;
border-radius: 50%;
+ width: $block-side-ui-width;
+ height: $block-side-ui-width;
+ top: 4px;
+ padding: 4px;
// use opacity to work in various editor styles
&:not( :hover ) {
diff --git a/editor/components/default-block-appender/test/__snapshots__/index.js.snap b/editor/components/default-block-appender/test/__snapshots__/index.js.snap
index 9fee0c9ce14b7..61f115611b1b0 100644
--- a/editor/components/default-block-appender/test/__snapshots__/index.js.snap
+++ b/editor/components/default-block-appender/test/__snapshots__/index.js.snap
@@ -42,7 +42,7 @@ exports[`DefaultBlockAppender should append a default block when input focused 1
- Welcome to the wonderful world of blocks! Click ‘Add block’ to insert different kinds of content—text, images, quotes, video, lists, and much more.
+ Welcome to the wonderful world of blocks! Click the “+” (“Add block”) button to add a new block. There are blocks available for all kind of content: you can insert text, headings, images, lists, and lots more!
@@ -72,7 +72,7 @@ exports[`DefaultBlockAppender should match snapshot 1`] = `