block_editor 0.1.3 → 1.0.0

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

@@ -5,10 +5,6 @@
   margin-right: auto;
 }
 
-.block-editor-block-list__layout {
-  margin-bottom: 50px;
-}
-
 .block-editor__inner-wrapper {
   -webkit-overflow-scrolling: touch;
   background: $white;
@@ -26,13 +22,6 @@
 
 // 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

@@ -6,22 +6,44 @@ import ReactDOM from 'react-dom'
  */
 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 { resizeCornerNE as minimizeIcon } from '@wordpress/icons';
+import { close as closeIcon } from '@wordpress/icons';
+import { plus as openIcon } from '@wordpress/icons';
+import { fullscreen as maximizeIcon } from '@wordpress/icons';
+import { useSelect, useDispatch } from '@wordpress/data';
 
 import HistoryUndo from './undo';
 import HistoryRedo from './redo';
 
 export default function Header() {
+  const { setIsInserterOpened } = useDispatch( 'block-editor' );
+  const isInserterOpened = useSelect((select) => select("block-editor").isInserterOpened());
+
 	return (
 		<div
 			className="block-editor__header"
 			role="region"
 			tabIndex="-1"
 		>
-      <NavigableToolbar
-        className="edit-post-header-toolbar"
-      >
+      <div>
+        { !isInserterOpened &&
+          <Button isPrimary
+            icon={ openIcon }
+            label={ 'Open Library' }
+            onClick={ () =>
+              setIsInserterOpened( true )
+            }
+          />
+        }
+        { isInserterOpened &&
+          <Button isSecondary
+            icon={ closeIcon }
+            label={ 'Close Library' }
+            onClick={ () =>
+              setIsInserterOpened( false )
+            }
+          />
+        }
         <HistoryUndo />
         <HistoryRedo />
         <Button
@@ -39,7 +61,7 @@ export default function Header() {
           onClick={() => document.querySelector('.block-editor').classList.remove('block-editor__fullscreen')}
         />
 
-      </NavigableToolbar>
+      </div>
 		</div>
 	);
 }

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

@@ -13,7 +13,7 @@ function HistoryRedo( { hasRedo, redo, ...props } ) {
 			{ ...props }
 			icon={ redoIcon }
 			label={ __( 'Redo' ) }
-			shortcut={ displayShortcut.primary( 'x' ) }
+			shortcut={ displayShortcut.primaryShift( 'z' ) }
 			// 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

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

@@ -1,14 +1,15 @@
 .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;
+  padding: 0 .5rem;
+  align-items: center;
+  background: $white;
+  border-bottom: 1px solid $gray-200;
+  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/media-upload/index.js

@@ -20,12 +20,12 @@ class MediaUpload extends Component {
   }
 
   openUploader() {
-    if (window.MediaUploader == undefined) {
-      console.log('window.MediaUploader undefined. Pulling in random image from Unsplash')
+    if (window.BlockEditorMediaUploader == undefined) {
+      console.warn('window.BlockEditorMediaUploader undefined. Pulling in random image from Unsplash')
 
       this.props.onSelect( { url: 'https://source.unsplash.com/random/800x500' });
     } else {
-      this.MediaUploader.open(this.props.onSelect);
+      window.BlockEditorMediaUploader.open(this.props.onSelect);
     }
   }
 

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

@@ -19,9 +19,7 @@ function Sidebar() {
 			aria-label={ __( 'Standalone Block Editor advanced settings.' ) }
 			tabIndex="-1"
 		>
-			<Panel header={ __( 'Inspector' ) }>
-				<InspectorSlot bubblesVirtually />
-			</Panel>
+      <InspectorSlot bubblesVirtually />
 		</div>
 	);
 }

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

@@ -1,43 +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");
+  background: $white;
+  border-left: $border-width solid $gray-200;
+  bottom: 0;
+  height: 100vh;
+  overflow: hidden;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: $sidebar-width;
+  margin-bottom: 33px;
+  //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-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-medium() {
+    // 	top: $admin-bar-height + $header-height;
+  // }
 
-	@include break-small() {
-		display: block;
-	}
+  @include break-small() {
+    display: block;
+  }
 
-	> .components-panel {
-		border-left: 0;
-		border-right: 0;
-		margin-bottom: -1px;
-		margin-top: -1px;
+  > .components-panel {
+    border-left: 0;
+    border-right: 0;
+    margin-bottom: -1px;
+    margin-top: -1px;
 
-		> .components-panel__header {
-			background: $light-gray-200;
-		}
-	}
+    > .components-panel__header {
+      background: $gray-200;
+    }
+  }
 
-	.block-editor-block-inspector__card {
-		margin: 0;
-	}
+  .block-editor-block-inspector__card {
+    margin: 0;
+  }
 }

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

@@ -6,6 +6,18 @@ import {
 } from "./action-types";
 import { ActionCreators as ReduxUndo } from "redux-undo";
 
+/**
+ * Returns an action object used to open/close the inserter.
+ *
+ * @param {boolean} value A boolean representing whether the inserter should be opened or closed.
+ * @return {Object} Action object.
+ */
+export function setIsInserterOpened( value ) {
+	return {
+		type: 'SET_IS_INSERTER_OPENED',
+		value,
+	};
+}
 
 export function undo() {
 	return ReduxUndo.undo();

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

@@ -1,3 +1,5 @@
+import { combineReducers } from '@wordpress/data';
+
 import undoable, { groupByActionTypes, includeAction } from "redux-undo";
 import { UPDATE_BLOCKS, PERSIST_BLOCKS } from "./action-types";
 
@@ -15,6 +17,24 @@ function blocksReducer(state = [], action) {
 	return state;
 }
 
-export default undoable(blocksReducer, {
-	filter: includeAction(PERSIST_BLOCKS),
-});
+
+/**
+ * Reducer tracking whether the inserter is open.
+ *
+ * @param {boolean} state
+ * @param {Object}  action
+ */
+function isInserterOpened( state = false, action ) {
+	switch ( action.type ) {
+		case 'SET_IS_INSERTER_OPENED':
+			return action.value;
+	}
+	return state;
+}
+
+export default combineReducers( {
+  isInserterOpened: isInserterOpened,
+  history: undoable(blocksReducer, {
+    filter: includeAction('PERSIST_BLOCKS')
+  })
+} );

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

@@ -1,13 +1,24 @@
 import { createRegistrySelector } from '@wordpress/data';
 
 export const getBlocks = ( state ) => {
-	return state.present.blocks || [];
+	return state.history.present.blocks || [];
+}
+
+/**
+ * Returns true if the inserter is opened.
+ *
+ * @param  {Object}  state Global application state.
+ *
+ * @return {boolean} Whether the inserter is opened.
+ */
+export function isInserterOpened( state ) {
+	return state.isInserterOpened;
 }
 
 export const hasUndo = (state) => {
-	return state.past?.length;
+	return state.history.past?.length;
 };
 
 export const hasRedo = (state) => {
-	return state.future?.length;
+	return state.history.future?.length;
 };

data/app/javascript/controllers/block_editor_controller.jsx

@@ -16,14 +16,21 @@ export default class extends Controller {
 
   connect() {
     const settings = {
-      imageSizes: false,
-      disableCustomFontSizes: true,
-      fontSizes: false,
-      disableCustomColors: true,
-      colors: false,
-      disableCustomGradients: true,
-      __experimentalDisableDropCap: true,
-      __experimentalDisableCustomLineHeight: true,
+      alignWide: true,
+      __experimentalFeatures: {
+        global: {
+          color: {
+            custom: false,
+            palette: [],
+            gradients: []
+          },
+          typography: {
+            dropCap: false,
+            fontSizes: false,
+            customLineHeight: false
+          }
+        }
+      },
       mediaUpload:  function uploadMedia( {
         allowedTypes,
         additionalData = {},

data/app/javascript/controllers/index.js

@@ -1,3 +1,5 @@
+window.wp = null
+
 import { Application } from "stimulus"
 import { definitionsFromContext } from "stimulus/webpack-helpers"
 

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

@@ -1,12 +1,4 @@
-$primary-color: #1b8ecf;
-
-@function theme($selector) {
-  @return $primary-color;
-}
-
-@function color($color) {
-  @return $color;
-}
+@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700&display=swap');
 
 @import "~@wordpress/base-styles/colors";
 @import "~@wordpress/base-styles/variables";
@@ -15,13 +7,8 @@ $primary-color: #1b8ecf;
 @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/interface/src/style";
 @import "~@wordpress/block-editor/src/style";
 @import "~@wordpress/block-library/src/style";
 
@@ -32,26 +19,68 @@ $header-height: 50px;
 @import "../../block_editor/components/header/styles";
 @import "../../block_editor/components/block-editor/styles";
 
+.block-editor-block-list__layout.is-root-container {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
 .block-editor {
   @include reset;
   position: relative;
   margin: 1rem 0;
   padding: 0;
-  font-family: $default-font;
-  font-size: $default-font-size;
+  font-family: $editor-font;
+  font-size: $editor-font-size;
+  line-height: $editor-line-height;
   border: 1px solid #f3f4f5;
-  min-height: 500px;
+  height: 500px;
+  overflow-y: hidden;
 
   a,
   div {
     outline: 0;
   }
 
+  label {
+    font-size: $default-font-size;
+  }
+
+  .editor-styles-wrapper {
+    font-family: $default-font;
+    font-size: $default-font-size;
+  }
+
+  [type='text'], [type='password'], [type='date'], [type='datetime'], [type='datetime-local'], [type='month'], [type='week'], [type='email'], [type='number'], [type='search'], [type='tel'], [type='time'], [type='url'], [type='color'], textarea {
+    margin-bottom: 0;
+  }
+
+  @include admin-scheme(#1b8ecf);
+
+  .block-editor-inserter__main-area {
+    padding-bottom: 2rem;
+  }
+
   .block-editor-url-popover__additional-controls,
   .block-editor-media-replace-flow__options .components-form-file-upload {
     display: none;
   }
 
+  .components-dropdown-menu__toggle[aria-label="Change alignment"] {
+    display: none !important;
+  }
+
+  .components-toolbar-button[aria-label="Crop"] {
+    display: none !important;
+  }
+
+  .block-editor-block-mover__move-button-container {
+    display: inline-flex;
+  }
+
+  .block-editor-inserter__manage-reusable-blocks {
+    display: none;
+  }
+
   &:not(.block-editor__fullscreen) {
     .block-editor__size-toggle-button__minimize {
       display: none;
@@ -80,6 +109,7 @@ $header-height: 50px;
     padding: 0;
     z-index: 99;
     margin: 0;
+    height: unset;
     .block-editor {
       height: 100%;
     }
@@ -97,12 +127,26 @@ html.wp-toolbar {
   @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;
+.interface-interface {
+  &-skeleton {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: white;
+    &__footer {
+      position: inherit;
+      .block-editor-block-breadcrumb {
+        position: absolute;
+        bottom: 0;
+        z-index: 1;
+        background-color: $white;
+        width: 100%;
+        border-top: 1px solid #f3f4f5;
+        padding: 1rem 0;
+      }
+    }
+    &__sidebar {
+      width: 280px;
+    }
+  }
 }