block_editor 0.1.3 → 1.0.0

data/app/javascript/block_editor/blocks/button/edit.js

@@ -207,19 +207,6 @@ function ButtonEdit( props ) {
 				onToggleOpenInNewTab={ onToggleOpenInNewTab }
 			/>
 			<InspectorControls>
-				<PanelBody title={ 'Additional styles' }>
-					<ToggleControl
-						label={ 'Hollow' }
-            onChange={ content => setAttributes({ hasHollowStyle: content }) }
-            checked={ attributes.hasHollowStyle }
-					/>
-					<ToggleControl
-						label={ 'Large' }
-            onChange={ content => setAttributes({ hasLargeStyle: content }) }
-            checked={ attributes.hasLargeStyle }
-					/>
-				</PanelBody>
-
 				<PanelBody title={ __( 'Link settings' ) }>
 					<ToggleControl
 						label={ __( 'Open in new tab' ) }

data/app/javascript/block_editor/blocks/index.js

@@ -27,103 +27,79 @@ import { addFilter } from '@wordpress/hooks';
  */
 import ColumnEdit from './column/edit';
 import ButtonEdit from './button/edit';
-import ImageEdit from './image/edit';
+import BlockEdit from './block/edit';
 import MediaUpload from '../components/media-upload';
 
+import * as accordion from './be-accordion';
+import * as callout from './be-alert';
+import * as card from './be-card';
+import * as cover from './be-cover';
+// import * as recentPosts from './recent-posts';
+import * as contactForm from './be-contact-form';
+
 export const registerBlocks = () => {
+  // TODO: Remove this when upgrading to 10.5 -> https://github.com/WordPress/gutenberg/pull/30194
   const replaceButtonBlockEdit = ( settings, name ) => {
     if ( name !== 'core/button' ) {
       return settings;
     }
 
     return assign( {}, settings, {
-      edit: ButtonEdit, // Removes & replaces some styling options
-      attributes: assign( {}, settings.attributes, {
-        hasHollowStyle: {
-          type: 'boolean',
-          default: false
-        },
-        hasLargeStyle: {
-          type: 'boolean',
-          default: false
-        }
-      })
-    } );
+      edit: ButtonEdit // Removes border radius panel
+    })
   }
 
-  const replaceColumnBlockEdit = ( settings, name ) => {
-    if ( name !== 'core/column' ) {
+  const replaceBlockEdit = ( settings, name ) => {
+    if ( name !== 'core/block' ) {
       return settings;
     }
 
     return assign( {}, settings, {
-      edit: ColumnEdit // Removes column width options
-    } );
+      edit: BlockEdit // Removes 'convert to regular blocks' toolbar button
+    })
   }
 
-  const replaceImageBlockEdit = ( settings, name ) => {
-    if ( name !== 'core/image' ) {
+  const replaceColumnBlockEdit = ( settings, name ) => {
+    if ( name !== 'core/column' ) {
       return settings;
     }
 
     return assign( {}, settings, {
-      edit: ImageEdit // Removes ImageSizeControl options
+      edit: ColumnEdit // Removes column width options
     } );
   }
 
-  const applyExtraClass = ( extraProps, blockType, attributes ) => {
-    if ( blockType.name !== 'core/button' ) {
-      return extraProps;
-    }
-
-    if (attributes.hasLargeStyle) {
-      extraProps.className = classnames( extraProps.className, 'large' );
-    }
-
-    if (attributes.hasHollowStyle) {
-      extraProps.className = classnames( extraProps.className, 'is-style-hollow' );
-    }
-
-    return extraProps;
-  }
-
-  const withClientIdClassName = createHigherOrderComponent( ( BlockListBlock ) => {
+  // Set default alignment to 'full' for all images
+  const setDefaultAlignment = createHigherOrderComponent( ( BlockListBlock ) => {
     return ( props ) => {
-      if ( props.name !== 'core/button' ) {
+      if ( props.name !== 'core/image' ) {
         return <BlockListBlock { ...props } />;
       }
 
-      let classNames = '';
-      if (props.attributes.hasLargeStyle) {
-        classNames = classnames( classNames, 'large' );
-      }
-
-      if (props.attributes.hasHollowStyle) {
-        classNames = classnames( classNames, 'is-style-hollow' );
-      }
+      props.attributes.align = 'full';
 
-      return <BlockListBlock { ...props } className={ classNames } />;
+      return <BlockListBlock { ...props } />;
     };
-  }, 'withClientIdClassName' );
+  }, 'setDefaultAlignment' );
 
   const replaceMediaUpload = () => MediaUpload;
 
   addFilter(
     'editor.BlockListBlock',
-    'block-editor/filters/core-button-block-list',
-    withClientIdClassName
+    'block-editor/filters/core-image-block-list',
+    setDefaultAlignment
   );
 
   addFilter(
     'blocks.registerBlockType',
-    'block-editor/filters/core-button',
-    replaceButtonBlockEdit
+    'block-editor/filters/core-block',
+    replaceBlockEdit
   );
 
   addFilter(
-    'blocks.getSaveContent.extraProps',
-    'block-editor/filters/core-button-classes',
-    applyExtraClass
+    'blocks.registerBlockType',
+    'block-editor/filters/core-button',
+    replaceButtonBlockEdit
   );
 
   addFilter(
@@ -132,12 +108,6 @@ export const registerBlocks = () => {
     replaceColumnBlockEdit
   );
 
-  addFilter(
-    'blocks.registerBlockType',
-    'block-editor/filters/core-image',
-    replaceImageBlockEdit
-  );
-
   addFilter(
     'editor.MediaUpload',
     'block-editor/filters/media-upload',
@@ -158,41 +128,6 @@ export const registerBlocks = () => {
   unregisterBlockType('core/code');
   unregisterBlockType('core/cover');
   unregisterBlockType('core/embed');
-  unregisterBlockType('core-embed/twitter');
-  unregisterBlockType('core-embed/youtube');
-  unregisterBlockType('core-embed/facebook');
-  unregisterBlockType('core-embed/instagram');
-  unregisterBlockType('core-embed/wordpress');
-  unregisterBlockType('core-embed/soundcloud');
-  unregisterBlockType('core-embed/spotify');
-  unregisterBlockType('core-embed/flickr');
-  unregisterBlockType('core-embed/vimeo');
-  unregisterBlockType('core-embed/animoto');
-  unregisterBlockType('core-embed/cloudup');
-  unregisterBlockType('core-embed/collegehumor');
-  unregisterBlockType('core-embed/crowdsignal');
-  unregisterBlockType('core-embed/dailymotion');
-  unregisterBlockType('core-embed/hulu');
-  unregisterBlockType('core-embed/imgur');
-  unregisterBlockType('core-embed/issuu');
-  unregisterBlockType('core-embed/kickstarter');
-  unregisterBlockType('core-embed/meetup-com');
-  unregisterBlockType('core-embed/mixcloud');
-  unregisterBlockType('core-embed/polldaddy');
-  unregisterBlockType('core-embed/reddit');
-  unregisterBlockType('core-embed/reverbnation');
-  unregisterBlockType('core-embed/screencast');
-  unregisterBlockType('core-embed/scribd');
-  unregisterBlockType('core-embed/slideshare');
-  unregisterBlockType('core-embed/smugmug');
-  unregisterBlockType('core-embed/speaker');
-  unregisterBlockType('core-embed/speaker-deck');
-  unregisterBlockType('core-embed/tiktok');
-  unregisterBlockType('core-embed/ted');
-  unregisterBlockType('core-embed/tumblr');
-  unregisterBlockType('core-embed/videopress');
-  unregisterBlockType('core-embed/wordpress-tv');
-  unregisterBlockType('core-embed/amazon-kindle');
   unregisterBlockType('core/file');
   unregisterBlockType('core/media-text');
   unregisterBlockType('core/latest-comments');
@@ -203,8 +138,6 @@ export const registerBlocks = () => {
   unregisterBlockType('core/pullquote');
   unregisterBlockType('core/rss');
   unregisterBlockType('core/search');
-  // unregisterBlockType('core/reusable-block'); // ?
-  // unregisterBlockType('core/reusable'); // ?
   unregisterBlockType('core/social-links');
   unregisterBlockType('core/social-link');
   unregisterBlockType('core/spacer');
@@ -228,6 +161,14 @@ export const registerBlocks = () => {
   unregisterBlockVariation('core/columns', 'two-columns-two-thirds-one-third');
   unregisterBlockVariation('core/columns', 'three-columns-wider-center');
 
+  // Register custom blocks
+  registerBlockType(accordion.name, accordion.settings);
+  registerBlockType(callout.name, callout.settings);
+  registerBlockType(card.name, card.settings);
+  registerBlockType(contactForm.name, contactForm.settings);
+  registerBlockType(cover.name, cover.settings);
+  // registerBlockType(recentPosts.name, recentPosts.settings);
+
   // Register custom block styles
   registerBlockStyle( 'core/button', {
     name: 'primary',
@@ -238,14 +179,22 @@ export const registerBlocks = () => {
     name: 'secondary',
     label: 'Secondary'
   } );
+  registerBlockStyle( 'core/button', {
+    name: 'outline-primary',
+    label: 'Primary (Outlined)'
+  } );
+  registerBlockStyle( 'core/button', {
+    name: 'outline-secondary',
+    label: 'Secondary (Outlined)'
+  } );
   registerBlockStyle( 'core/table', {
-    name: 'striped',
-    label: 'Striped',
+    name: 'unstriped',
+    label: 'Unstriped',
     isDefault: true
   } );
   registerBlockStyle( 'core/table', {
-    name: 'unstriped',
-    label: 'Unstriped'
+    name: 'striped',
+    label: 'Striped'
   } );
   registerBlockStyle( 'core/image', {
     name: 'default',

data/app/javascript/block_editor/components/block-editor/index.js

@@ -8,7 +8,8 @@ import '@wordpress/format-library';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect, useState, useMemo } from '@wordpress/element';
 import { serialize, parse } from '@wordpress/blocks';
-import { InterfaceSkeleton as EditorSkeleton } from '@wordpress/interface';
+import { InterfaceSkeleton, FullscreenMode } from '@wordpress/interface';
+import { useShortcut } from '@wordpress/keyboard-shortcuts';
 import {
   BlockEditorKeyboardShortcuts,
   BlockEditorProvider,
@@ -17,11 +18,14 @@ import {
   WritingFlow,
   ObserveTyping,
   BlockBreadcrumb,
+  __experimentalLibrary as Library,
 } from '@wordpress/block-editor';
 import {
   Popover,
   SlotFillProvider,
   DropZoneProvider,
+  FocusReturnProvider,
+  Button
 } from '@wordpress/components';
 
 /**
@@ -30,11 +34,14 @@ import {
 import Sidebar from '../sidebar';
 import Header from '../header';
 import Notices from '../notices';
+import PopoverWrapper from './popover-wrapper';
 import '../../stores'; // TODO: Think this store registering needs to be moved somewhere else so that it happens everytime a BlockEditor is initialized
 
 function BlockEditor( { input, settings: _settings } ) {
   const blocks = useSelect((select) => select("block-editor").getBlocks());
   const { updateBlocks } = useDispatch("block-editor");
+  const __experimentalReusableBlocks = useSelect((select) => select( 'core' ).getEntityRecords('postType', 'wp_block', { per_page: -1 }));
+  const settings = { ..._settings, __experimentalReusableBlocks };
 
   function handleInput(newBlocks, persist) {
     updateBlocks(newBlocks);
@@ -46,43 +53,107 @@ function BlockEditor( { input, settings: _settings } ) {
     input.value = serialize(newBlocks);
   }
 
+  // Registering the shortcuts
+  const { registerShortcut } = useDispatch( 'core/keyboard-shortcuts' );
+  useEffect( () => {
+    registerShortcut( {
+      name: 'core/editor/undo',
+      category: 'global',
+      description: 'Undo your last changes.',
+      keyCombination: {
+        modifier: 'primary',
+        character: 'z',
+      },
+    } );
+
+    registerShortcut( {
+      name: 'core/editor/redo',
+      category: 'global',
+      description: 'Redo your last undo.',
+      keyCombination: {
+        modifier: 'primaryShift',
+        character: 'z',
+      },
+    } );
+  })
+
+  const { redo, undo } = useDispatch( 'block-editor' );
+
+  useShortcut(
+    'core/editor/undo',
+    ( event ) => {
+      undo();
+      event.preventDefault();
+    },
+    { bindGlobal: true }
+  );
+
+  useShortcut(
+    'core/editor/redo',
+    ( event ) => {
+      redo();
+      event.preventDefault();
+    },
+    { bindGlobal: true }
+  );
+
+  const { setIsInserterOpened } = useDispatch( 'block-editor' );
+  const isInserterOpened = useSelect((select) => select("block-editor").isInserterOpened());
+
   return (
-    <SlotFillProvider>
-      <DropZoneProvider>
-        <EditorSkeleton
-          sidebar={<Sidebar />}
-          content={
-            <>
-            <Notices />
-            <BlockEditorProvider
-              value={ blocks }
-              onInput={ handleInput }
-              onChange={ handleChange }
-              settings={ _settings }
-            >
-              <Header />
-              <BlockBreadcrumb />
-              <Sidebar.InspectorFill>
-                <BlockInspector />
-              </Sidebar.InspectorFill>
-              <div className="block-editor__inner-wrapper">
-                <BlockEditorKeyboardShortcuts.Register />
-                <BlockEditorKeyboardShortcuts />
-                <WritingFlow>
-                  <ObserveTyping>
-                    <BlockList className="editor-styles-wrapper" />
-                  </ObserveTyping>
-                </WritingFlow>
-              </div>
-            </BlockEditorProvider>
-            </>
-          }
-        />
-        <Popover.Slot />
-      </DropZoneProvider>
-    </SlotFillProvider>
+    <>
+      <FullscreenMode isActive={false} />
+      <SlotFillProvider>
+        <DropZoneProvider>
+          <BlockEditorProvider
+            value={ blocks }
+            onInput={ handleInput }
+            onChange={ handleChange }
+            settings={ settings }
+          >
+            <FocusReturnProvider>
+              <InterfaceSkeleton
+                header={<Header />}
+                footer={<BlockBreadcrumb />}
+                sidebar={<Sidebar />}
+                leftSidebar={
+                  isInserterOpened && (
+                    <PopoverWrapper
+                      onClose={ () => setIsInserterOpened( false ) }
+                    >
+                      <div>
+                        <div>
+                          <Library
+                            showInserterHelpPanel={true}
+                          />
+                        </div>
+                      </div>
+                    </PopoverWrapper>
+                  )
+                }
+                content={
+                  <>
+                    <Notices />
+                    <Sidebar.InspectorFill>
+                      <BlockInspector />
+                    </Sidebar.InspectorFill>
+                    <BlockEditorKeyboardShortcuts.Register />
+                    <BlockEditorKeyboardShortcuts />
+                    <WritingFlow>
+                      <ObserveTyping>
+                        <BlockList className="editor-styles-wrapper" />
+                      </ObserveTyping>
+                    </WritingFlow>
+                  </>
+                }
+              />
+              <Popover.Slot />
+            </FocusReturnProvider>
+          </BlockEditorProvider>
+        </DropZoneProvider>
+      </SlotFillProvider>
+    </>
   );
 }
 
 export default BlockEditor;
-

data/app/javascript/block_editor/components/block-editor/popover-wrapper.js

@@ -0,0 +1,60 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+/**
+ * WordPress dependencies
+ */
+import {
+	withConstrainedTabbing,
+	withFocusReturn,
+	withFocusOutside,
+} from '@wordpress/components';
+import { Component } from '@wordpress/element';
+import { ESCAPE } from '@wordpress/keycodes';
+
+function stopPropagation( event ) {
+	event.stopPropagation();
+}
+
+const DetectOutside = withFocusOutside(
+	class extends Component {
+		handleFocusOutside( event ) {
+			this.props.onFocusOutside( event );
+		}
+
+		render() {
+			return this.props.children;
+		}
+	}
+);
+
+const FocusManaged = withConstrainedTabbing(
+	withFocusReturn( ( { children } ) => children )
+);
+
+export default function PopoverWrapper( { onClose, children, className } ) {
+	// Event handlers
+	const maybeClose = ( event ) => {
+		// Close on escape
+		if ( event.keyCode === ESCAPE && onClose ) {
+			event.stopPropagation();
+			onClose();
+		}
+	};
+
+	// Disable reason: this stops certain events from propagating outside of the component.
+	//   - onMouseDown is disabled as this can cause interactions with other DOM elements
+	/* eslint-disable jsx-a11y/no-static-element-interactions */
+	return (
+		<div
+			className={ className }
+			onKeyDown={ maybeClose }
+			onMouseDown={ stopPropagation }
+		>
+			<DetectOutside onFocusOutside={ onClose }>
+				<FocusManaged>{ children }</FocusManaged>
+			</DetectOutside>
+		</div>
+	);
+	/* eslint-enable jsx-a11y/no-static-element-interactions */
+}