@wordpress/edit-post 6.3.0 → 6.4.0

package/build-module/components/visual-editor/index.js

@@ -10,7 +10,7 @@ import classnames from 'classnames';
 
 import { VisualEditorGlobalKeyboardShortcuts, PostTitle, store as editorStore } from '@wordpress/editor';
 import { WritingFlow, BlockList, BlockTools, store as blockEditorStore, __unstableUseBlockSelectionClearer as useBlockSelectionClearer, __unstableUseTypewriter as useTypewriter, __unstableUseClipboardHandler as useClipboardHandler, __unstableUseTypingObserver as useTypingObserver, __unstableBlockSettingsMenuFirstItem, __experimentalUseResizeCanvas as useResizeCanvas, __unstableEditorStyles as EditorStyles, useSetting, __experimentalLayoutStyle as LayoutStyle, __unstableUseMouseMoveTypingReset as useMouseMoveTypingReset, __unstableIframe as Iframe, __experimentalUseNoRecursiveRenders as useNoRecursiveRenders } from '@wordpress/block-editor';
-import { useRef, useMemo } from '@wordpress/element';
+import { useEffect, useRef, useMemo } from '@wordpress/element';
 import { Button, __unstableMotion as motion } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useMergeRefs } from '@wordpress/compose';
@@ -70,11 +70,13 @@ export default function VisualEditor(_ref2) {
   } = _ref2;
   const {
     deviceType,
+    isWelcomeGuideVisible,
     isTemplateMode,
     wrapperBlockName,
     wrapperUniqueId
   } = useSelect(select => {
     const {
+      isFeatureActive,
       isEditingTemplate,
       __experimentalGetPreviewDeviceType
     } = select(editPostStore);
@@ -95,11 +97,15 @@ export default function VisualEditor(_ref2) {
 
     return {
       deviceType: __experimentalGetPreviewDeviceType(),
+      isWelcomeGuideVisible: isFeatureActive('welcomeGuide'),
       isTemplateMode: _isTemplateMode,
       wrapperBlockName: _wrapperBlockName,
       wrapperUniqueId: getCurrentPostId()
     };
   }, []);
+  const {
+    isCleanNewPost
+  } = useSelect(editorStore);
   const hasMetaBoxes = useSelect(select => select(editPostStore).hasMetaBoxes(), []);
   const {
     themeSupportsLayout,
@@ -166,6 +172,16 @@ export default function VisualEditor(_ref2) {
 
     return undefined;
   }, [isTemplateMode, themeSupportsLayout, defaultLayout]);
+  const titleRef = useRef();
+  useEffect(() => {
+    var _titleRef$current;
+
+    if (isWelcomeGuideVisible || !isCleanNewPost()) {
+      return;
+    }
+
+    titleRef === null || titleRef === void 0 ? void 0 : (_titleRef$current = titleRef.current) === null || _titleRef$current === void 0 ? void 0 : _titleRef$current.focus();
+  }, [isWelcomeGuideVisible, isCleanNewPost]);
   return createElement(BlockTools, {
     __unstableContentRef: ref,
     className: classnames('edit-post-visual-editor', {
@@ -202,7 +218,9 @@ export default function VisualEditor(_ref2) {
   }), !isTemplateMode && createElement("div", {
     className: "edit-post-visual-editor__post-title-wrapper",
     contentEditable: false
-  }, createElement(PostTitle, null)), createElement(RecursionProvider, null, createElement(BlockList, {
+  }, createElement(PostTitle, {
+    ref: titleRef
+  })), createElement(RecursionProvider, null, createElement(BlockList, {
     className: isTemplateMode ? 'wp-site-blocks' : undefined,
     __experimentalLayout: layout
   }))))), createElement(__unstableBlockSettingsMenuFirstItem, null, _ref3 => {

package/build-module/components/visual-editor/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-post/src/components/visual-editor/index.js"],"names":["classnames","VisualEditorGlobalKeyboardShortcuts","PostTitle","store","editorStore","WritingFlow","BlockList","BlockTools","blockEditorStore","__unstableUseBlockSelectionClearer","useBlockSelectionClearer","__unstableUseTypewriter","useTypewriter","__unstableUseClipboardHandler","useClipboardHandler","__unstableUseTypingObserver","useTypingObserver","__unstableBlockSettingsMenuFirstItem","__experimentalUseResizeCanvas","useResizeCanvas","__unstableEditorStyles","EditorStyles","useSetting","__experimentalLayoutStyle","LayoutStyle","__unstableUseMouseMoveTypingReset","useMouseMoveTypingReset","__unstableIframe","Iframe","__experimentalUseNoRecursiveRenders","useNoRecursiveRenders","useRef","useMemo","Button","__unstableMotion","motion","useSelect","useDispatch","useMergeRefs","arrowLeft","__","BlockInspectorButton","editPostStore","MaybeIframe","children","contentRef","shouldIframe","styles","assets","style","ref","flex","width","height","display","VisualEditor","deviceType","isTemplateMode","wrapperBlockName","wrapperUniqueId","select","isEditingTemplate","__experimentalGetPreviewDeviceType","getCurrentPostId","getCurrentPostType","_isTemplateMode","_wrapperBlockName","hasMetaBoxes","themeSupportsLayout","_settings","getSettings","supportsLayout","__unstableResolvedAssets","clearSelectedBlock","setIsEditingTemplate","desktopCanvasStyles","margin","flexFlow","background","templateModeStyles","borderRadius","border","borderBottom","resizedCanvasStyles","defaultLayout","previewMode","toLowerCase","animatedStyles","paddingBottom","blockSelectionClearerRef","RecursionProvider","layout","type","undefined","padding","onClose"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tVisualEditorGlobalKeyboardShortcuts,\n\tPostTitle,\n\tstore as editorStore,\n} from '@wordpress/editor';\nimport {\n\tWritingFlow,\n\tBlockList,\n\tBlockTools,\n\tstore as blockEditorStore,\n\t__unstableUseBlockSelectionClearer as useBlockSelectionClearer,\n\t__unstableUseTypewriter as useTypewriter,\n\t__unstableUseClipboardHandler as useClipboardHandler,\n\t__unstableUseTypingObserver as useTypingObserver,\n\t__unstableBlockSettingsMenuFirstItem,\n\t__experimentalUseResizeCanvas as useResizeCanvas,\n\t__unstableEditorStyles as EditorStyles,\n\tuseSetting,\n\t__experimentalLayoutStyle as LayoutStyle,\n\t__unstableUseMouseMoveTypingReset as useMouseMoveTypingReset,\n\t__unstableIframe as Iframe,\n\t__experimentalUseNoRecursiveRenders as useNoRecursiveRenders,\n} from '@wordpress/block-editor';\nimport { useRef, useMemo } from '@wordpress/element';\nimport { Button, __unstableMotion as motion } from '@wordpress/components';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useMergeRefs } from '@wordpress/compose';\nimport { arrowLeft } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport BlockInspectorButton from './block-inspector-button';\nimport { store as editPostStore } from '../../store';\n\nfunction MaybeIframe( {\n\tchildren,\n\tcontentRef,\n\tshouldIframe,\n\tstyles,\n\tassets,\n\tstyle,\n} ) {\n\tconst ref = useMouseMoveTypingReset();\n\n\tif ( ! shouldIframe ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<EditorStyles styles={ styles } />\n\t\t\t\t<WritingFlow\n\t\t\t\t\tref={ contentRef }\n\t\t\t\t\tclassName=\"editor-styles-wrapper\"\n\t\t\t\t\tstyle={ { flex: '1', ...style } }\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t>\n\t\t\t\t\t{ children }\n\t\t\t\t</WritingFlow>\n\t\t\t</>\n\t\t);\n\t}\n\n\treturn (\n\t\t<Iframe\n\t\t\thead={ <EditorStyles styles={ styles } /> }\n\t\t\tassets={ assets }\n\t\t\tref={ ref }\n\t\t\tcontentRef={ contentRef }\n\t\t\tstyle={ { width: '100%', height: '100%', display: 'block' } }\n\t\t\tname=\"editor-canvas\"\n\t\t>\n\t\t\t{ children }\n\t\t</Iframe>\n\t);\n}\n\nexport default function VisualEditor( { styles } ) {\n\tconst {\n\t\tdeviceType,\n\t\tisTemplateMode,\n\t\twrapperBlockName,\n\t\twrapperUniqueId,\n\t} = useSelect( ( select ) => {\n\t\tconst {\n\t\t\tisEditingTemplate,\n\t\t\t__experimentalGetPreviewDeviceType,\n\t\t} = select( editPostStore );\n\t\tconst { getCurrentPostId, getCurrentPostType } = select( editorStore );\n\t\tconst _isTemplateMode = isEditingTemplate();\n\t\tlet _wrapperBlockName;\n\n\t\tif ( getCurrentPostType() === 'wp_block' ) {\n\t\t\t_wrapperBlockName = 'core/block';\n\t\t} else if ( ! _isTemplateMode ) {\n\t\t\t_wrapperBlockName = 'core/post-content';\n\t\t}\n\n\t\treturn {\n\t\t\tdeviceType: __experimentalGetPreviewDeviceType(),\n\t\t\tisTemplateMode: _isTemplateMode,\n\t\t\twrapperBlockName: _wrapperBlockName,\n\t\t\twrapperUniqueId: getCurrentPostId(),\n\t\t};\n\t}, [] );\n\tconst hasMetaBoxes = useSelect(\n\t\t( select ) => select( editPostStore ).hasMetaBoxes(),\n\t\t[]\n\t);\n\tconst { themeSupportsLayout, assets } = useSelect( ( select ) => {\n\t\tconst _settings = select( blockEditorStore ).getSettings();\n\t\treturn {\n\t\t\tthemeSupportsLayout: _settings.supportsLayout,\n\t\t\tassets: _settings.__unstableResolvedAssets,\n\t\t};\n\t}, [] );\n\tconst { clearSelectedBlock } = useDispatch( blockEditorStore );\n\tconst { setIsEditingTemplate } = useDispatch( editPostStore );\n\tconst desktopCanvasStyles = {\n\t\theight: '100%',\n\t\twidth: '100%',\n\t\tmargin: 0,\n\t\tdisplay: 'flex',\n\t\tflexFlow: 'column',\n\t\t// Default background color so that grey\n\t\t// .edit-post-editor-regions__content color doesn't show through.\n\t\tbackground: 'white',\n\t};\n\tconst templateModeStyles = {\n\t\t...desktopCanvasStyles,\n\t\tborderRadius: '2px 2px 0 0',\n\t\tborder: '1px solid #ddd',\n\t\tborderBottom: 0,\n\t};\n\tconst resizedCanvasStyles = useResizeCanvas( deviceType, isTemplateMode );\n\tconst defaultLayout = useSetting( 'layout' );\n\tconst previewMode = 'is-' + deviceType.toLowerCase() + '-preview';\n\n\tlet animatedStyles = isTemplateMode\n\t\t? templateModeStyles\n\t\t: desktopCanvasStyles;\n\tif ( resizedCanvasStyles ) {\n\t\tanimatedStyles = resizedCanvasStyles;\n\t}\n\n\tlet paddingBottom;\n\n\t// Add a constant padding for the typewritter effect. When typing at the\n\t// bottom, there needs to be room to scroll up.\n\tif ( ! hasMetaBoxes && ! resizedCanvasStyles && ! isTemplateMode ) {\n\t\tpaddingBottom = '40vh';\n\t}\n\n\tconst ref = useRef();\n\tconst contentRef = useMergeRefs( [\n\t\tref,\n\t\tuseClipboardHandler(),\n\t\tuseTypewriter(),\n\t\tuseTypingObserver(),\n\t\tuseBlockSelectionClearer(),\n\t] );\n\n\tconst blockSelectionClearerRef = useBlockSelectionClearer();\n\n\tconst [ , RecursionProvider ] = useNoRecursiveRenders(\n\t\twrapperUniqueId,\n\t\twrapperBlockName\n\t);\n\n\tconst layout = useMemo( () => {\n\t\tif ( isTemplateMode ) {\n\t\t\treturn { type: 'default' };\n\t\t}\n\n\t\tif ( themeSupportsLayout ) {\n\t\t\treturn defaultLayout;\n\t\t}\n\n\t\treturn undefined;\n\t}, [ isTemplateMode, themeSupportsLayout, defaultLayout ] );\n\n\treturn (\n\t\t<BlockTools\n\t\t\t__unstableContentRef={ ref }\n\t\t\tclassName={ classnames( 'edit-post-visual-editor', {\n\t\t\t\t'is-template-mode': isTemplateMode,\n\t\t\t} ) }\n\t\t>\n\t\t\t<VisualEditorGlobalKeyboardShortcuts />\n\t\t\t<motion.div\n\t\t\t\tclassName=\"edit-post-visual-editor__content-area\"\n\t\t\t\tanimate={ {\n\t\t\t\t\tpadding: isTemplateMode ? '48px 48px 0' : '0',\n\t\t\t\t} }\n\t\t\t\tref={ blockSelectionClearerRef }\n\t\t\t>\n\t\t\t\t{ isTemplateMode && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tclassName=\"edit-post-visual-editor__exit-template-mode\"\n\t\t\t\t\t\ticon={ arrowLeft }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tclearSelectedBlock();\n\t\t\t\t\t\t\tsetIsEditingTemplate( false );\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Back' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t) }\n\t\t\t\t<motion.div\n\t\t\t\t\tanimate={ animatedStyles }\n\t\t\t\t\tinitial={ desktopCanvasStyles }\n\t\t\t\t\tclassName={ previewMode }\n\t\t\t\t>\n\t\t\t\t\t<MaybeIframe\n\t\t\t\t\t\tshouldIframe={\n\t\t\t\t\t\t\tisTemplateMode ||\n\t\t\t\t\t\t\tdeviceType === 'Tablet' ||\n\t\t\t\t\t\t\tdeviceType === 'Mobile'\n\t\t\t\t\t\t}\n\t\t\t\t\t\tcontentRef={ contentRef }\n\t\t\t\t\t\tstyles={ styles }\n\t\t\t\t\t\tassets={ assets }\n\t\t\t\t\t\tstyle={ { paddingBottom } }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ themeSupportsLayout && ! isTemplateMode && (\n\t\t\t\t\t\t\t<LayoutStyle\n\t\t\t\t\t\t\t\tselector=\".edit-post-visual-editor__post-title-wrapper, .block-editor-block-list__layout.is-root-container\"\n\t\t\t\t\t\t\t\tlayout={ defaultLayout }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ ! isTemplateMode && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName=\"edit-post-visual-editor__post-title-wrapper\"\n\t\t\t\t\t\t\t\tcontentEditable={ false }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<PostTitle />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<RecursionProvider>\n\t\t\t\t\t\t\t<BlockList\n\t\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\t\tisTemplateMode\n\t\t\t\t\t\t\t\t\t\t? 'wp-site-blocks'\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t__experimentalLayout={ layout }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</RecursionProvider>\n\t\t\t\t\t</MaybeIframe>\n\t\t\t\t</motion.div>\n\t\t\t</motion.div>\n\t\t\t<__unstableBlockSettingsMenuFirstItem>\n\t\t\t\t{ ( { onClose } ) => (\n\t\t\t\t\t<BlockInspectorButton onClick={ onClose } />\n\t\t\t\t) }\n\t\t\t</__unstableBlockSettingsMenuFirstItem>\n\t\t</BlockTools>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-post/src/components/visual-editor/index.js"],"names":["classnames","VisualEditorGlobalKeyboardShortcuts","PostTitle","store","editorStore","WritingFlow","BlockList","BlockTools","blockEditorStore","__unstableUseBlockSelectionClearer","useBlockSelectionClearer","__unstableUseTypewriter","useTypewriter","__unstableUseClipboardHandler","useClipboardHandler","__unstableUseTypingObserver","useTypingObserver","__unstableBlockSettingsMenuFirstItem","__experimentalUseResizeCanvas","useResizeCanvas","__unstableEditorStyles","EditorStyles","useSetting","__experimentalLayoutStyle","LayoutStyle","__unstableUseMouseMoveTypingReset","useMouseMoveTypingReset","__unstableIframe","Iframe","__experimentalUseNoRecursiveRenders","useNoRecursiveRenders","useEffect","useRef","useMemo","Button","__unstableMotion","motion","useSelect","useDispatch","useMergeRefs","arrowLeft","__","BlockInspectorButton","editPostStore","MaybeIframe","children","contentRef","shouldIframe","styles","assets","style","ref","flex","width","height","display","VisualEditor","deviceType","isWelcomeGuideVisible","isTemplateMode","wrapperBlockName","wrapperUniqueId","select","isFeatureActive","isEditingTemplate","__experimentalGetPreviewDeviceType","getCurrentPostId","getCurrentPostType","_isTemplateMode","_wrapperBlockName","isCleanNewPost","hasMetaBoxes","themeSupportsLayout","_settings","getSettings","supportsLayout","__unstableResolvedAssets","clearSelectedBlock","setIsEditingTemplate","desktopCanvasStyles","margin","flexFlow","background","templateModeStyles","borderRadius","border","borderBottom","resizedCanvasStyles","defaultLayout","previewMode","toLowerCase","animatedStyles","paddingBottom","blockSelectionClearerRef","RecursionProvider","layout","type","undefined","titleRef","current","focus","padding","onClose"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tVisualEditorGlobalKeyboardShortcuts,\n\tPostTitle,\n\tstore as editorStore,\n} from '@wordpress/editor';\nimport {\n\tWritingFlow,\n\tBlockList,\n\tBlockTools,\n\tstore as blockEditorStore,\n\t__unstableUseBlockSelectionClearer as useBlockSelectionClearer,\n\t__unstableUseTypewriter as useTypewriter,\n\t__unstableUseClipboardHandler as useClipboardHandler,\n\t__unstableUseTypingObserver as useTypingObserver,\n\t__unstableBlockSettingsMenuFirstItem,\n\t__experimentalUseResizeCanvas as useResizeCanvas,\n\t__unstableEditorStyles as EditorStyles,\n\tuseSetting,\n\t__experimentalLayoutStyle as LayoutStyle,\n\t__unstableUseMouseMoveTypingReset as useMouseMoveTypingReset,\n\t__unstableIframe as Iframe,\n\t__experimentalUseNoRecursiveRenders as useNoRecursiveRenders,\n} from '@wordpress/block-editor';\nimport { useEffect, useRef, useMemo } from '@wordpress/element';\nimport { Button, __unstableMotion as motion } from '@wordpress/components';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useMergeRefs } from '@wordpress/compose';\nimport { arrowLeft } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport BlockInspectorButton from './block-inspector-button';\nimport { store as editPostStore } from '../../store';\n\nfunction MaybeIframe( {\n\tchildren,\n\tcontentRef,\n\tshouldIframe,\n\tstyles,\n\tassets,\n\tstyle,\n} ) {\n\tconst ref = useMouseMoveTypingReset();\n\n\tif ( ! shouldIframe ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<EditorStyles styles={ styles } />\n\t\t\t\t<WritingFlow\n\t\t\t\t\tref={ contentRef }\n\t\t\t\t\tclassName=\"editor-styles-wrapper\"\n\t\t\t\t\tstyle={ { flex: '1', ...style } }\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t>\n\t\t\t\t\t{ children }\n\t\t\t\t</WritingFlow>\n\t\t\t</>\n\t\t);\n\t}\n\n\treturn (\n\t\t<Iframe\n\t\t\thead={ <EditorStyles styles={ styles } /> }\n\t\t\tassets={ assets }\n\t\t\tref={ ref }\n\t\t\tcontentRef={ contentRef }\n\t\t\tstyle={ { width: '100%', height: '100%', display: 'block' } }\n\t\t\tname=\"editor-canvas\"\n\t\t>\n\t\t\t{ children }\n\t\t</Iframe>\n\t);\n}\n\nexport default function VisualEditor( { styles } ) {\n\tconst {\n\t\tdeviceType,\n\t\tisWelcomeGuideVisible,\n\t\tisTemplateMode,\n\t\twrapperBlockName,\n\t\twrapperUniqueId,\n\t} = useSelect( ( select ) => {\n\t\tconst {\n\t\t\tisFeatureActive,\n\t\t\tisEditingTemplate,\n\t\t\t__experimentalGetPreviewDeviceType,\n\t\t} = select( editPostStore );\n\t\tconst { getCurrentPostId, getCurrentPostType } = select( editorStore );\n\t\tconst _isTemplateMode = isEditingTemplate();\n\t\tlet _wrapperBlockName;\n\n\t\tif ( getCurrentPostType() === 'wp_block' ) {\n\t\t\t_wrapperBlockName = 'core/block';\n\t\t} else if ( ! _isTemplateMode ) {\n\t\t\t_wrapperBlockName = 'core/post-content';\n\t\t}\n\n\t\treturn {\n\t\t\tdeviceType: __experimentalGetPreviewDeviceType(),\n\t\t\tisWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ),\n\t\t\tisTemplateMode: _isTemplateMode,\n\t\t\twrapperBlockName: _wrapperBlockName,\n\t\t\twrapperUniqueId: getCurrentPostId(),\n\t\t};\n\t}, [] );\n\tconst { isCleanNewPost } = useSelect( editorStore );\n\tconst hasMetaBoxes = useSelect(\n\t\t( select ) => select( editPostStore ).hasMetaBoxes(),\n\t\t[]\n\t);\n\tconst { themeSupportsLayout, assets } = useSelect( ( select ) => {\n\t\tconst _settings = select( blockEditorStore ).getSettings();\n\t\treturn {\n\t\t\tthemeSupportsLayout: _settings.supportsLayout,\n\t\t\tassets: _settings.__unstableResolvedAssets,\n\t\t};\n\t}, [] );\n\tconst { clearSelectedBlock } = useDispatch( blockEditorStore );\n\tconst { setIsEditingTemplate } = useDispatch( editPostStore );\n\tconst desktopCanvasStyles = {\n\t\theight: '100%',\n\t\twidth: '100%',\n\t\tmargin: 0,\n\t\tdisplay: 'flex',\n\t\tflexFlow: 'column',\n\t\t// Default background color so that grey\n\t\t// .edit-post-editor-regions__content color doesn't show through.\n\t\tbackground: 'white',\n\t};\n\tconst templateModeStyles = {\n\t\t...desktopCanvasStyles,\n\t\tborderRadius: '2px 2px 0 0',\n\t\tborder: '1px solid #ddd',\n\t\tborderBottom: 0,\n\t};\n\tconst resizedCanvasStyles = useResizeCanvas( deviceType, isTemplateMode );\n\tconst defaultLayout = useSetting( 'layout' );\n\tconst previewMode = 'is-' + deviceType.toLowerCase() + '-preview';\n\n\tlet animatedStyles = isTemplateMode\n\t\t? templateModeStyles\n\t\t: desktopCanvasStyles;\n\tif ( resizedCanvasStyles ) {\n\t\tanimatedStyles = resizedCanvasStyles;\n\t}\n\n\tlet paddingBottom;\n\n\t// Add a constant padding for the typewritter effect. When typing at the\n\t// bottom, there needs to be room to scroll up.\n\tif ( ! hasMetaBoxes && ! resizedCanvasStyles && ! isTemplateMode ) {\n\t\tpaddingBottom = '40vh';\n\t}\n\n\tconst ref = useRef();\n\tconst contentRef = useMergeRefs( [\n\t\tref,\n\t\tuseClipboardHandler(),\n\t\tuseTypewriter(),\n\t\tuseTypingObserver(),\n\t\tuseBlockSelectionClearer(),\n\t] );\n\n\tconst blockSelectionClearerRef = useBlockSelectionClearer();\n\n\tconst [ , RecursionProvider ] = useNoRecursiveRenders(\n\t\twrapperUniqueId,\n\t\twrapperBlockName\n\t);\n\n\tconst layout = useMemo( () => {\n\t\tif ( isTemplateMode ) {\n\t\t\treturn { type: 'default' };\n\t\t}\n\n\t\tif ( themeSupportsLayout ) {\n\t\t\treturn defaultLayout;\n\t\t}\n\n\t\treturn undefined;\n\t}, [ isTemplateMode, themeSupportsLayout, defaultLayout ] );\n\n\tconst titleRef = useRef();\n\tuseEffect( () => {\n\t\tif ( isWelcomeGuideVisible || ! isCleanNewPost() ) {\n\t\t\treturn;\n\t\t}\n\t\ttitleRef?.current?.focus();\n\t}, [ isWelcomeGuideVisible, isCleanNewPost ] );\n\n\treturn (\n\t\t<BlockTools\n\t\t\t__unstableContentRef={ ref }\n\t\t\tclassName={ classnames( 'edit-post-visual-editor', {\n\t\t\t\t'is-template-mode': isTemplateMode,\n\t\t\t} ) }\n\t\t>\n\t\t\t<VisualEditorGlobalKeyboardShortcuts />\n\t\t\t<motion.div\n\t\t\t\tclassName=\"edit-post-visual-editor__content-area\"\n\t\t\t\tanimate={ {\n\t\t\t\t\tpadding: isTemplateMode ? '48px 48px 0' : '0',\n\t\t\t\t} }\n\t\t\t\tref={ blockSelectionClearerRef }\n\t\t\t>\n\t\t\t\t{ isTemplateMode && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tclassName=\"edit-post-visual-editor__exit-template-mode\"\n\t\t\t\t\t\ticon={ arrowLeft }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tclearSelectedBlock();\n\t\t\t\t\t\t\tsetIsEditingTemplate( false );\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Back' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t) }\n\t\t\t\t<motion.div\n\t\t\t\t\tanimate={ animatedStyles }\n\t\t\t\t\tinitial={ desktopCanvasStyles }\n\t\t\t\t\tclassName={ previewMode }\n\t\t\t\t>\n\t\t\t\t\t<MaybeIframe\n\t\t\t\t\t\tshouldIframe={\n\t\t\t\t\t\t\tisTemplateMode ||\n\t\t\t\t\t\t\tdeviceType === 'Tablet' ||\n\t\t\t\t\t\t\tdeviceType === 'Mobile'\n\t\t\t\t\t\t}\n\t\t\t\t\t\tcontentRef={ contentRef }\n\t\t\t\t\t\tstyles={ styles }\n\t\t\t\t\t\tassets={ assets }\n\t\t\t\t\t\tstyle={ { paddingBottom } }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ themeSupportsLayout && ! isTemplateMode && (\n\t\t\t\t\t\t\t<LayoutStyle\n\t\t\t\t\t\t\t\tselector=\".edit-post-visual-editor__post-title-wrapper, .block-editor-block-list__layout.is-root-container\"\n\t\t\t\t\t\t\t\tlayout={ defaultLayout }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ ! isTemplateMode && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName=\"edit-post-visual-editor__post-title-wrapper\"\n\t\t\t\t\t\t\t\tcontentEditable={ false }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<PostTitle ref={ titleRef } />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<RecursionProvider>\n\t\t\t\t\t\t\t<BlockList\n\t\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\t\tisTemplateMode\n\t\t\t\t\t\t\t\t\t\t? 'wp-site-blocks'\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t__experimentalLayout={ layout }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</RecursionProvider>\n\t\t\t\t\t</MaybeIframe>\n\t\t\t\t</motion.div>\n\t\t\t</motion.div>\n\t\t\t<__unstableBlockSettingsMenuFirstItem>\n\t\t\t\t{ ( { onClose } ) => (\n\t\t\t\t\t<BlockInspectorButton onClick={ onClose } />\n\t\t\t\t) }\n\t\t\t</__unstableBlockSettingsMenuFirstItem>\n\t\t</BlockTools>\n\t);\n}\n"]}

package/build-style/style-rtl.css

@@ -1782,6 +1782,44 @@ h2.edit-post-template-summary__title {
   fill: #fff;
 }
 
+@media (min-width: 600px) {
+  .edit-post-start-page-options__modal {
+    width: calc(100% - 32px);
+    height: calc(100% - 120px);
+  }
+}
+@media (min-width: 782px) {
+  .edit-post-start-page-options__modal {
+    width: 750px;
+  }
+}
+@media (min-width: 960px) {
+  .edit-post-start-page-options__modal {
+    height: 70%;
+  }
+}
+.edit-post-start-page-options__modal .components-modal__header {
+  border-bottom: none;
+}
+.edit-post-start-page-options__modal .components-modal__content::before {
+  content: none;
+}
+
+.edit-post-start-page-options__modal-content .block-editor-block-patterns-list {
+  column-count: 2;
+  column-gap: 24px;
+}
+.edit-post-start-page-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
+  break-inside: avoid-column;
+  margin-bottom: 24px;
+}
+.edit-post-start-page-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item .block-editor-block-preview__container {
+  min-height: 100px;
+}
+.edit-post-start-page-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item .block-editor-block-preview__content {
+  width: 100%;
+}
+
 /**
  * Animations
  */

package/build-style/style.css

@@ -1786,6 +1786,44 @@ h2.edit-post-template-summary__title {
   fill: #fff;
 }
 
+@media (min-width: 600px) {
+  .edit-post-start-page-options__modal {
+    width: calc(100% - 32px);
+    height: calc(100% - 120px);
+  }
+}
+@media (min-width: 782px) {
+  .edit-post-start-page-options__modal {
+    width: 750px;
+  }
+}
+@media (min-width: 960px) {
+  .edit-post-start-page-options__modal {
+    height: 70%;
+  }
+}
+.edit-post-start-page-options__modal .components-modal__header {
+  border-bottom: none;
+}
+.edit-post-start-page-options__modal .components-modal__content::before {
+  content: none;
+}
+
+.edit-post-start-page-options__modal-content .block-editor-block-patterns-list {
+  column-count: 2;
+  column-gap: 24px;
+}
+.edit-post-start-page-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
+  break-inside: avoid-column;
+  margin-bottom: 24px;
+}
+.edit-post-start-page-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item .block-editor-block-preview__container {
+  min-height: 100px;
+}
+.edit-post-start-page-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item .block-editor-block-preview__content {
+  width: 100%;
+}
+
 /**
  * Animations
  */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-post",
-	"version": "6.3.0",
+	"version": "6.4.0",
 	"description": "Edit Post module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,31 +27,31 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.6.0",
-		"@wordpress/api-fetch": "^6.3.0",
-		"@wordpress/block-editor": "^8.5.0",
-		"@wordpress/block-library": "^7.3.0",
-		"@wordpress/blocks": "^11.5.0",
-		"@wordpress/components": "^19.8.0",
-		"@wordpress/compose": "^5.4.0",
-		"@wordpress/core-data": "^4.4.0",
-		"@wordpress/data": "^6.6.0",
-		"@wordpress/deprecated": "^3.6.0",
-		"@wordpress/editor": "^12.5.0",
-		"@wordpress/element": "^4.4.0",
-		"@wordpress/hooks": "^3.6.0",
-		"@wordpress/i18n": "^4.6.0",
-		"@wordpress/icons": "^8.2.0",
-		"@wordpress/interface": "^4.5.0",
-		"@wordpress/keyboard-shortcuts": "^3.4.0",
-		"@wordpress/keycodes": "^3.6.0",
-		"@wordpress/media-utils": "^3.4.0",
-		"@wordpress/notices": "^3.6.0",
-		"@wordpress/plugins": "^4.4.0",
-		"@wordpress/preferences": "^1.2.0",
-		"@wordpress/url": "^3.7.0",
-		"@wordpress/viewport": "^4.4.0",
-		"@wordpress/warning": "^2.6.0",
+		"@wordpress/a11y": "^3.7.0",
+		"@wordpress/api-fetch": "^6.4.0",
+		"@wordpress/block-editor": "^8.6.0",
+		"@wordpress/block-library": "^7.4.0",
+		"@wordpress/blocks": "^11.6.0",
+		"@wordpress/components": "^19.9.0",
+		"@wordpress/compose": "^5.5.0",
+		"@wordpress/core-data": "^4.5.0",
+		"@wordpress/data": "^6.7.0",
+		"@wordpress/deprecated": "^3.7.0",
+		"@wordpress/editor": "^12.6.0",
+		"@wordpress/element": "^4.5.0",
+		"@wordpress/hooks": "^3.7.0",
+		"@wordpress/i18n": "^4.7.0",
+		"@wordpress/icons": "^8.3.0",
+		"@wordpress/interface": "^4.6.0",
+		"@wordpress/keyboard-shortcuts": "^3.5.0",
+		"@wordpress/keycodes": "^3.7.0",
+		"@wordpress/media-utils": "^3.5.0",
+		"@wordpress/notices": "^3.7.0",
+		"@wordpress/plugins": "^4.5.0",
+		"@wordpress/preferences": "^1.3.0",
+		"@wordpress/url": "^3.8.0",
+		"@wordpress/viewport": "^4.5.0",
+		"@wordpress/warning": "^2.7.0",
 		"classnames": "^2.3.1",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
@@ -64,5 +64,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "11eb1241e63c9240018323551c6753f8a5fa96f9"
+	"gitHead": "1ba52312b56db563df2d8d4fba5b00613fb46d8c"
 }

package/src/components/header/header-toolbar/index.native.js

@@ -6,7 +6,7 @@ import { Platform, ScrollView, View } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { useRef } from '@wordpress/element';
+import { useCallback, useRef, useState } from '@wordpress/element';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { withViewportMatch } from '@wordpress/viewport';
@@ -40,7 +40,11 @@ function HeaderToolbar( {
 	getStylesFromColorScheme,
 	onHideKeyboard,
 	isRTL,
+	noContentSelected,
 } ) {
+	const wasNoContentSelected = useRef( noContentSelected );
+	const [ isInserterOpen, setIsInserterOpen ] = useState( false );
+
 	const scrollViewRef = useRef( null );
 	const scrollToStart = () => {
 		// scrollview doesn't seem to automatically adjust to RTL on Android so, scroll to end when Android
@@ -79,12 +83,32 @@ function HeaderToolbar( {
 		return isRTL ? buttons.reverse() : buttons;
 	};
 
+	const onToggleInserter = useCallback(
+		( isOpen ) => {
+			if ( isOpen ) {
+				wasNoContentSelected.current = noContentSelected;
+			}
+			setIsInserterOpen( isOpen );
+		},
+		[ noContentSelected ]
+	);
+
+	// Expanded mode should be preserved while the inserter is open.
+	// This way we prevent style updates during the opening transition.
+	const useExpandedMode = isInserterOpen
+		? wasNoContentSelected.current
+		: noContentSelected;
+
 	return (
 		<View
-			style={ getStylesFromColorScheme(
-				styles.container,
-				styles.containerDark
-			) }
+			style={ [
+				getStylesFromColorScheme(
+					styles[ 'header-toolbar__container' ],
+					styles[ 'header-toolbar__container--dark' ]
+				),
+				useExpandedMode &&
+					styles[ 'header-toolbar__container--expanded' ],
+			] }
 		>
 			<ScrollView
 				ref={ scrollViewRef }
@@ -93,14 +117,24 @@ function HeaderToolbar( {
 				showsHorizontalScrollIndicator={ false }
 				keyboardShouldPersistTaps="always"
 				alwaysBounceHorizontal={ false }
-				contentContainerStyle={ styles.scrollableContent }
+				contentContainerStyle={
+					styles[ 'header-toolbar__scrollable-content' ]
+				}
 			>
-				<Inserter disabled={ ! showInserter } />
+				<Inserter
+					disabled={ ! showInserter }
+					useExpandedMode={ useExpandedMode }
+					onToggle={ onToggleInserter }
+				/>
 				{ renderHistoryButtons() }
 				<BlockToolbar />
 			</ScrollView>
 			{ showKeyboardHideButton && (
-				<ToolbarGroup passedStyle={ styles.keyboardHideContainer }>
+				<ToolbarGroup
+					passedStyle={
+						styles[ 'header-toolbar__keyboard-hide-container' ]
+					}
+				>
 					<ToolbarButton
 						title={ __( 'Hide keyboard' ) }
 						icon={ keyboardClose }
@@ -121,8 +155,10 @@ export default compose( [
 			getBlockRootClientId,
 			getBlockSelectionEnd,
 			hasInserterItems,
+			hasSelectedBlock,
 		} = select( blockEditorStore );
 		const { getEditorSettings } = select( editorStore );
+		const isAnyBlockSelected = hasSelectedBlock();
 		return {
 			hasRedo: select( editorStore ).hasEditorRedo(),
 			hasUndo: select( editorStore ).hasEditorUndo(),
@@ -136,6 +172,7 @@ export default compose( [
 			isTextModeEnabled:
 				select( editPostStore ).getEditorMode() === 'text',
 			isRTL: select( blockEditorStore ).getSettings().isRTL,
+			noContentSelected: ! isAnyBlockSelected,
 		};
 	} ),
 	withDispatch( ( dispatch ) => {

package/src/components/header/header-toolbar/style.native.scss

@@ -1,5 +1,5 @@
 
-.container {
+.header-toolbar__container {
 	height: $mobile-header-toolbar-height;
 	flex-direction: row;
 	background-color: $app-background;
@@ -7,16 +7,20 @@
 	border-top-width: 1px;
 }
 
-.containerDark {
+.header-toolbar__container--dark {
 	background-color: $app-background-dark-alt;
 	border-top-color: $background-dark-elevated;
 }
 
-.scrollableContent {
+.header-toolbar__container--expanded {
+	height: $mobile-header-toolbar-expanded-height;
+}
+
+.header-toolbar__scrollable-content {
 	flex-grow: 1; // Fixes RTL issue on Android.
 }
 
-.keyboardHideContainer {
+.header-toolbar__keyboard-hide-container {
 	padding-right: 0;
 	padding-left: 0;
 	padding-top: 4px;

package/src/components/layout/index.js

@@ -47,10 +47,10 @@ import SettingsSidebar from '../sidebar/settings-sidebar';
 import MetaBoxes from '../meta-boxes';
 import WelcomeGuide from '../welcome-guide';
 import ActionsPanel from './actions-panel';
+import StartPageOptions from '../start-page-options';
 import { store as editPostStore } from '../../store';
 
 const interfaceLabels = {
-	secondarySidebar: __( 'Block library' ),
 	/* translators: accessibility text for the editor top bar landmark region. */
 	header: __( 'Editor top bar' ),
 	/* translators: accessibility text for the editor content landmark region. */
@@ -170,6 +170,10 @@ function Layout( { styles } ) {
 		[ entitiesSavedStatesCallback ]
 	);
 
+	const secondarySidebarLabel = isListViewOpened
+		? __( 'List View' )
+		: __( 'Block Library' );
+
 	const secondarySidebar = () => {
 		if ( mode === 'visual' && isInserterOpened ) {
 			return <InserterSidebar />;
@@ -204,7 +208,10 @@ function Layout( { styles } ) {
 			<SettingsSidebar />
 			<InterfaceSkeleton
 				className={ className }
-				labels={ interfaceLabels }
+				labels={ {
+					...interfaceLabels,
+					secondarySidebar: secondarySidebarLabel,
+				} }
 				header={
 					<Header
 						setEntitiesSavedStatesCallback={
@@ -286,6 +293,7 @@ function Layout( { styles } ) {
 			<EditPostPreferencesModal />
 			<KeyboardShortcutHelpModal />
 			<WelcomeGuide />
+			<StartPageOptions />
 			<Popover.Slot />
 			<PluginArea onError={ onPluginAreaError } />
 		</>

package/src/components/layout/index.native.js

@@ -115,14 +115,20 @@ class Layout extends Component {
 		// Add a margin view at the bottom for the header.
 		const marginBottom =
 			Platform.OS === 'android' && ! isHtmlView
-				? headerToolbarStyles.container.height
+				? headerToolbarStyles[ 'header-toolbar__container' ].height
 				: 0;
 
+		const containerStyles = getStylesFromColorScheme(
+			styles.container,
+			styles.containerDark
+		);
+
 		const toolbarKeyboardAvoidingViewStyle = {
 			...styles.toolbarKeyboardAvoidingView,
 			left: this.state.safeAreaInsets.left,
 			right: this.state.safeAreaInsets.right,
 			bottom: this.state.safeAreaInsets.bottom,
+			backgroundColor: containerStyles.backgroundColor,
 		};
 
 		const editorStyles = [
@@ -138,10 +144,7 @@ class Layout extends Component {
 		return (
 			<Tooltip.Slot>
 				<SafeAreaView
-					style={ getStylesFromColorScheme(
-						styles.container,
-						styles.containerDark
-					) }
+					style={ containerStyles }
 					onLayout={ this.onRootViewLayout }
 				>
 					<AutosaveMonitor disableIntervalChecks />

package/src/components/sidebar/plugin-document-setting-panel/index.js

@@ -108,7 +108,6 @@ const PluginDocumentSettingPanel = compose(
 			warning( 'PluginDocumentSettingPanel requires a name property.' );
 		}
 		return {
-			icon: ownProps.icon || context.icon,
 			panelName: `${ context.name }/${ ownProps.name }`,
 		};
 	} ),

package/src/components/start-page-options/index.js

@@ -0,0 +1,121 @@
+/**
+ * WordPress dependencies
+ */
+import { Modal } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useState, useEffect } from '@wordpress/element';
+import {
+	store as blockEditorStore,
+	__experimentalBlockPatternsList as BlockPatternsList,
+} from '@wordpress/block-editor';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useAsyncList } from '@wordpress/compose';
+import { store as editorStore } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import { store as editPostStore } from '../../store';
+
+function PatternSelection( { onChoosePattern } ) {
+	const { blockPatterns } = useSelect( ( select ) => {
+		const { __experimentalGetPatternsByBlockTypes } = select(
+			blockEditorStore
+		);
+		return {
+			blockPatterns: __experimentalGetPatternsByBlockTypes(
+				'core/post-content'
+			),
+		};
+	}, [] );
+	const shownBlockPatterns = useAsyncList( blockPatterns );
+	const { resetEditorBlocks } = useDispatch( editorStore );
+	useEffect( () => {
+		if ( blockPatterns.length <= 1 ) {
+			onChoosePattern();
+		}
+	}, [ blockPatterns.length ] );
+	return (
+		<BlockPatternsList
+			blockPatterns={ blockPatterns }
+			shownPatterns={ shownBlockPatterns }
+			onClickPattern={ ( _pattern, blocks ) => {
+				resetEditorBlocks( blocks );
+				onChoosePattern();
+			} }
+		/>
+	);
+}
+
+const START_PAGE_MODAL_STATES = {
+	INITIAL: 'INITIAL',
+	PATTERN: 'PATTERN',
+	CLOSED: 'CLOSED',
+};
+
+export default function StartPageOptions() {
+	const [ modalState, setModalState ] = useState(
+		START_PAGE_MODAL_STATES.INITIAL
+	);
+	const shouldOpenModel = useSelect(
+		( select ) => {
+			if ( modalState !== START_PAGE_MODAL_STATES.INITIAL ) {
+				return false;
+			}
+			const { __experimentalGetPatternsByBlockTypes } = select(
+				blockEditorStore
+			);
+			const {
+				getCurrentPostType,
+				getEditedPostContent,
+				isEditedPostSaveable,
+			} = select( editorStore );
+			const { isEditingTemplate, isFeatureActive } = select(
+				editPostStore
+			);
+			return (
+				getCurrentPostType() === 'page' &&
+				! isEditedPostSaveable() &&
+				'' === getEditedPostContent() &&
+				! isEditingTemplate() &&
+				! isFeatureActive( 'welcomeGuide' ) &&
+				__experimentalGetPatternsByBlockTypes( 'core/post-content' )
+					.length >= 1
+			);
+		},
+		[ modalState ]
+	);
+
+	useEffect( () => {
+		if ( shouldOpenModel ) {
+			setModalState( START_PAGE_MODAL_STATES.PATTERN );
+		}
+	}, [ shouldOpenModel ] );
+
+	if (
+		modalState === START_PAGE_MODAL_STATES.INITIAL ||
+		modalState === START_PAGE_MODAL_STATES.CLOSED
+	) {
+		return null;
+	}
+	return (
+		<Modal
+			className="edit-post-start-page-options__modal"
+			title={ __( 'Choose a pattern' ) }
+			closeLabel={ __( 'Cancel' ) }
+			onRequestClose={ () => {
+				setModalState( START_PAGE_MODAL_STATES.CLOSED );
+			} }
+		>
+			<div className="edit-post-start-page-options__modal-content">
+				{ modalState === START_PAGE_MODAL_STATES.PATTERN && (
+					<PatternSelection
+						onChoosePattern={ () => {
+							setModalState( START_PAGE_MODAL_STATES.CLOSED );
+						} }
+					/>
+				) }
+			</div>
+		</Modal>
+	);
+}