@wordpress/block-editor 7.0.1 → 8.0.0

package/src/components/inserter/reusable-blocks-tab.native.js

@@ -8,19 +8,17 @@ import { useSelect } from '@wordpress/data';
  */
 import BlockTypesList from '../block-types-list';
 import { store as blockEditorStore } from '../../store';
-
-const REUSABLE_BLOCKS_CATEGORY = 'reusable';
+import { filterInserterItems } from './utils';
 
 function ReusableBlocksTab( { onSelect, rootClientId, listProps } ) {
 	const { items } = useSelect(
 		( select ) => {
 			const { getInserterItems } = select( blockEditorStore );
 			const allItems = getInserterItems( rootClientId );
-			const reusableBlockItems = allItems.filter(
-				( { category } ) => category === REUSABLE_BLOCKS_CATEGORY
-			);
 
-			return { items: reusableBlockItems };
+			return {
+				items: filterInserterItems( allItems, { onlyReusable: true } ),
+			};
 		},
 		[ rootClientId ]
 	);

package/src/components/inserter/search-results.native.js

@@ -11,19 +11,25 @@ import BlockTypesList from '../block-types-list';
 import InserterNoResults from './no-results';
 import { store as blockEditorStore } from '../../store';
 import useBlockTypeImpressions from './hooks/use-block-type-impressions';
+import { filterInserterItems } from './utils';
 
 function InserterSearchResults( {
 	filterValue,
 	onSelect,
 	listProps,
 	rootClientId,
+	isFullScreen,
 } ) {
 	const { blockTypes } = useSelect(
 		( select ) => {
 			const allItems = select( blockEditorStore ).getInserterItems(
 				rootClientId
 			);
-			const filteredItems = searchItems( allItems, filterValue );
+
+			const availableItems = filterInserterItems( allItems, {
+				allowReusable: true,
+			} );
+			const filteredItems = searchItems( availableItems, filterValue );
 
 			return { blockTypes: filteredItems };
 		},
@@ -46,6 +52,7 @@ function InserterSearchResults( {
 	return (
 		<BlockTypesList
 			name="Blocks"
+			initialNumToRender={ isFullScreen ? 10 : 3 }
 			{ ...{ items, onSelect: handleSelect, listProps } }
 		/>
 	);

package/src/components/inserter/style.native.scss

@@ -8,7 +8,11 @@
 	color: $blue-30;
 }
 
-.list {
+.inserter-menu__list-wrapper {
+	flex: 1;
+}
+
+.inserter-menu__list {
 	padding-bottom: 20;
 	padding-top: 8;
 }
@@ -51,13 +55,12 @@
 
 .inserter-tabs__wrapper {
 	overflow: hidden;
+	flex: 1;
 }
 
 .inserter-tabs__container {
 	height: 100%;
 	width: 100%;
-}
-
-.inserter-tabs__item {
-	position: absolute;
+	flex: 1;
+	flex-direction: row;
 }

package/src/components/inserter/style.scss

@@ -25,19 +25,19 @@ $block-inserter-tabs-height: 44px;
 		border: none;
 
 		.block-editor-inserter__quick-inserter > * {
-			border-left: 1px solid $gray-400;
-			border-right: 1px solid $gray-400;
+			border-left: $border-width solid $gray-400;
+			border-right: $border-width solid $gray-400;
 
 			&:first-child {
-				border-top: 1px solid $gray-400;
+				border-top: $border-width solid $gray-400;
 			}
 
 			&:last-child {
-				border-bottom: 1px solid $gray-400;
+				border-bottom: $border-width solid $gray-400;
 			}
 
 			&.components-button {
-				border: 1px solid $gray-900;
+				border: $border-width solid $gray-900;
 			}
 		}
 	}
@@ -100,7 +100,7 @@ $block-inserter-tabs-height: 44px;
 
 .block-editor-inserter__search {
 	background: $white;
-	padding: $grid-unit-20;
+	padding: $grid-unit-20 $grid-unit-20 0 $grid-unit-20;
 	position: sticky;
 	top: 0;
 	z-index: z-index(".block-editor-inserter__search");
@@ -108,17 +108,20 @@ $block-inserter-tabs-height: 44px;
 	.components-search-control__icon {
 		right: $grid-unit-10 + ($grid-unit-60 - $icon-size) * 0.5;
 	}
+
+	.components-base-control__field {
+		margin-bottom: 0;
+	}
 }
 
 .block-editor-inserter__tabs {
 	display: flex;
 	flex-direction: column;
-	margin-top: -$grid-unit-10;
 
 	.components-tab-panel__tabs {
 		position: sticky;
 		// Computed based off the search input height and paddings
-		top: $grid-unit-10 + $grid-unit-20 + $grid-unit-60;
+		top: $grid-unit-20 + $grid-unit-60;
 		background: $white;
 		z-index: z-index(".block-editor-inserter__tabs .components-tab-panel__tabs");
 		border-bottom: $border-width solid $gray-300;
@@ -163,7 +166,8 @@ $block-inserter-tabs-height: 44px;
 }
 
 .block-editor-inserter__panel-dropdown select.components-select-control__input.components-select-control__input.components-select-control__input {
-	line-height: 1.2;
+	height: 36px;
+	line-height: 36px;
 }
 
 .block-editor-inserter__panel-dropdown select {
@@ -175,10 +179,6 @@ $block-inserter-tabs-height: 44px;
 	position: relative;
 }
 
-.block-editor-inserter__popover .block-editor-block-types-list {
-	margin: -8px;
-}
-
 .block-editor-inserter__reusable-blocks-panel {
 	position: relative;
 	text-align: right;
@@ -191,7 +191,6 @@ $block-inserter-tabs-height: 44px;
 
 .block-editor-inserter__no-results {
 	padding: $grid-unit-40;
-	margin-top: $grid-unit-40 * 2;
 	text-align: center;
 }
 
@@ -298,6 +297,12 @@ $block-inserter-tabs-height: 44px;
 		display: grid;
 		grid-template-columns: 1fr 1fr;
 		grid-gap: $grid-unit-10;
+		.block-editor-block-patterns-list__list-item {
+			margin-bottom: 0;
+		}
+		.block-editor-block-preview__container {
+			min-height: 100px;
+		}
 	}
 }
 
@@ -325,7 +330,66 @@ $block-inserter-tabs-height: 44px;
 		color: $gray-400;
 	}
 
-	&:focus:not(:disabled) {
-		box-shadow: inset 0 0 0 1.5px var(--wp-admin-theme-color), inset 0 0 0 3px #fff;
+	// Specificity is needed for the border color.
+	&.components-button:focus:not(:disabled) {
+		box-shadow: none;
+		background: var(--wp-admin-theme-color);
+		border-color: var(--wp-admin-theme-color);
+	}
+}
+
+.block-editor-block-patterns-explorer {
+	&__sidebar {
+		position: absolute;
+		top: $header-height;
+		left: 0;
+		bottom: 0;
+		width: $sidebar-width;
+		padding: $grid-unit-30 $grid-unit-40 $grid-unit-40;
+		overflow-x: visible;
+		overflow-y: scroll;
+
+		&__categories-list__item {
+			display: block;
+			width: 100%;
+			height: 48px;
+			text-align: left;
+		}
+	}
+
+	&__search {
+		margin-bottom: $grid-unit-40;
+	}
+
+	&__search-results-count {
+		padding-bottom: $grid-unit-40;
+	}
+
+	&__list {
+		margin-left: $sidebar-width - $grid-unit-40;
+	}
+
+	.block-editor-block-patterns-list {
+		display: grid;
+		grid-gap: $grid-unit-40;
+		grid-template-columns: repeat(1, 1fr);
+
+		@include break-xlarge() {
+			grid-template-columns: repeat(2, 1fr);
+		}
+
+		@include break-huge() {
+			grid-template-columns: repeat(3, 1fr);
+		}
+
+		.block-editor-block-patterns-list__list-item {
+			min-height: 240px;
+		}
+
+		.block-editor-block-preview__container {
+			height: inherit;
+			min-height: 100px;
+			max-height: 800px;
+		}
 	}
 }

package/src/components/inserter/tabs.native.js

@@ -100,13 +100,7 @@ function InserterTabs( {
 		>
 			<Animated.View style={ containerStyle }>
 				{ tabs.map( ( { component: TabComponent }, index ) => (
-					<View
-						key={ `tab-${ index }` }
-						style={ [
-							styles[ 'inserter-tabs__item' ],
-							{ left: index * wrapperWidth },
-						] }
-					>
+					<View key={ `tab-${ index }` }>
 						<TabComponent
 							rootClientId={ rootClientId }
 							onSelect={ onSelect }

package/src/components/inserter/test/block-types-tab.native.js

@@ -24,7 +24,7 @@ const selectMock = {
 	canInsertBlockType: jest.fn(),
 	getBlockType: jest.fn(),
 	getClipboard: jest.fn(),
-	getSettings: jest.fn( () => ( {} ) ),
+	getSettings: jest.fn( () => ( { impressions: {} } ) ),
 };
 
 describe( 'BlockTypesTab component', () => {
@@ -49,7 +49,8 @@ describe( 'BlockTypesTab component', () => {
 		selectMock.getInserterItems.mockReturnValue( items );
 
 		const blockItems = items.filter(
-			( { category } ) => category !== 'reusable'
+			( { id, category } ) =>
+				category !== 'reusable' && id !== 'core-embed/a-paragraph-embed'
 		);
 		const component = shallow(
 			<BlockTypesTab

package/src/components/inserter/test/fixtures/index.native.js

@@ -0,0 +1,12 @@
+/**
+ * Internal dependencies
+ */
+import fixtures from './index.js';
+
+export * from './index';
+
+export default fixtures.map( ( filteredItems ) => ( {
+	...filteredItems,
+	// Set `isNew` property expected from block type impressions
+	isNew: false,
+} ) );

package/src/components/inserter/utils.native.js

@@ -0,0 +1,35 @@
+const REUSABLE_BLOCKS_CATEGORY = 'reusable';
+const ALLOWED_EMBED_VARIATIONS = [
+	'core/embed',
+	'core/embed/youtube',
+	'core/embed/twitter',
+	'core/embed/wordpress',
+	'core/embed/instagram',
+	'core/embed/vimeo',
+];
+
+export function blockAllowed( block, { onlyReusable, allowReusable } ) {
+	const { id, category } = block;
+	const isReusable = category === REUSABLE_BLOCKS_CATEGORY;
+
+	if ( onlyReusable ) {
+		return isReusable;
+	}
+
+	if ( isReusable ) {
+		return allowReusable;
+	}
+	// We don't want to show all possible embed variations
+	// as different blocks in the inserter. We'll only show a
+	// few popular ones.
+	return category !== 'embed' || ALLOWED_EMBED_VARIATIONS.includes( id );
+}
+
+export function filterInserterItems(
+	items,
+	{ onlyReusable = false, allowReusable = false } = {}
+) {
+	return items.filter( ( block ) =>
+		blockAllowed( block, { onlyReusable, allowReusable } )
+	);
+}

package/src/components/inserter-list-item/style.scss

@@ -18,7 +18,6 @@
 	background: transparent;
 	word-break: break-word;
 	border-radius: $radius-block-ui;
-	border: $border-width solid transparent;
 	transition: all 0.05s ease-in-out;
 	@include reduce-motion("transition");
 	position: relative;
@@ -31,10 +30,13 @@
 
 	&:not(:disabled) {
 		&:hover {
-			border-color: var(--wp-admin-theme-color);
 			color: var(--wp-admin-theme-color) !important;
 		}
 
+		&:focus {
+			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		}
+
 		&.is-active {
 			color: $white;
 			background: $gray-900;

package/src/components/inspector-controls/README.md

@@ -6,201 +6,6 @@ Inspector Controls appear in the post settings sidebar when a block is being edi
 
 ## Usage
 
-{% codetabs %}
-{% ES5 %}
-
-```js
-var el = wp.element.createElement,
-	Fragment = wp.element.Fragment,
-	registerBlockType = wp.blocks.registerBlockType,
-	RichText = wp.editor.RichText,
-	InspectorControls = wp.blockEditor.InspectorControls,
-	useBlockProps = wp.blockEditor.useBlockProps,
-	CheckboxControl = wp.components.CheckboxControl,
-	RadioControl = wp.components.RadioControl,
-	TextControl = wp.components.TextControl,
-	ToggleControl = wp.components.ToggleControl,
-	SelectControl = wp.components.SelectControl,
-	PanelBody = wp.components.PanelBody;
-
-registerBlockType( 'my-plugin/inspector-controls-example', {
-	apiVersion: 2,
-
-	title: 'Inspector controls example',
-
-	icon: 'universal-access-alt',
-
-	category: 'design',
-
-	attributes: {
-		content: {
-			type: 'string',
-			source: 'html',
-			selector: 'p',
-		},
-		checkboxField: {
-			type: 'boolean',
-			default: true,
-		},
-		radioField: {
-			type: 'string',
-			default: 'yes',
-		},
-		textField: {
-			type: 'string',
-		},
-		toggleField: {
-			type: 'boolean',
-		},
-		selectField: {
-			type: 'string',
-		},
-	},
-
-	edit: function ( props ) {
-		var blockProps = useBlockProps();
-
-		var content = props.attributes.content,
-			checkboxField = props.attributes.checkboxField,
-			radioField = props.attributes.radioField,
-			textField = props.attributes.textField,
-			toggleField = props.attributes.toggleField,
-			selectField = props.attributes.selectField;
-
-		function onChangeContent( newContent ) {
-			props.setAttributes( { content: newContent } );
-		}
-
-		function onChangeCheckboxField( newValue ) {
-			props.setAttributes( { checkboxField: newValue } );
-		}
-
-		function onChangeRadioField( newValue ) {
-			props.setAttributes( { radioField: newValue } );
-		}
-
-		function onChangeTextField( newValue ) {
-			props.setAttributes( { textField: newValue } );
-		}
-
-		function onChangeToggleField( newValue ) {
-			props.setAttributes( { toggleField: newValue } );
-		}
-
-		function onChangeSelectField( newValue ) {
-			props.setAttributes( { selectField: newValue } );
-		}
-
-		return el(
-			Fragment,
-			null,
-			el(
-				InspectorControls,
-				null,
-				el(
-					PanelBody, 
-					{
-						title: 'Settings',
-					},
-					el( CheckboxControl, {
-						heading: 'Checkbox Field',
-						label: 'Tick Me',
-						help: 'Additional help text',
-						checked: checkboxField,
-						onChange: onChangeCheckboxField,
-					} ),
-					el( RadioControl, {
-						label: 'Radio Field',
-						selected: radioField,
-						options: [
-							{
-								label: 'Yes',
-								value: 'yes',
-							},
-							{
-								label: 'No',
-								value: 'no',
-							},
-						],
-						onChange: onChangeRadioField,
-					} ),
-					el( TextControl, {
-						label: 'Text Field',
-						help: 'Additional help text',
-						value: textField,
-						onChange: onChangeTextField,
-					} ),
-					el( ToggleControl, {
-						label: 'Toggle Field',
-						checked: toggleField,
-						onChange: onChangeToggleField,
-					} ),
-					el( SelectControl, {
-						label: 'Select Field',
-						value: selectField,
-						options: [
-							{
-								value: 'a',
-								label: 'Option A',
-							},
-							{
-								value: 'b',
-								label: 'Option B',
-							},
-							{
-								value: 'c',
-								label: 'Option C',
-							},
-						],
-						onChange: onChangeSelectField,
-					} )
-				)
-			),
-			el(
-				RichText,
-				Object.assing( blockProps, {
-					key: 'editable',
-					tagName: 'p',
-					onChange: onChangeContent,
-					value: content,
-				} )
-			)
-		);
-	},
-
-	save: function ( props ) {
-		var blockProps = useBlockProps.save();
-		var content = props.attributes.content,
-			checkboxField = props.attributes.checkboxField,
-			radioField = props.attributes.radioField,
-			textField = props.attributes.textField,
-			toggleField = props.attributes.toggleField,
-			selectField = props.attributes.selectField;
-
-		return el(
-			'div',
-			blockProps,
-			el( RichText.Content, {
-				value: content,
-				tagName: 'p',
-			} ),
-			el( 'h2', null, 'Inspector Control Fields' ),
-			el(
-				'ul',
-				null,
-				el( 'li', null, 'Checkbox Field: ', checkboxField ),
-				el( 'li', null, 'Radio Field: ', radioField ),
-				el( 'li', null, 'Text Field: ', textField ),
-				el( 'li', null, 'Toggle Field: ', toggleField ),
-				el( 'li', null, 'Select Field: ', selectField )
-			)
-		);
-	},
-} );
-```
-
-{% ESNext %}
-
 ```js
 import { registerBlockType } from '@wordpress/blocks';
 import {
@@ -209,7 +14,7 @@ import {
 	TextControl,
 	ToggleControl,
 	SelectControl,
-	PanelBody
+	PanelBody,
 } from '@wordpress/components';
 import {
 	RichText,
@@ -289,7 +94,7 @@ registerBlockType( 'my-plugin/inspector-controls-example', {
 		return (
 			<>
 				<InspectorControls>
-					<PanelBody title={__('Settings')}>
+					<PanelBody title={ __( 'Settings' ) }>
 						<CheckboxControl
 							heading="Checkbox Field"
 							label="Tick Me"
@@ -374,4 +179,44 @@ registerBlockType( 'my-plugin/inspector-controls-example', {
 } );
 ```
 
-{% end %}
+## InspectorAdvancedControls
+
+<img src="https://user-images.githubusercontent.com/150562/94028603-df90bf00-fdb3-11ea-9e6f-eb15c5631d85.png" width="280" alt="inspector-advanced-controls">
+
+Inspector Advanced Controls appear under the _Advanced_ panel of a block's [InspectorControls](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inspector-controls/README.md) -- that is, they appear as a specific set of controls within a block's settings panels. As the name suggests, `InspectorAdvancedControls` is meant for controls that most users aren't meant to interact with most of the time, such as adding an HTML anchor or custom CSS classes to a block.
+
+### Usage
+
+```js
+import {
+	TextControl,
+} from '@wordpress/components';
+import {
+	InspectorControls,
+	InspectorAdvancedControls,
+} from '@wordpress/block-editor';
+
+function MyBlockEdit( { attributes, setAttributes } ) {
+	return (
+		<>
+			<div>
+				{ /* Block markup goes here */ }
+			</div
+			<InspectorControls>
+				{ /* Regular control goes here */
+			</InspectorControls>
+			<InspectorAdvancedControls>
+				<TextControl
+					label="HTML anchor"
+					value={ attributes.anchor }
+					onChange={ ( nextValue ) => {
+						setAttributes( {
+							anchor: nextValue,
+						} );
+					} }
+				/>
+			</InspectorAdvancedControls>
+		</>
+	);
+}
+```

package/src/components/inspector-controls/block-support-slot-container.js

@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalToolsPanelContext as ToolsPanelContext } from '@wordpress/components';
+import { useContext } from '@wordpress/element';
+
+export default function BlockSupportSlotContainer( { Slot, ...props } ) {
+	const toolsPanelContext = useContext( ToolsPanelContext );
+	return <Slot { ...props } fillProps={ toolsPanelContext } />;
+}

package/src/components/inspector-controls/block-support-tools-panel.js

@@ -0,0 +1,60 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalToolsPanel as ToolsPanel } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { cleanEmptyObject } from '../../hooks/utils';
+
+export default function BlockSupportToolsPanel( { children, group, label } ) {
+	const { clientId, attributes } = useSelect( ( select ) => {
+		const { getBlockAttributes, getSelectedBlockClientId } = select(
+			blockEditorStore
+		);
+		const selectedBlockClientId = getSelectedBlockClientId();
+
+		return {
+			clientId: selectedBlockClientId,
+			attributes: getBlockAttributes( selectedBlockClientId ),
+		};
+	}, [] );
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+
+	const resetAll = ( resetFilters = [] ) => {
+		const { style } = attributes;
+		let newAttributes = { style };
+
+		resetFilters.forEach( ( resetFilter ) => {
+			newAttributes = {
+				...newAttributes,
+				...resetFilter( newAttributes ),
+			};
+		} );
+
+		// Enforce a cleaned style object.
+		newAttributes = {
+			...newAttributes,
+			style: cleanEmptyObject( newAttributes.style ),
+		};
+
+		updateBlockAttributes( clientId, newAttributes );
+	};
+
+	return (
+		<ToolsPanel
+			className={ `${ group }-block-support-panel` }
+			label={ label }
+			resetAll={ resetAll }
+			key={ clientId }
+			panelId={ clientId }
+			hasInnerWrapper={ true }
+			shouldRenderPlaceholderItems={ true } // Required to maintain fills ordering.
+		>
+			{ children }
+		</ToolsPanel>
+	);
+}