A unique identifier for a block type, consisting of a plugin-specific namespace and a short label describing the block's intent. e.g. core/image
-
Block patterns
-
Block patterns are predefined layouts of blocks that can be inserted as starter content that are meant to be changed by the user every time. Once inserted, they exist as a local save and are not global.
+
Patterns
+
Patterns are predefined layouts of blocks that can be inserted as starter content that are meant to be changed by the user every time. Once inserted, they exist as a local save and are not global.
Block type
In contrast with the blocks composing a particular post, a block type describes the blueprint by which any block of that type should behave. So while there may be many images within a post, each behaves consistent with a unified image block type definition.
diff --git a/lib/client-assets.php b/lib/client-assets.php
index 609627dc1e3ed..32b92c7bdbde6 100644
--- a/lib/client-assets.php
+++ b/lib/client-assets.php
@@ -636,7 +636,7 @@ function gutenberg_load_block_pattern( $name ) {
}
/**
- * Extends block editor settings to include a list of default block patterns.
+ * Extends block editor settings to include a list of default patterns.
*
* @param array $settings Default editor settings.
*
diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
index 1d33712cc44e6..8935761075ed9 100644
--- a/packages/base-styles/_variables.scss
+++ b/packages/base-styles/_variables.scss
@@ -38,6 +38,7 @@ $grid-unit-60: 6 * $grid-unit; // 48px
* Dimensions.
*/
+$icon-size: 24px;
$button-size: 36px;
$button-size-small: 24px;
$panel-padding: 16px;
diff --git a/packages/block-directory/src/components/downloadable-block-list-item/style.scss b/packages/block-directory/src/components/downloadable-block-list-item/style.scss
index b32b58356c4fd..84521724a1da0 100644
--- a/packages/block-directory/src/components/downloadable-block-list-item/style.scss
+++ b/packages/block-directory/src/components/downloadable-block-list-item/style.scss
@@ -10,7 +10,7 @@
justify-content: center;
background: transparent;
word-break: break-word;
- border-radius: $radius-round-rectangle;
+ border-radius: $radius-block-ui;
border: $border-width solid $light-gray-500;
transition: all 0.05s ease-in-out;
@include reduce-motion("transition");
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index c6a7caeee341b..f7dc606b69cb1 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -1,3 +1,8 @@
+.block-editor-block-list__block {
+ margin-left: auto;
+ margin-right: auto;
+}
+
.block-editor-block-list__layout .block-editor-block-list__block { // Needs specificity to override inherited styles.
// While block is being dragged, dim the slot dragged from, and hide some UI.
&.is-dragging {
@@ -608,6 +613,8 @@
// The purpose of this padding is to ensure that on small viewports, there is
// room for the block border that sits 14px ($block-padding) offset from the
// block footprint.
+// These paddings and margins are removed from the BlockPreview component's style
+// Any change need to be reflected there.
.block-editor-block-list__layout.is-root-container {
padding-left: $block-padding;
padding-right: $block-padding;
@@ -616,9 +623,7 @@
padding-left: $block-side-ui-width;
padding-right: $block-side-ui-width;
}
-}
-.block-editor-block-list__layout.is-root-container {
// Full-wide. (to account for the padddings added above)
// The first two rules account for the alignment wrapper div for the image block.
> div:not(.block-editor-block-list__block) > .block-editor-block-list__block[data-align="full"],
diff --git a/packages/block-editor/src/components/block-patterns/style.scss b/packages/block-editor/src/components/block-patterns/style.scss
deleted file mode 100644
index 3d668004212c9..0000000000000
--- a/packages/block-editor/src/components/block-patterns/style.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-.block-editor-patterns {
- background: $light-gray-200;
- padding: $grid-unit-20;
-}
-
-.block-editor-patterns__item {
- background: $white;
- border-radius: $radius-block-ui;
-
- &.is-placeholder .block-editor-patterns__item-preview {
- min-height: 100px;
- }
-}
-
-.block-editor-patterns__item {
- border-radius: $radius-block-ui;
- cursor: pointer;
- margin-bottom: $grid-unit-20;
- border: 1px solid $light-gray-500;
- transition: all 0.05s ease-in-out;
- position: relative;
-
- &:hover {
- background: $white;
- box-shadow: 0 0 0 1px $white, 0 0 0 3px $dark-gray-500;
- }
-
- &:focus {
- box-shadow: inset 0 0 0 1px $white, 0 0 0 $border-width-focus $theme-color;
-
- // Windows High Contrast mode will show this outline, but not the box-shadow.
- outline: 2px solid transparent;
- }
-}
-
-.block-editor-patterns__item-title {
- text-align: center;
- padding: 10px 0;
- padding: $grid-unit-20;
-}
diff --git a/packages/block-editor/src/components/block-preview/auto.js b/packages/block-editor/src/components/block-preview/auto.js
index d819680b24053..b02b362390e46 100644
--- a/packages/block-editor/src/components/block-preview/auto.js
+++ b/packages/block-editor/src/components/block-preview/auto.js
@@ -31,7 +31,6 @@ function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
aria-hidden
style={ {
height: contentHeight * scale + 2 * __experimentalPadding,
- padding: __experimentalPadding,
} }
>
{ containerResizeListener }
diff --git a/packages/block-editor/src/components/block-preview/style.scss b/packages/block-editor/src/components/block-preview/style.scss
index c6ef74f6c28b6..1d0df3962fd74 100644
--- a/packages/block-editor/src/components/block-preview/style.scss
+++ b/packages/block-editor/src/components/block-preview/style.scss
@@ -38,4 +38,19 @@
.block-list-appender {
display: none;
}
+
+ // Reset default editor padding
+ .block-editor-block-list__layout.is-root-container {
+ padding-left: 0;
+ padding-right: 0;
+
+ > div:not(.block-editor-block-list__block) > .block-editor-block-list__block[data-align="full"],
+ > div:not(.block-editor-block-list__block) > .block-editor-block-list__block.alignfull,
+ > .block-editor-block-list__block[data-align="full"],
+ > .block-editor-block-list__block.alignfull {
+ margin-left: 0;
+ margin-right: 0;
+ }
+ }
}
+
diff --git a/packages/block-editor/src/components/block-styles/style.scss b/packages/block-editor/src/components/block-styles/style.scss
index 0be7aab8113c9..ab720c9495d99 100644
--- a/packages/block-editor/src/components/block-styles/style.scss
+++ b/packages/block-editor/src/components/block-styles/style.scss
@@ -10,7 +10,7 @@
flex-shrink: 0;
cursor: pointer;
overflow: hidden;
- border-radius: $radius-round-rectangle;
+ border-radius: $radius-block-ui;
padding: $grid-unit-05 * 1.5;
display: flex;
flex-direction: column;
@@ -42,7 +42,7 @@
outline: $border-width solid transparent; // Shown in Windows High Contrast mode.
padding: 0;
border: $border-width solid rgba($dark-gray-primary, 0.2);
- border-radius: $radius-round-rectangle;
+ border-radius: $radius-block-ui;
display: flex;
overflow: hidden;
background: $white;
diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
index ae163f11df919..7b2414c3daf02 100644
--- a/packages/block-editor/src/components/index.js
+++ b/packages/block-editor/src/components/index.js
@@ -15,7 +15,6 @@ export { default as BlockFormatControls } from './block-format-controls';
export { default as BlockIcon } from './block-icon';
export { default as BlockNavigationDropdown } from './block-navigation/dropdown';
export { default as __experimentalBlockNavigationList } from './block-navigation/list';
-export { default as __experimentalBlockPatterns } from './block-patterns';
export { default as __experimentalBlockVariationPicker } from './block-variation-picker';
export { default as BlockVerticalAlignmentToolbar } from './block-vertical-alignment-toolbar';
export { default as ButtonBlockerAppender } from './button-block-appender';
@@ -74,6 +73,7 @@ export { default as CopyHandler } from './copy-handler';
export { default as DefaultBlockAppender } from './default-block-appender';
export { default as __unstableEditorStyles } from './editor-styles';
export { default as Inserter } from './inserter';
+export { default as __experimentalLibrary } from './inserter/library';
export { default as BlockEditorKeyboardShortcuts } from './keyboard-shortcuts';
export { default as MultiSelectScrollIntoView } from './multi-select-scroll-into-view';
export { default as NavigableToolbar } from './navigable-toolbar';
diff --git a/packages/block-editor/src/components/inserter-list-item/style.scss b/packages/block-editor/src/components/inserter-list-item/style.scss
index 00c9eae4ed38f..745caa0ed1ff7 100644
--- a/packages/block-editor/src/components/inserter-list-item/style.scss
+++ b/packages/block-editor/src/components/inserter-list-item/style.scss
@@ -2,7 +2,7 @@
display: block;
width: 33.33%;
padding: 0;
- margin: 0 0 12px;
+ margin: 0;
}
.components-button.block-editor-block-types-list__item {
@@ -11,13 +11,13 @@
width: 100%;
font-size: $default-font-size;
color: $dark-gray-700;
- padding: 0 4px;
+ padding: $grid-unit-10;
align-items: stretch;
justify-content: center;
cursor: pointer;
background: transparent;
word-break: break-word;
- border-radius: $radius-round-rectangle;
+ border-radius: $radius-block-ui;
border: $border-width solid transparent;
transition: all 0.05s ease-in-out;
@include reduce-motion("transition");
@@ -48,7 +48,7 @@
.block-editor-block-types-list__item-icon {
padding: 12px 20px;
- border-radius: $radius-round-rectangle;
+ border-radius: $radius-block-ui;
color: $dark-gray-primary;
transition: all 0.05s ease-in-out;
@include reduce-motion("transition");
@@ -66,4 +66,5 @@
.block-editor-block-types-list__item-title {
padding: 4px 2px 8px;
+ font-size: 12px;
}
diff --git a/packages/block-editor/src/components/inserter/block-list.js b/packages/block-editor/src/components/inserter/block-list.js
index acb1a68c55ee2..9bffeef1adfca 100644
--- a/packages/block-editor/src/components/inserter/block-list.js
+++ b/packages/block-editor/src/components/inserter/block-list.js
@@ -3,7 +3,6 @@
*/
import {
map,
- pick,
includes,
filter,
findIndex,
@@ -11,22 +10,20 @@ import {
sortBy,
groupBy,
isEmpty,
- without,
} from 'lodash';
-import scrollIntoView from 'dom-scroll-into-view';
/**
* WordPress dependencies
*/
import { __, _x, _n, sprintf } from '@wordpress/i18n';
-import { PanelBody, withSpokenMessages } from '@wordpress/components';
+import { withSpokenMessages } from '@wordpress/components';
import { addQueryArgs } from '@wordpress/url';
import { controlsRepeat } from '@wordpress/icons';
import { speak } from '@wordpress/a11y';
-import { createBlock, isUnmodifiedDefaultBlock } from '@wordpress/blocks';
-import { useMemo, useEffect, useState, useRef } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { compose, withSafeTimeout } from '@wordpress/compose';
+import { createBlock } from '@wordpress/blocks';
+import { useMemo, useEffect } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
/**
* Internal dependencies
@@ -35,6 +32,7 @@ import BlockTypesList from '../block-types-list';
import ChildBlocks from './child-blocks';
import __experimentalInserterMenuExtension from '../inserter-menu-extension';
import { searchItems } from './search-items';
+import InserterPanel from './panel';
// Copied over from the Columns block. It seems like it should become part of public API.
const createBlocksFromInnerBlocksTemplate = ( innerBlocksTemplate ) => {
@@ -54,76 +52,42 @@ const getBlockNamespace = ( item ) => item.name.split( '/' )[ 0 ];
const MAX_SUGGESTED_ITEMS = 9;
function InserterBlockList( {
- clientId,
- isAppender,
rootClientId,
- onSelect,
+ onInsert,
onHover,
__experimentalSelectBlockOnInsert: selectBlockOnInsert,
filterValue,
debouncedSpeak,
- setTimeout: safeSetTimeout,
} ) {
const {
categories,
collections,
items,
rootChildBlocks,
- getSelectedBlock,
- destinationRootClientId,
- getBlockIndex,
- getBlockSelectionEnd,
- getBlockOrder,
fetchReusableBlocks,
} = useSelect(
( select ) => {
- const {
- getInserterItems,
- getBlockName,
- getBlockRootClientId,
- getBlockSelectionEnd: _getBlockSelectionEnd,
- getSettings,
- } = select( 'core/block-editor' );
+ const { getInserterItems, getBlockName, getSettings } = select(
+ 'core/block-editor'
+ );
const {
getCategories,
getCollections,
getChildBlockNames,
} = select( 'core/blocks' );
-
- let destRootClientId = rootClientId;
- if ( ! destRootClientId && ! clientId && ! isAppender ) {
- const end = _getBlockSelectionEnd();
- if ( end ) {
- destRootClientId = getBlockRootClientId( end ) || undefined;
- }
- }
- const destinationRootBlockName = getBlockName( destRootClientId );
-
+ const rootBlockName = getBlockName( rootClientId );
const { __experimentalFetchReusableBlocks } = getSettings();
return {
categories: getCategories(),
collections: getCollections(),
- rootChildBlocks: getChildBlockNames( destinationRootBlockName ),
- items: getInserterItems( destRootClientId ),
- destinationRootClientId: destRootClientId,
+ rootChildBlocks: getChildBlockNames( rootBlockName ),
+ items: getInserterItems( rootClientId ),
fetchReusableBlocks: __experimentalFetchReusableBlocks,
- ...pick( select( 'core/block-editor' ), [
- 'getSelectedBlock',
- 'getBlockIndex',
- 'getBlockSelectionEnd',
- 'getBlockOrder',
- ] ),
};
},
- [ clientId, isAppender, rootClientId ]
+ [ rootClientId ]
);
- const {
- replaceBlocks,
- insertBlock,
- showInsertionPoint,
- hideInsertionPoint,
- } = useDispatch( 'core/block-editor' );
// Fetch resuable blocks on mount
useEffect( () => {
@@ -132,68 +96,21 @@ function InserterBlockList( {
}
}, [] );
- // To avoid duplication, getInsertionIndex is extracted and used in two event handlers
- // This breaks the withDispatch not containing any logic rule.
- // Since it's a function only called when the event handlers are called,
- // it's fine to extract it.
- // eslint-disable-next-line no-restricted-syntax
- function getInsertionIndex() {
- // If the clientId is defined, we insert at the position of the block.
- if ( clientId ) {
- return getBlockIndex( clientId, destinationRootClientId );
- }
-
- // If there a selected block, we insert after the selected block.
- const end = getBlockSelectionEnd();
- if ( ! isAppender && end ) {
- return getBlockIndex( end, destinationRootClientId ) + 1;
- }
-
- // Otherwise, we insert at the end of the current rootClientId
- return getBlockOrder( destinationRootClientId ).length;
- }
-
- const onHoverItem = ( item ) => {
- onHover( item );
- if ( item ) {
- const index = getInsertionIndex();
- showInsertionPoint( destinationRootClientId, index );
- } else {
- hideInsertionPoint();
- }
- };
-
const onSelectItem = ( item ) => {
const { name, title, initialAttributes, innerBlocks } = item;
- const selectedBlock = getSelectedBlock();
const insertedBlock = createBlock(
name,
initialAttributes,
createBlocksFromInnerBlocksTemplate( innerBlocks )
);
- if (
- ! isAppender &&
- selectedBlock &&
- isUnmodifiedDefaultBlock( selectedBlock )
- ) {
- replaceBlocks( selectedBlock.clientId, insertedBlock );
- } else {
- insertBlock(
- insertedBlock,
- getInsertionIndex(),
- destinationRootClientId,
- selectBlockOnInsert
- );
- if ( ! selectBlockOnInsert ) {
- // translators: %s: the name of the block that has been added
- const message = sprintf( __( '%s block added' ), title );
- speak( message );
- }
- }
+ onInsert( insertedBlock );
- onSelect();
- return insertedBlock;
+ if ( ! selectBlockOnInsert ) {
+ // translators: %s: the name of the block that has been added
+ const message = sprintf( __( '%s block added' ), title );
+ speak( message );
+ }
};
const filteredItems = useMemo( () => {
@@ -248,61 +165,6 @@ function InserterBlockList( {
return result;
}, [ filteredItems, collections ] );
- const inserterResults = useRef();
- const panels = useRef( [] );
- const bindPanel = ( name ) => ( ref ) => {
- panels.current[ name ] = ref;
- };
- const [ openPanels, setOpenPanels ] = useState( [ 'suggested' ] );
-
- const onTogglePanel = ( panel ) => {
- return () => {
- const isOpened = openPanels.indexOf( panel ) !== -1;
- if ( isOpened ) {
- setOpenPanels( without( openPanels, panel ) );
- } else {
- setOpenPanels( [ ...openPanels, panel ] );
-
- safeSetTimeout( () => {
- // We need a generic way to access the panel's container
- scrollIntoView(
- panels.current[ panel ],
- inserterResults.current,
- {
- alignWithTop: true,
- }
- );
- } );
- }
- };
- };
-
- // Update the open panels on search
- useEffect( () => {
- if ( ! filterValue ) {
- setOpenPanels( [ 'suggested' ] );
- return;
- }
- let newOpenPanels = [];
- if ( reusableItems.length > 0 ) {
- newOpenPanels.push( 'reusable' );
- }
- if ( filteredItems.length > 0 ) {
- newOpenPanels = newOpenPanels.concat(
- Object.keys( itemsPerCategory ),
- Object.keys( itemsPerCollection )
- );
- }
-
- setOpenPanels( newOpenPanels );
- }, [
- filterValue,
- filteredItems,
- reusableItems,
- itemsPerCategory,
- itemsPerCollection,
- ] );
-
// Announce search results on change
useEffect( () => {
const resultCount = Object.keys( itemsPerCategory ).reduce(
@@ -322,100 +184,81 @@ function InserterBlockList( {
debouncedSpeak( resultsFoundMessage );
}, [ itemsPerCategory, debouncedSpeak ] );
- const isPanelOpen = ( panel ) => openPanels.indexOf( panel ) !== -1;
-
const hasItems = ! isEmpty( filteredItems );
+ const hasChildItems = childItems.length > 0;
return (
-
+
);
}
diff --git a/packages/block-editor/src/components/inserter/library.js b/packages/block-editor/src/components/inserter/library.js
new file mode 100644
index 0000000000000..a5e7094f54d4a
--- /dev/null
+++ b/packages/block-editor/src/components/inserter/library.js
@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+import { noop } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import InserterMenu from './menu';
+
+function InserterLibrary( {
+ rootClientId,
+ clientId,
+ isAppender,
+ showInserterHelpPanel,
+ __experimentalSelectBlockOnInsert: selectBlockOnInsert,
+ onSelect = noop,
+} ) {
+ const { destinationRootClientId } = useSelect( ( select ) => {
+ const { getBlockRootClientId } = select( 'core/block-editor' );
+
+ rootClientId =
+ rootClientId || getBlockRootClientId( clientId ) || undefined;
+
+ return {
+ rootClientId,
+ };
+ } );
+
+ return (
+
+ );
+}
+
+export default InserterLibrary;
diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index 5698b278e211d..6e446717f3751 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -1,13 +1,17 @@
/**
* External dependencies
*/
-import { includes } from 'lodash';
+import { includes, pick } from 'lodash';
/**
* WordPress dependencies
*/
import { useState } from '@wordpress/element';
import { LEFT, RIGHT, UP, DOWN, BACKSPACE, ENTER } from '@wordpress/keycodes';
+import { TabPanel } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
/**
* Internal dependencies
@@ -16,6 +20,7 @@ import Tips from './tips';
import InserterSearchForm from './search-form';
import InserterPreviewPanel from './preview-panel';
import InserterBlockList from './block-list';
+import BlockPatterns from './block-patterns';
const stopKeyPropagation = ( event ) => event.stopPropagation();
@@ -29,6 +34,49 @@ function InserterMenu( {
} ) {
const [ filterValue, setFilterValue ] = useState( '' );
const [ hoveredItem, setHoveredItem ] = useState( null );
+ const {
+ destinationRootClientId,
+ patterns,
+ getSelectedBlock,
+ getBlockIndex,
+ getBlockSelectionEnd,
+ getBlockOrder,
+ } = useSelect( ( select ) => {
+ const {
+ getSettings,
+ getBlockRootClientId,
+ getBlockSelectionEnd: _getBlockSelectionEnd,
+ } = select( 'core/block-editor' );
+
+ let destRootClientId = rootClientId;
+ if ( ! destRootClientId && ! clientId && ! isAppender ) {
+ const end = _getBlockSelectionEnd();
+ if ( end ) {
+ destRootClientId = getBlockRootClientId( end ) || undefined;
+ }
+ }
+ return {
+ patterns: getSettings().__experimentalBlockPatterns,
+ destinationRootClientId: destRootClientId,
+ ...pick( select( 'core/block-editor' ), [
+ 'getSelectedBlock',
+ 'getBlockIndex',
+ 'getBlockSelectionEnd',
+ 'getBlockOrder',
+ ] ),
+ };
+ }, [] );
+ const {
+ replaceBlocks,
+ insertBlocks,
+ showInsertionPoint,
+ hideInsertionPoint,
+ } = useDispatch( 'core/block-editor' );
+ const hasPatterns =
+ ! destinationRootClientId &&
+ !! patterns &&
+ !! patterns.length &&
+ ! filterValue;
const onKeyDown = ( event ) => {
if (
includes(
@@ -41,6 +89,86 @@ function InserterMenu( {
}
};
+ // To avoid duplication, getInsertionIndex is extracted and used in two event handlers
+ // This breaks the withDispatch not containing any logic rule.
+ // Since it's a function only called when the event handlers are called,
+ // it's fine to extract it.
+ // eslint-disable-next-line no-restricted-syntax
+ function getInsertionIndex() {
+ // If the clientId is defined, we insert at the position of the block.
+ if ( clientId ) {
+ return getBlockIndex( clientId, destinationRootClientId );
+ }
+
+ // If there a selected block, we insert after the selected block.
+ const end = getBlockSelectionEnd();
+ if ( ! isAppender && end ) {
+ return getBlockIndex( end, destinationRootClientId ) + 1;
+ }
+
+ // Otherwise, we insert at the end of the current rootClientId
+ return getBlockOrder( destinationRootClientId ).length;
+ }
+
+ const onInsertBlocks = ( blocks ) => {
+ const selectedBlock = getSelectedBlock();
+ if (
+ ! isAppender &&
+ selectedBlock &&
+ isUnmodifiedDefaultBlock( selectedBlock )
+ ) {
+ replaceBlocks( selectedBlock.clientId, blocks );
+ } else {
+ insertBlocks(
+ blocks,
+ getInsertionIndex(),
+ destinationRootClientId,
+ __experimentalSelectBlockOnInsert
+ );
+ }
+
+ onSelect();
+ };
+
+ const onHover = ( item ) => {
+ setHoveredItem( item );
+ if ( item ) {
+ const index = getInsertionIndex();
+ showInsertionPoint( destinationRootClientId, index );
+ } else {
+ hideInsertionPoint();
+ }
+ };
+
+ const blocksTab = (
+ <>
+
+
+
+
+
+ { showInserterHelpPanel && (
+
+
+
+ ) }
+
+ );
+
+ const patternsTab = (
+
+
+
+ );
+
// Disable reason (no-autofocus): The inserter menu is a modal display, not one which
// is always visible, and one which already incurs this behavior of autoFocus via
// Popover's focusOnMount.
@@ -55,25 +183,36 @@ function InserterMenu( {
>