Add Reusable block save button, snackbar on save and Welcome Guide

packages/block-editor/src/components/block-parent-selector/index.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { getBlockType, store as blocksStore } from '@wordpress/blocks';
-import { ToolbarButton } from '@wordpress/components';
+import { ToolbarButton, Slot } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
 import { useRef } from '@wordpress/element';
@@ -78,6 +78,7 @@ export default function BlockParentSelector() {
  ref={ nodeRef }
  { ...showMoversGestures }
  >
+ <Slot name="parent-block-selector-unsaved-changes-indicator" />
  <ToolbarButton
  className="block-editor-block-parent-selector__button"
  onClick={ () => selectBlock( firstParentClientId ) }

packages/block-editor/src/components/block-parent-selector/style.scss

@@ -9,3 +9,31 @@
  border-radius: $radius-block-ui;
  }
 }
+
+// styles for parent block selector when parent block has changes
+.block-editor-block-parent-selector.parent-block-has-changes {
+ left: calc(-#{$grid-unit-60} - #{$grid-unit-30} - #{$border-width});
+
+ // increase the width of parent selector to make room for the dot
+ .block-editor-block-parent-selector__button {
+ width: $grid-unit-60 + $grid-unit-20;
+ }
+
+ // move the parent selector icon to right side to make room for the dot
+ .block-editor-block-icon {
+ margin-right: -15px;
+ }
+
+ // add the dot before the parent selector icon
+ .parent-block-selector-unsaved-changes-indicator {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ background: var(--wp-admin-theme-color);
+ border-radius: 4px;
+ height: 8px;
+ width: 8px;
+ margin: 0 12px;
+ }
+}
+

packages/block-editor/src/components/block-switcher/index.js

@@ -12,6 +12,7 @@ import {
  ToolbarButton,
  ToolbarGroup,
  ToolbarItem,
+ Slot,
 } from '@wordpress/components';
 import {
  switchToBlockType,
@@ -147,6 +148,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
  } }
  icon={
  <>
+ <Slot name="block-unsaved-changes-indicator" />
  <BlockIcon
  icon={ icon }
  className="block-editor-block-switcher__toggle"

packages/block-editor/src/components/block-switcher/style.scss

@@ -1,5 +1,15 @@
 .block-editor-block-switcher {
  position: relative;
+
+ // Show dot before the block switcher in block toolbar if block has edits
+ .block-unsaved-changes-indicator {
+ position: relative;
+ background: var(--wp-admin-theme-color);
+ border-radius: 4px;
+ height: 8px;
+ width: 8px;
+ margin-right: 8px;
+ }
 }
 
 // Show an indicator triangle.

packages/block-editor/src/components/block-toolbar/style.scss

@@ -54,6 +54,15 @@
  }
 }
 
+// move contextual toolbar to right when parent block has changes
+.block-editor-block-contextual-toolbar.parent-block-has-changes:not(.is-fixed) {
+ margin-left: calc(#{$grid-unit-60} + #{$grid-unit-30});
+
+ .show-icon-labels & {
+ margin-left: 0;
+ }
+}
+
 .block-editor-block-parent-selector {
  position: absolute;
  top: -$border-width;

packages/block-editor/src/components/block-unsaved-changes-indicator/parent-block-selector-unsaved-changes-indicator.js

@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import { Fill } from '@wordpress/components';
+import { useEffect } from '@wordpress/element';
+
+function UnsavedChangesIndicator() {
+ useEffect( () => {
+ // add class to the parent selector to increase it's width
+ const parentSelectorBtn = document.querySelector(
+ '.block-editor-block-parent-selector'
+ );
+ parentSelectorBtn.classList.add( 'parent-block-has-changes' );
+ // add class to the contextual toolbar to move it to the right side
+ const contextualToolBar = document.querySelector(
+ '.block-editor-block-contextual-toolbar'
+ );
+ contextualToolBar.classList.add( 'parent-block-has-changes' );
+
+ return () => {
+ // remove classes from the parent selector and contextual toolbar when component unmounts
+ parentSelectorBtn.classList.remove( 'parent-block-has-changes' );
+ contextualToolBar.classList.remove( 'parent-block-has-changes' );
+ };
+ }, [] );
+
+ return (
+ <div className="parent-block-selector-unsaved-changes-indicator"></div>
+ );
+}
+
+function ParentBlockSelectorUnsavedChangesIndicator() {
+ return (
+ <>
+ <Fill name="parent-block-selector-unsaved-changes-indicator">
+ <UnsavedChangesIndicator />
+ </Fill>
+ </>
+ );
+}
+
+export default ParentBlockSelectorUnsavedChangesIndicator;

packages/block-editor/src/components/block-unsaved-changes-indicator/selected-block-unsaved-changes-indicator.js

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { Fill } from '@wordpress/components';
+
+function UnsavedChangesIndicator() {
+ return <div className="block-unsaved-changes-indicator"></div>;
+}
+
+function SelectedBlockUnsavedChangesIndicator() {
+ return (
+ <>
+ <Fill name="block-unsaved-changes-indicator">
+ <UnsavedChangesIndicator />
+ </Fill>
+ </>
+ );
+}
+
+export default SelectedBlockUnsavedChangesIndicator;

packages/block-editor/src/components/index.js

@@ -110,6 +110,8 @@ export { default as BlockSettingsMenuControls } from './block-settings-menu-cont
 export { default as BlockTitle } from './block-title';
 export { default as BlockToolbar } from './block-toolbar';
 export { default as BlockTools } from './block-tools';
+export { default as __experimentalParentBlockSelectorUnsavedChangesIndicator } from './block-unsaved-changes-indicator/parent-block-selector-unsaved-changes-indicator';
+export { default as __experimentalSelectedBlockUnsavedChangesIndicator } from './block-unsaved-changes-indicator/selected-block-unsaved-changes-indicator';
 export {
  default as CopyHandler,
  useClipboardHandler as __unstableUseClipboardHandler,

packages/block-library/src/block/edit.js

@@ -15,25 +15,35 @@ import {
  TextControl,
  PanelBody,
 } from '@wordpress/components';
+import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import {
  __experimentalUseInnerBlocksProps as useInnerBlocksProps,
  __experimentalUseNoRecursiveRenders as useNoRecursiveRenders,
  __experimentalBlockContentOverlay as BlockContentOverlay,
+ __experimentalParentBlockSelectorUnsavedChangesIndicator as ParentBlockSelectorUnsavedChangesIndicator,
+ __experimentalSelectedBlockUnsavedChangesIndicator as SelectedBlockUnsavedChangesIndicator,
  InnerBlocks,
  BlockControls,
  InspectorControls,
  useBlockProps,
  Warning,
+ store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
 import { ungroup } from '@wordpress/icons';
+import { store as noticesStore } from '@wordpress/notices';
+
+/**
+ * Internal dependencies
+ */
+import ReusableBlockWelcomeGuide from './reusable-block-welcome-guide';
 
 export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
  const [ hasAlreadyRendered, RecursionProvider ] = useNoRecursiveRenders(
  ref
  );
- const { isMissing, hasResolved } = useSelect(
+ const { isMissing, hasResolved, hasEdits } = useSelect(
  ( select ) => {
  const persistedBlock = select( coreStore ).getEntityRecord(
  'postType',
@@ -47,14 +57,37 @@ export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
  'wp_block',
  ref,
  ] );
+ const blockHasEdits = select( coreStore ).hasEditsForEntityRecord(
+ 'postType',
+ 'wp_block',
+ ref
+ );
  return {
  hasResolved: hasResolvedBlock,
  isMissing: hasResolvedBlock && ! persistedBlock,
+ hasEdits: blockHasEdits,
  };
  },
  [ ref, clientId ]
  );
 
+ const { isChildSelected, isSelected } = useSelect( ( select ) => {
+ const { getBlockParents, getSelectedBlockClientId } = select(
+ blockEditorStore
+ );
+ const selectedBlockClientId = getSelectedBlockClientId();
+ const _isSelected = selectedBlockClientId === clientId;
+
+ const parents = getBlockParents( selectedBlockClientId );
+ const firstParentClientId = parents[ parents.length - 1 ];
+ const _isChildSelected = firstParentClientId === clientId;
+
+ return {
+ isChildSelected: _isChildSelected,
+ isSelected: _isSelected,
+ };
+ }, [] );
+
  const {
  __experimentalConvertBlockToStatic: convertBlockToStatic,
  } = useDispatch( reusableBlocksStore );
@@ -85,6 +118,31 @@ export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
  }
  );
 
+ // local states for gudie modal
+ const [ isGuideOpen, setIsGuideOpen ] = useState( false );
+
+ const { saveEditedEntityRecord } = useDispatch( coreStore );
+ const { createNotice } = useDispatch( noticesStore );
+
+ // save the unsaved records
+ const saveEditedRecords = () => {
+ saveEditedEntityRecord( 'postType', 'wp_block', ref );
+ showSnackbar();
+ };
+
+ const showSnackbar = () => {
+ createNotice( 'success', __( 'Reusable block saved.' ), {
+ type: 'snackbar',
+ isDismissible: true,
+ actions: [
+ {
+ label: __( 'Learn more' ),
+ onClick: () => setIsGuideOpen( true ),
+ },
+ ],
+ } );
+ };
+
  if ( hasAlreadyRendered ) {
  return (
  <div { ...blockProps }>
@@ -118,6 +176,14 @@ export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
  return (
  <RecursionProvider>
  <div { ...blockProps }>
+ { isSelected && hasEdits && (
+ <SelectedBlockUnsavedChangesIndicator />
+ ) }
+
+ { isChildSelected && hasEdits && (
+ <ParentBlockSelectorUnsavedChangesIndicator />
+ ) }
+
  <BlockControls>
  <ToolbarGroup>
  <ToolbarButton
@@ -127,6 +193,19 @@ export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
  showTooltip
  />
  </ToolbarGroup>
+ { hasEdits && (
+ <ToolbarGroup>
+ <ToolbarButton
+ isPrimary
+ className="block-library-block__reusable-block-save-button"
+ onClick={ saveEditedRecords }
+ label={ __( 'Save globally' ) }
+ showTooltip
+ >
+ { __( 'Save' ) }
+ </ToolbarButton>
+ </ToolbarGroup>
+ ) }
  </BlockControls>
  <InspectorControls>
  <PanelBody>
@@ -142,6 +221,12 @@ export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
  wrapperProps={ innerBlocksProps }
  className="block-library-block__reusable-block-container"
  />
+ { isGuideOpen && (
+ <ReusableBlockWelcomeGuide
+ isGuideOpen={ isGuideOpen }
+ setIsGuideOpen={ setIsGuideOpen }
+ />
+ ) }
  </div>
  </RecursionProvider>
  );

packages/block-library/src/block/editor.scss

@@ -14,3 +14,47 @@
  display: none;
  }
 }
+
+// Styles for save button
+.components-toolbar-group {
+ .block-library-block__reusable-block-save-button {
+ margin: 8px;
+ height: $grid-unit-40;
+
+ // override the default box inset properties to match height and width of the save button
+ &::before {
+ left: 0 !important;
+ right: 0 !important;
+ height: $grid-unit-40 !important;
+ }
+ }
+}
+
+
+// Styles for Reusable Block Welcome Guide
+.edit-reusable-block-welcome-guide {
+ $image-height: 240px;
+ $image-width: 312px;
+ width: 312px;
+
+ &__heading {
+ font-family: $default-font;
+ font-size: 24px;
+ line-height: 1.4;
+ margin: $grid-unit-20 0 $grid-unit-20 0;
+ padding: 0 $grid-unit-40;
+ }
+
+ &__text {
+ font-size: $default-font-size;
+ line-height: 1.4;
+ margin: 0 0 $grid-unit-30 0;
+ padding: 0 $grid-unit-40;
+ }
+
+ &__image {
+ background: #00a0d2;
+ height: 240px;
+ margin: 0 0 $grid-unit-20;
+ }
+}