block_editor 0.1.0

data/app/javascript/block_editor/components/header/styles.scss

@@ -0,0 +1,14 @@
+.block-editor__header {
+	align-items: center;
+	background: $white;
+	border-bottom: 1px solid $light-gray-500;
+	display: flex;
+	height: $header-height;
+	justify-content: space-between;
+	left: 0;
+	// Stick the toolbar to the top, because the admin bar is not fixed on mobile.
+	position: sticky;
+	right: 0;
+	top: 0;
+  z-index: 1;
+}

data/app/javascript/block_editor/components/header/undo.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 { undo as undoIcon } from '@wordpress/icons';
+
+function HistoryUndo( { hasUndo, undo, ...props } ) {
+  return (
+    <Button
+      { ...props }
+      icon={ undoIcon }
+      label={ __( 'Undo' ) }
+      shortcut={ displayShortcut.primary( 'z' ) }
+      // If there are no undo 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={ ! hasUndo }
+      onClick={ hasUndo ? undo : undefined }
+      className="editor-history__undo"
+    />
+  );
+}
+
+const EnhancedHistoryUndo = compose( [
+  withSelect( ( select ) => ( {
+    hasUndo: select( 'block-editor' ).hasUndo(),
+  } ) ),
+  withDispatch( ( dispatch ) => ( {
+    undo: dispatch( 'block-editor' ).undo,
+  } ) ),
+] )( HistoryUndo );
+
+export default EnhancedHistoryUndo;

data/app/javascript/block_editor/components/media-upload/index.js

@@ -0,0 +1,37 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+
+class MediaUpload extends Component {
+  constructor( {
+    allowedTypes,
+    gallery = false,
+    unstableFeaturedImageFlow = false,
+    modalClass,
+    multiple = false,
+    title =  'Select or Upload Media',
+  } ) {
+    super( ...arguments );
+    this.openUploader = this.openUploader.bind( this );
+  }
+
+  openUploader() {
+    if (window.MediaUploader == undefined) {
+      console.log('window.MediaUploader undefined. Pulling in random image from Unsplash')
+
+      this.props.onSelect( { url: 'https://source.unsplash.com/random/800x500' });
+    } else {
+      this.MediaUploader.open(this.props.onSelect);
+    }
+  }
+
+  render() {
+    return this.props.render( { open: this.openUploader } );
+  }
+}
+
+export default MediaUpload;

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

@@ -0,0 +1,26 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { SnackbarList } from '@wordpress/components';
+
+export default function Notices() {
+	const notices = useSelect(
+		( select ) =>
+			select( 'core/notices' )
+				.getNotices()
+				.filter( ( notice ) => notice.type === 'snackbar' ),
+		[]
+	);
+	const { removeNotice } = useDispatch( 'core/notices' );
+	return (
+		<SnackbarList
+			className="edit-site-notices"
+			notices={ notices }
+			onRemove={ removeNotice }
+		/>
+	);
+}

data/app/javascript/block_editor/components/notices/styles.scss

@@ -0,0 +1,9 @@
+.edit-site-notices {
+	bottom: 20px;
+	padding-left: 16px;
+	padding-right: 16px;
+	position: fixed;
+	right: 0;
+}
+
+@include editor-left(".edit-site-notices");

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

@@ -0,0 +1,31 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill, Panel } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+const { Slot: InspectorSlot, Fill: InspectorFill } = createSlotFill(
+	'StandAloneBlockEditorSidebarInspector'
+);
+
+function Sidebar() {
+	return (
+		<div
+			className="block-editor__sidebar"
+			role="region"
+			aria-label={ __( 'Standalone Block Editor advanced settings.' ) }
+			tabIndex="-1"
+		>
+			<Panel header={ __( 'Inspector' ) }>
+				<InspectorSlot bubblesVirtually />
+			</Panel>
+		</div>
+	);
+}
+
+Sidebar.InspectorFill = InspectorFill;
+
+export default Sidebar;

data/app/javascript/block_editor/components/sidebar/styles.scss

@@ -0,0 +1,43 @@
+.block-editor__sidebar {
+	background: $white;
+	border-left: $border-width solid $light-gray-500;
+	bottom: 0;
+	color: $dark-gray-500;
+	height: 100vh;
+	overflow: hidden;
+	position: absolute;
+	right: 0;
+	top: 0;
+	width: $sidebar-width;
+	//z-index: z-index(".edit-site-sidebar");
+
+	@include break-small() {
+		-webkit-overflow-scrolling: touch;
+		height: auto;
+		overflow: auto;
+		// top: $admin-bar-height-big + $header-height;
+	}
+
+	// @include break-medium() {
+	// 	top: $admin-bar-height + $header-height;
+	// }
+
+	@include break-small() {
+		display: block;
+	}
+
+	> .components-panel {
+		border-left: 0;
+		border-right: 0;
+		margin-bottom: -1px;
+		margin-top: -1px;
+
+		> .components-panel__header {
+			background: $light-gray-200;
+		}
+	}
+
+	.block-editor-block-inspector__card {
+		margin: 0;
+	}
+}

data/app/javascript/block_editor/stores/action-types.js

@@ -0,0 +1,4 @@
+export const UPDATE_BLOCKS = "UPDATE_BLOCKS";
+export const PERSIST_BLOCKS = "PERSIST_BLOCKS";
+export const FETCH_BLOCKS_FROM_STORAGE = "FETCH_BLOCKS_FROM_STORAGE";
+export const PERSIST_BLOCKS_TO_STORAGE = "PERSIST_BLOCKS_TO_STORAGE";

data/app/javascript/block_editor/stores/actions.js

@@ -0,0 +1,41 @@
+import {
+	UPDATE_BLOCKS,
+	PERSIST_BLOCKS,
+	FETCH_BLOCKS_FROM_STORAGE,
+	PERSIST_BLOCKS_TO_STORAGE,
+} from "./action-types";
+import { ActionCreators as ReduxUndo } from "redux-undo";
+
+
+export function undo() {
+	return ReduxUndo.undo();
+}
+
+export function redo() {
+	return ReduxUndo.redo();
+}
+
+export function *updateBlocks( blocks, persist = false ) {
+
+	if( persist ) {
+		yield persistBlocksToStorage(blocks);
+	}
+
+	return {
+		type: persist ? PERSIST_BLOCKS : UPDATE_BLOCKS,
+		blocks,
+	};
+}
+
+export function fetchBlocksFromStorage() {
+	return {
+		type: FETCH_BLOCKS_FROM_STORAGE,
+	};
+};
+
+export function persistBlocksToStorage(blocks) {
+	return {
+		type: PERSIST_BLOCKS_TO_STORAGE,
+		blocks,
+	};
+}

data/app/javascript/block_editor/stores/controls.js

@@ -0,0 +1,21 @@
+import {
+	FETCH_BLOCKS_FROM_STORAGE,
+	PERSIST_BLOCKS_TO_STORAGE,
+} from "./action-types";
+import { serialize } from "@wordpress/blocks";
+
+export default {
+    [PERSIST_BLOCKS_TO_STORAGE](action) {
+        return new Promise((resolve, reject) => {
+            window.localStorage.setItem("blockEditorBlocks", serialize(action.blocks));
+            resolve(action.blocks);
+        });
+    },
+    [FETCH_BLOCKS_FROM_STORAGE]() {
+        return new Promise((resolve, reject) => {
+            const storedBlocks =
+                window.localStorage.getItem("blockEditorBlocks") || [];
+            resolve(storedBlocks);
+        });
+    },
+};

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

@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import { registerStore } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import reducer from './reducer';
+import * as selectors from './selectors';
+import * as actions from './actions';
+import * as resolvers from "./resolvers";
+import controls from './controls';
+
+/**
+ * Module Constants
+ */
+const MODULE_KEY = 'block-editor';
+
+const store = registerStore(MODULE_KEY, {
+	reducer,
+	selectors,
+	actions,
+	controls,
+	resolvers,
+});
+
+window.blockEditorStore = store;
+
+export default store;

data/app/javascript/block_editor/stores/reducer.js

@@ -0,0 +1,20 @@
+import undoable, { groupByActionTypes, includeAction } from "redux-undo";
+import { UPDATE_BLOCKS, PERSIST_BLOCKS } from "./action-types";
+
+function blocksReducer(state = [], action) {
+	switch (action.type) {
+		case UPDATE_BLOCKS:
+		case PERSIST_BLOCKS:
+			const { blocks } = action;
+
+			return {
+				blocks,
+			};
+	}
+
+	return state;
+}
+
+export default undoable(blocksReducer, {
+	filter: includeAction(PERSIST_BLOCKS),
+});

data/app/javascript/block_editor/stores/resolvers.js

@@ -0,0 +1,10 @@
+import { parse } from "@wordpress/blocks";
+import { fetchBlocksFromStorage, updateBlocks } from "./actions";
+
+export function *getBlocks() {
+    const rawBlocks = yield fetchBlocksFromStorage();
+    const persist = false;
+    const blocks = parse(rawBlocks);
+    yield updateBlocks(blocks, persist);
+    return blocks;
+}

data/app/javascript/block_editor/stores/selectors.js

@@ -0,0 +1,13 @@
+import { createRegistrySelector } from '@wordpress/data';
+
+export const getBlocks = ( state ) => {
+	return state.present.blocks || [];
+}
+
+export const hasUndo = (state) => {
+	return state.past?.length;
+};
+
+export const hasRedo = (state) => {
+	return state.future?.length;
+};

data/app/javascript/controllers/block_editor_controller.jsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import PropTypes from 'prop-types'
+
+import { Controller } from "stimulus"
+
+import { render } from '@wordpress/element'
+
+import BlockEditor from '../block_editor/components/block-editor'
+import { registerBlocks } from '../block_editor/blocks'
+
+registerBlocks()
+
+export default class extends Controller {
+  static targets = [ "output", "input" ]
+
+  connect() {
+    const settings = {
+      imageSizes: false,
+      disableCustomFontSizes: true,
+      fontSizes: false,
+      disableCustomColors: true,
+      colors: false,
+      disableCustomGradients: true,
+      __experimentalDisableDropCap: true,
+      __experimentalDisableCustomLineHeight: true,
+      mediaUpload:  function uploadMedia( {
+        allowedTypes,
+        additionalData = {},
+        filesList,
+        maxUploadFileSize,
+        onError = noop,
+        onFileChange,
+        wpAllowedMimeTypes = null,
+      } ) {
+      }
+    }
+
+    window.localStorage.setItem("blockEditorBlocks", this.inputTarget.value);
+    this.editor = render( <BlockEditor input={ this.inputTarget } settings={ settings } />, this.outputTarget )
+  }
+}

data/app/javascript/controllers/index.js

@@ -0,0 +1,6 @@
+import { Application } from "stimulus"
+import { definitionsFromContext } from "stimulus/webpack-helpers"
+
+const application = Application.start()
+const context = require.context("controllers", true, /_controller\.jsx$/)
+application.load(definitionsFromContext(context))

data/app/javascript/packs/block_editor/application.js

@@ -0,0 +1,2 @@
+import "controllers"
+import './application.scss'

data/app/javascript/packs/block_editor/application.scss

@@ -0,0 +1,108 @@
+$primary-color: #1b8ecf;
+
+@function theme($selector) {
+  @return $primary-color;
+}
+
+@function color($color) {
+  @return $color;
+}
+
+@import "~@wordpress/base-styles/colors";
+@import "~@wordpress/base-styles/variables";
+@import "~@wordpress/base-styles/mixins";
+@import "~@wordpress/base-styles/breakpoints";
+@import "~@wordpress/base-styles/animations";
+@import "~@wordpress/base-styles/z-index";
+
+.block-editor {
+  label {
+    font-size: $default-font-size;
+  }
+}
+
+@import "~@wordpress/components/src/style";
+@import "~@wordpress/block-editor/src/style";
+@import "~@wordpress/block-library/src/style";
+
+$header-height: 50px;
+
+// Internal
+@import "../../block_editor/components/sidebar/styles";
+@import "../../block_editor/components/header/styles";
+@import "../../block_editor/components/block-editor/styles";
+
+.block-editor {
+  @include reset;
+  position: relative;
+  margin: 1rem 0;
+  padding: 0;
+  font-family: $default-font;
+  font-size: $default-font-size;
+  border: 1px solid #f3f4f5;
+  min-height: 500px;
+
+  a,
+  div {
+    outline: 0;
+  }
+
+  .block-editor-url-popover__additional-controls,
+  .block-editor-media-replace-flow__options .components-form-file-upload {
+    display: none;
+  }
+
+  &:not(.block-editor__fullscreen) {
+    .block-editor__size-toggle-button__minimize {
+      display: none;
+    }
+  }
+
+  &.block-editor__fullscreen {
+    .block-editor__size-toggle-button__maximize {
+      display: none;
+    }
+  }
+
+  &__size-toggle-button {
+    position: absolute;
+    right: 0;
+    top: 7px;
+    z-index: 1;
+  }
+
+  &__fullscreen {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+    padding: 0;
+    z-index: 99;
+    margin: 0;
+    .block-editor {
+      height: 100%;
+    }
+  }
+}
+
+// In order to use mix-blend-mode, this element needs to have an explicitly set background-color.
+// We scope it to .wp-toolbar to be wp-admin only, to prevent bleed into other implementations.
+html.wp-toolbar {
+  background: $white;
+}
+
+// The modals are shown outside the .block-editor wrapper, they need these styles.
+.block-editor, .components-modal__frame {
+  @include reset;
+}
+
+.block-editor-block-breadcrumb {
+  position: absolute;
+  bottom: 0;
+  z-index: 1;
+  background-color: $white;
+  width: 100%;
+  border-top: 1px solid #f3f4f5;
+  padding: 0.5rem 0;
+}