block_editor 0.1.0

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

@@ -0,0 +1,263 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import classnames from 'classnames';
+import { assign } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import '@wordpress/core-data';
+import { registerCoreBlocks } from '@wordpress/block-library'
+import '@wordpress/block-editor';
+import {
+  registerBlockType,
+  unregisterBlockType,
+  registerBlockStyle,
+  unregisterBlockStyle,
+  unregisterBlockVariation
+} from '@wordpress/blocks';
+import { createHigherOrderComponent } from '@wordpress/compose'
+import { addFilter } from '@wordpress/hooks';
+
+/**
+ * Internal dependencies
+ */
+import ColumnEdit from './column/edit';
+import ButtonEdit from './button/edit';
+import ImageEdit from './image/edit';
+import MediaUpload from '../components/media-upload';
+
+export const registerBlocks = () => {
+  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
+        }
+      })
+    } );
+  }
+
+  const replaceColumnBlockEdit = ( settings, name ) => {
+    if ( name !== 'core/column' ) {
+      return settings;
+    }
+
+    return assign( {}, settings, {
+      edit: ColumnEdit // Removes column width options
+    } );
+  }
+
+  const replaceImageBlockEdit = ( settings, name ) => {
+    if ( name !== 'core/image' ) {
+      return settings;
+    }
+
+    return assign( {}, settings, {
+      edit: ImageEdit // Removes ImageSizeControl 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 ) => {
+    return ( props ) => {
+      if ( props.name !== 'core/button' ) {
+        return <BlockListBlock { ...props } />;
+      }
+
+      let classNames = '';
+      if (props.attributes.hasLargeStyle) {
+        classNames = classnames( classNames, 'large' );
+      }
+
+      if (props.attributes.hasHollowStyle) {
+        classNames = classnames( classNames, 'is-style-hollow' );
+      }
+
+      return <BlockListBlock { ...props } className={ classNames } />;
+    };
+  }, 'withClientIdClassName' );
+
+  const replaceMediaUpload = () => MediaUpload;
+
+  addFilter(
+    'editor.BlockListBlock',
+    'block-editor/filters/core-button-block-list',
+    withClientIdClassName
+  );
+
+  addFilter(
+    'blocks.registerBlockType',
+    'block-editor/filters/core-button',
+    replaceButtonBlockEdit
+  );
+
+  addFilter(
+    'blocks.getSaveContent.extraProps',
+    'block-editor/filters/core-button-classes',
+    applyExtraClass
+  );
+
+  addFilter(
+    'blocks.registerBlockType',
+    'block-editor/filters/core-column',
+    replaceColumnBlockEdit
+  );
+
+  addFilter(
+    'blocks.registerBlockType',
+    'block-editor/filters/core-image',
+    replaceImageBlockEdit
+  );
+
+  addFilter(
+    'editor.MediaUpload',
+    'block-editor/filters/media-upload',
+    replaceMediaUpload
+  );
+
+  // Register WP blocks
+  registerCoreBlocks();
+
+  // Unregister WP blocks which are not supported
+  unregisterBlockType('core/gallery');
+  unregisterBlockType('core/quote');
+  unregisterBlockType('core/shortcode');
+  unregisterBlockType('core/archives');
+  unregisterBlockType('core/audio');
+  unregisterBlockType('core/calendar');
+  unregisterBlockType('core/categories');
+  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');
+  unregisterBlockType('core/latest-posts');
+  unregisterBlockType('core/more');
+  unregisterBlockType('core/nextpage');
+  unregisterBlockType('core/preformatted');
+  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');
+  unregisterBlockType('core/subhead');
+  unregisterBlockType('core/tag-cloud');
+  unregisterBlockType('core/text-columns');
+  unregisterBlockType('core/verse');
+  unregisterBlockType('core/video');
+
+  // Unregister WP block styles
+  unregisterBlockStyle('core/separator', 'wide');
+  unregisterBlockStyle('core/button', 'fill');
+  unregisterBlockStyle('core/button', 'outline');
+  unregisterBlockStyle('core/image', 'default');
+  unregisterBlockStyle('core/image', 'rounded');
+  unregisterBlockStyle('core/table', 'regular');
+  unregisterBlockStyle('core/table', 'stripes');
+
+  // Unregister WP block variations
+  unregisterBlockVariation('core/columns', 'two-columns-one-third-two-thirds');
+  unregisterBlockVariation('core/columns', 'two-columns-two-thirds-one-third');
+  unregisterBlockVariation('core/columns', 'three-columns-wider-center');
+
+  // Register custom block styles
+  registerBlockStyle( 'core/button', {
+    name: 'primary',
+    label: 'Primary',
+    isDefault: true
+  } );
+  registerBlockStyle( 'core/button', {
+    name: 'secondary',
+    label: 'Secondary'
+  } );
+  registerBlockStyle( 'core/table', {
+    name: 'striped',
+    label: 'Striped',
+    isDefault: true
+  } );
+  registerBlockStyle( 'core/table', {
+    name: 'unstriped',
+    label: 'Unstriped'
+  } );
+  registerBlockStyle( 'core/image', {
+    name: 'default',
+    label: 'Default',
+    isDefault: true
+  } );
+  registerBlockStyle( 'core/image', {
+    name: 'padded',
+    label: 'Padded'
+  } );
+  registerBlockStyle( 'core/columns', {
+    name: 'no-stack',
+    label: 'No Stacking'
+  } );
+};

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

@@ -0,0 +1,88 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+/**
+ * WordPress dependencies
+ */
+import '@wordpress/editor'; // This shouldn't be necessary - currently required otherwise notices fails to initialized, think the data store is being registered
+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 {
+  BlockEditorKeyboardShortcuts,
+  BlockEditorProvider,
+  BlockList,
+  BlockInspector,
+  WritingFlow,
+  ObserveTyping,
+  BlockBreadcrumb,
+} from '@wordpress/block-editor';
+import {
+  Popover,
+  SlotFillProvider,
+  DropZoneProvider,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import Sidebar from '../sidebar';
+import Header from '../header';
+import Notices from '../notices';
+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");
+
+  function handleInput(newBlocks, persist) {
+    updateBlocks(newBlocks);
+    input.value = serialize(newBlocks);
+  }
+
+  function handleChange(newBlocks) {
+    updateBlocks(newBlocks, true);
+    input.value = serialize(newBlocks);
+  }
+
+  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>
+  );
+}
+
+export default BlockEditor;
+

data/app/javascript/block_editor/components/block-editor/styles.scss

@@ -0,0 +1,39 @@
+.block-editor__block-list {
+  padding-bottom: $grid-unit-30;
+  padding-top: $grid-unit-30 + 5;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.block-editor-block-list__layout {
+  margin-bottom: 50px;
+}
+
+.block-editor__inner-wrapper {
+  -webkit-overflow-scrolling: touch;
+  background: $white;
+  height: calc(100% - #{$header-height});
+  left: 0;
+  overflow: auto;
+  position: absolute;
+  top: $header-height;
+  width: 100%;
+
+  @include break-small {
+    width: calc(100% - #{$sidebar-width});
+  }
+}
+
+// Grab the default Editor styles for visual consistency with WP
+.editor-styles-wrapper {
+  // We need the styles scoped to "body" to be added to the
+  // div.editor-styles wrapper
+  font-family: $editor-font;
+  font-size: $editor-font-size;
+  line-height: $editor-line-height;
+  color: #555;
+
+  // Important all other selectors scoped underneath
+  // `div.editor-styles-wrapper`
+  @import "~@wordpress/editor/src/editor-styles.scss";
+}

data/app/javascript/block_editor/components/header/index.js

@@ -0,0 +1,45 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+/**
+ * WordPress dependencies
+ */
+import { NavigableToolbar } from '@wordpress/block-editor';
+import { Button } from '@wordpress/components';
+import { minus as minimizeIcon } from '@wordpress/icons';
+import { plus as maximizeIcon } from '@wordpress/icons';
+
+import HistoryUndo from './undo';
+import HistoryRedo from './redo';
+
+export default function Header() {
+	return (
+		<div
+			className="block-editor__header"
+			role="region"
+			tabIndex="-1"
+		>
+      <NavigableToolbar
+        className="edit-post-header-toolbar"
+      >
+        <HistoryUndo />
+        <HistoryRedo />
+        <Button
+          icon={ maximizeIcon }
+          label={ 'Fullscreen' }
+          // shortcut={ displayShortcut.primary( 'x' ) }
+          className="block-editor__size-toggle-button block-editor__size-toggle-button__maximize"
+          onClick={() => document.querySelector('.block-editor').classList.add('block-editor__fullscreen')}
+        />
+        <Button
+          icon={ minimizeIcon }
+          label={ 'Minimize' }
+          // shortcut={ displayShortcut.primary( 'x' ) }
+          className="block-editor__size-toggle-button block-editor__size-toggle-button__minimize"
+          onClick={() => document.querySelector('.block-editor').classList.remove('block-editor__fullscreen')}
+        />
+
+      </NavigableToolbar>
+		</div>
+	);
+}

data/app/javascript/block_editor/components/header/redo.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+import { withSelect, withDispatch } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
+import { displayShortcut } from '@wordpress/keycodes';
+import { redo as redoIcon } from '@wordpress/icons';
+
+function HistoryRedo( { hasRedo, redo, ...props } ) {
+	return (
+		<Button
+			{ ...props }
+			icon={ redoIcon }
+			label={ __( 'Redo' ) }
+			shortcut={ displayShortcut.primary( 'x' ) }
+			// If there are no redo levels we don't want to actually disable this
+			// button, because it will remove focus for keyboard users.
+			// See: https://github.com/WordPress/gutenberg/issues/3486
+			aria-disabled={ ! hasRedo }
+			onClick={ hasRedo ? redo : undefined }
+			className="editor-history__redo"
+		/>
+	);
+}
+
+const EnhancedHistoryRedo = compose( [
+	withSelect( ( select ) => ( {
+		hasRedo: select( 'block-editor' ).hasRedo(),
+	} ) ),
+	withDispatch( ( dispatch ) => ( {
+		redo: dispatch( 'block-editor' ).redo,
+	} ) ),
+] )( HistoryRedo );
+
+export default EnhancedHistoryRedo;