Fix basic editor styling

packages/block-editor/src/components/rich-text/format-toolbar/index.js

@@ -19,7 +19,7 @@ const FormatToolbar = ( { controls } ) => {
 					<Slot name={ `RichText.ToolbarControls.${ format }` } key={ format } />
 				) }
 				<Slot name="RichText.ToolbarControls">
-					{ ( fills ) => fills.length &&
+					{ ( fills ) => fills.length !== 0 &&
 						<DropdownMenu
 							icon={ false }
 							position="bottom left"

playground/src/common.scss

@@ -0,0 +1,201 @@
+@import "../../assets/stylesheets/colors";
+@import "../../assets/stylesheets/variables";
+@import "../../assets/stylesheets/mixins";
+@import "../../assets/stylesheets/breakpoints";
+@import "../../assets/stylesheets/animations";
+@import "../../assets/stylesheets/z-index";
+
+// TODO: screen reader text className should be replaced
+// with a component in the a11y package.
+.screen-reader-text {
+	border: 0;
+	clip: rect(1px, 1px, 1px, 1px);
+	-webkit-clip-path: inset(50%);
+	clip-path: inset(50%);
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute;
+	width: 1px;
+	word-wrap: normal !important;
+}
+
+// TODO: Extract these WP Global styles to a mixin
+// We can't apply these globally to html or body at the moment because of the WP sidebar/menu
+:root {
+	box-sizing: border-box;
+
+	*,
+	*::before,
+	*::after {
+		box-sizing: inherit;
+	}
+
+	select {
+		font-size: $default-font-size;
+		color: $dark-gray-500;
+	}
+
+	.input-control, // Upstream name is `.regular-text`.
+	input[type="text"],
+	input[type="search"],
+	input[type="radio"],
+	input[type="tel"],
+	input[type="time"],
+	input[type="url"],
+	input[type="week"],
+	input[type="password"],
+	input[type="checkbox"],
+	input[type="color"],
+	input[type="date"],
+	input[type="datetime"],
+	input[type="datetime-local"],
+	input[type="email"],
+	input[type="month"],
+	input[type="number"],
+	select,
+	textarea {
+		font-family: $default-font;
+		padding: 6px 8px;
+		@include input-style__neutral();
+
+		/* Fonts smaller than 16px causes mobile safari to zoom. */
+		font-size: $mobile-text-min-font-size;
+		@include break-small {
+			font-size: $default-font-size;
+		}
+
+		&:focus {
+			@include input-style__focus();
+		}
+	}
+
+	input[type="number"] {
+		padding-left: 4px;
+		padding-right: 4px;
+	}
+
+	select {
+		padding: 2px;
+
+		&:focus {
+			border-color: $blue-medium-600;
+			// Windows High Contrast mode will show this outline
+			outline: 2px solid transparent;
+			outline-offset: 0;
+		}
+	}
+
+	input[type="checkbox"],
+	input[type="radio"] {
+		border: $border-width + 1 solid $dark-gray-300;
+		margin-right: 12px;
+		transition: none;
+
+		&:focus {
+			border-color: $dark-gray-300;
+			box-shadow: 0 0 0 1px $dark-gray-300;
+		}
+
+		&:checked {
+			background: theme(toggle);
+			border-color: theme(toggle);
+		}
+
+		&:checked:focus {
+			box-shadow: 0 0 0 2px $dark-gray-500;
+		}
+	}
+
+	input[type="checkbox"] {
+		border-radius: $radius-round-rectangle / 2;
+
+		&:checked::before,
+		&[aria-checked="mixed"]::before {
+			margin: -3px -5px;
+			color: $white;
+
+			@include break-medium() {
+				margin: -4px 0 0 -5px;
+			}
+		}
+
+		&[aria-checked="mixed"] {
+			background: theme(toggle);
+			border-color: theme(toggle);
+
+			&::before {
+				// Inherited from `forms.css`.
+				// See: https://github.com/WordPress/wordpress-develop/tree/5.1.1/src/wp-admin/css/forms.css#L122-L132
+				content: "\f460";
+				float: left;
+				display: inline-block;
+				vertical-align: middle;
+				width: 16px;
+				/* stylelint-disable */
+				font: normal 30px/1 dashicons;
+				/* stylelint-enable */
+				speak: none;
+				-webkit-font-smoothing: antialiased;
+				-moz-osx-font-smoothing: grayscale;
+
+				@include break-medium() {
+					float: none;
+					font-size: 21px;
+				}
+			}
+
+			&:focus {
+				box-shadow: 0 0 0 2px $dark-gray-500;
+			}
+		}
+	}
+
+	input[type="radio"] {
+		border-radius: $radius-round;
+
+		&:checked::before {
+			margin: 3px 0 0 3px;
+			background-color: $white;
+		}
+	}
+
+	// Placeholder colors
+	input,
+	textarea {
+		// Use opacity to work in various editor styles.
+		&::-webkit-input-placeholder {
+			color: $dark-opacity-300;
+		}
+
+		&::-moz-placeholder {
+			opacity: 1; // Necessary because Firefox reduces this from 1.
+			color: $dark-opacity-300;
+		}
+
+		&:-ms-input-placeholder {
+			color: $dark-opacity-300;
+		}
+
+		.is-dark-theme & {
+			&::-webkit-input-placeholder {
+				color: $light-opacity-300;
+			}
+
+			&::-moz-placeholder {
+				opacity: 1; // Necessary because Firefox reduces this from 1.
+				color: $light-opacity-300;
+			}
+
+			&:-ms-input-placeholder {
+				color: $light-opacity-300;
+			}
+		}
+	}
+}
+
+a,
+div {
+	outline: 0;
+}

playground/src/editor-styles.scss

@@ -0,0 +1,51 @@
+.editor-styles-wrapper {
+	font-family: $editor-font;
+	font-size: $editor-font-size;
+	line-height: $editor-line-height;
+	color: $dark-gray-900;
+
+	p {
+		font-size: inherit;
+		line-height: inherit;
+	}
+
+	ul,
+	ol {
+		margin: 0;
+		padding: 0;
+	}
+
+	ul li,
+	ol li {
+		// This overrides a bottom margin globally applied to list items in wp-admin.
+		margin-bottom: initial;
+	}
+
+	ul {
+		list-style-type: disc;
+	}
+
+	ol {
+		list-style-type: decimal;
+	}
+
+	ul ul,
+	ol ul {
+		list-style-type: circle;
+	}
+
+	// These are default editor styles
+	.wp-block {
+		max-width: 700px;
+
+		// TODO: the default padding/margin of the block editor content are not set properly
+		margin-left: auto;
+		margin-right: auto;
+	}
+	.wp-block[data-align="wide"] {
+		max-width: 1100px;
+	}
+	.wp-block[data-align="full"] {
+		max-width: none;
+	}
+}

playground/src/index.js

@@ -18,30 +18,44 @@ import { render, useState } from '@wordpress/element';
 import {
 	BlockEditorProvider,
 	BlockList,
-	Inserter,
+	WritingFlow,
+	ObserveTyping,
 } from '@wordpress/block-editor';
+import { Popover } from '@wordpress/components';
 import { registerCoreBlocks } from '@wordpress/block-library';
+import '@wordpress/format-library';
 
 /**
- * Styles
+ * Internal dependencies
  */
+import './style.scss';
+
 /* eslint-disable no-restricted-syntax */
 import '@wordpress/components/build-style/style.css';
 import '@wordpress/block-editor/build-style/style.css';
 import '@wordpress/block-library/build-style/style.css';
 import '@wordpress/block-library/build-style/editor.css';
 import '@wordpress/block-library/build-style/theme.css';
+import '@wordpress/format-library/build-style/style.css';
 /* eslint-enable no-restricted-syntax */
 
 function App() {
 	const [ blocks, updateBlocks ] = useState( [] );
 
 	return (
 		<BlockEditorProvider
-			value={ blocks } onInput={ updateBlocks } onChange={ updateBlocks }
+			value={ blocks }
+			onInput={ updateBlocks }
+			onChange={ updateBlocks }
 		>
-			<BlockList />
-			<Inserter />
+			<div className="editor-styles-wrapper">
+				<WritingFlow>
+					<ObserveTyping>
+						<BlockList />
+					</ObserveTyping>
+				</WritingFlow>
+			</div>
+			<Popover.Slot />
 		</BlockEditorProvider>
 	);
 }

playground/src/style.scss

@@ -0,0 +1,19 @@
+@import "./common.scss";
+@import "./editor-styles.scss";
+
+#app {
+	padding-top: 20px;
+
+	img {
+		max-width: 100%;
+		height: auto;
+	}
+
+	iframe {
+		width: 100%;
+	}
+
+	.components-navigate-regions {
+		height: 100%;
+	}
+}