@wordpress/block-editor 14.8.0 → 14.8.1-next.a9f418477.0

package/src/components/alignment-control/stories/aliginment-toolbar.story.js

@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { AlignmentToolbar } from '..';
+
+/**
+ * The `AlignmentToolbar` component renders a dropdown menu that displays alignment options for the selected block in `Toolbar`.
+ */
+const meta = {
+	title: 'BlockEditor/AlignmentToolbar',
+	component: AlignmentToolbar,
+	argTypes: {
+		value: {
+			control: false,
+			defaultValue: 'undefined',
+			description: 'The current value of the alignment setting.',
+		},
+		onChange: {
+			action: 'onChange',
+			control: false,
+			description:
+				"A callback function invoked when the toolbar's alignment value is changed via an interaction with any of the toolbar's buttons. Called with the new alignment value (ie: `left`, `center`, `right`, `undefined`) as the only argument.",
+		},
+	},
+};
+export default meta;
+
+export const Default = {
+	render: function Template( { onChange, ...args } ) {
+		const [ value, setValue ] = useState();
+		return (
+			<AlignmentToolbar
+				{ ...args }
+				onChange={ ( ...changeArgs ) => {
+					onChange( ...changeArgs );
+					setValue( ...changeArgs );
+				} }
+				value={ value }
+			/>
+		);
+	},
+};

package/src/components/alignment-control/stories/index.story.js

@@ -0,0 +1,51 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { AlignmentControl } from '../';
+
+/**
+ * The `AlignmentControl` component renders a dropdown menu that displays alignment options for the selected block.
+ *
+ * This component is mostly used for blocks that display text, such as Heading, Paragraph, Post Author, Post Comments, Verse, Quote, Post Title, etc... And the available alignment options are `left`, `center` or `right` alignment.
+ *
+ * If you want to use the alignment control in a toolbar, you should use the `AlignmentToolbar` component instead.
+ */
+const meta = {
+	title: 'BlockEditor/AlignmentControl',
+	component: AlignmentControl,
+	argTypes: {
+		value: {
+			control: false,
+			defaultValue: 'undefined',
+			description: 'The current value of the alignment setting.',
+		},
+		onChange: {
+			action: 'onChange',
+			control: false,
+			description:
+				"A callback function invoked when the toolbar's alignment value is changed via an interaction with any of the toolbar's buttons. Called with the new alignment value (ie: `left`, `center`, `right`, `undefined`) as the only argument.",
+		},
+	},
+};
+export default meta;
+
+export const Default = {
+	render: function Template( { onChange, ...args } ) {
+		const [ value, setValue ] = useState();
+		return (
+			<AlignmentControl
+				{ ...args }
+				onChange={ ( ...changeArgs ) => {
+					onChange( ...changeArgs );
+					setValue( ...changeArgs );
+				} }
+				value={ value }
+			/>
+		);
+	},
+};

package/src/components/alignment-control/test/__snapshots__/index.js.snap

@@ -12,7 +12,7 @@ exports[`AlignmentUI should allow custom alignment controls to be specified 1`]
         align="custom-left"
         aria-label="My custom left"
         aria-pressed="false"
-        class="components-button components-toolbar__control has-icon"
+        class="components-button components-toolbar__control is-compact has-icon"
         data-toolbar-item="true"
         type="button"
       >
@@ -35,7 +35,7 @@ exports[`AlignmentUI should allow custom alignment controls to be specified 1`]
         align="custom-right"
         aria-label="My custom right"
         aria-pressed="true"
-        class="components-button components-toolbar__control is-pressed has-icon"
+        class="components-button components-toolbar__control is-compact is-pressed has-icon"
         data-toolbar-item="true"
         type="button"
       >
@@ -100,7 +100,7 @@ exports[`AlignmentUI should match snapshot when controls are visible 1`] = `
         align="left"
         aria-label="Align text left"
         aria-pressed="true"
-        class="components-button components-toolbar__control is-pressed has-icon"
+        class="components-button components-toolbar__control is-compact is-pressed has-icon"
         data-toolbar-item="true"
         type="button"
       >
@@ -123,7 +123,7 @@ exports[`AlignmentUI should match snapshot when controls are visible 1`] = `
         align="center"
         aria-label="Align text center"
         aria-pressed="false"
-        class="components-button components-toolbar__control has-icon"
+        class="components-button components-toolbar__control is-compact has-icon"
         data-toolbar-item="true"
         type="button"
       >
@@ -146,7 +146,7 @@ exports[`AlignmentUI should match snapshot when controls are visible 1`] = `
         align="right"
         aria-label="Align text right"
         aria-pressed="false"
-        class="components-button components-toolbar__control has-icon"
+        class="components-button components-toolbar__control is-compact has-icon"
         data-toolbar-item="true"
         type="button"
       >

package/src/components/block-alignment-control/test/__snapshots__/index.js.snap

@@ -42,7 +42,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
       <button
         aria-label="None"
         aria-pressed="false"
-        class="components-button components-toolbar__control has-icon"
+        class="components-button components-toolbar__control is-compact has-icon"
         data-toolbar-item="true"
         type="button"
       >
@@ -64,7 +64,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
       <button
         aria-label="Align left"
         aria-pressed="true"
-        class="components-button components-toolbar__control is-pressed has-icon"
+        class="components-button components-toolbar__control is-compact is-pressed has-icon"
         data-toolbar-item="true"
         type="button"
       >
@@ -86,7 +86,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
       <button
         aria-label="Align center"
         aria-pressed="false"
-        class="components-button components-toolbar__control has-icon"
+        class="components-button components-toolbar__control is-compact has-icon"
         data-toolbar-item="true"
         type="button"
       >
@@ -108,7 +108,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
       <button
         aria-label="Align right"
         aria-pressed="false"
-        class="components-button components-toolbar__control has-icon"
+        class="components-button components-toolbar__control is-compact has-icon"
         data-toolbar-item="true"
         type="button"
       >

package/src/components/block-canvas/index.js

@@ -56,7 +56,8 @@ export function ExperimentalBlockCanvas( {
 		return (
 			<BlockTools
 				__unstableContentRef={ localRef }
-				style={ { height, display: 'flex' } }
+				className="block-editor-block-canvas"
+				style={ { height } }
 			>
 				<EditorStyles
 					styles={ styles }
@@ -67,10 +68,6 @@ export function ExperimentalBlockCanvas( {
 					ref={ contentRef }
 					className="editor-styles-wrapper"
 					tabIndex={ -1 }
-					style={ {
-						height: '100%',
-						width: '100%',
-					} }
 				>
 					{ children }
 				</WritingFlow>
@@ -81,6 +78,7 @@ export function ExperimentalBlockCanvas( {
 	return (
 		<BlockTools
 			__unstableContentRef={ localRef }
+			className="block-editor-block-canvas"
 			style={ { height, display: 'flex' } }
 		>
 			<Iframe

package/src/components/block-draggable/content.scss

@@ -1,13 +1,12 @@
 // This creates a "slot" where the block you're dragging appeared.
 // We use !important as one of the rules are meant to be overridden.
 .block-editor-block-list__layout .is-dragging {
-	background-color: currentColor !important;
-	opacity: 0.05 !important;
+	opacity: 0.1 !important;
 	border-radius: $radius-small !important;
 
-	// Disabling pointer events during the drag event is necessary,
-	// lest the block might affect your drag operation.
-	pointer-events: none !important;
+	iframe {
+		pointer-events: none;
+	}
 
 	// Hide the multi selection indicator when dragging.
 	&::selection {
@@ -18,3 +17,10 @@
 		content: none !important;
 	}
 }
+
+// Images are draggable by default, so disable drag for them if not explicitly
+// set. This is done so that the block can capture the drag event instead.
+.wp-block img:not([draggable]),
+.wp-block svg:not([draggable]) {
+	pointer-events: none;
+}

package/src/components/block-list/block.js

@@ -6,13 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import {
-	memo,
-	useCallback,
-	RawHTML,
-	useContext,
-	useMemo,
-} from '@wordpress/element';
+import { memo, RawHTML, useContext, useMemo } from '@wordpress/element';
 import {
 	getBlockType,
 	getSaveContent,
@@ -28,7 +22,7 @@ import {
 	store as blocksStore,
 } from '@wordpress/blocks';
 import { withFilters } from '@wordpress/components';
-import { withDispatch, useDispatch, useSelect } from '@wordpress/data';
+import { withDispatch, useSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 import { safeHTML } from '@wordpress/dom';
 
@@ -103,6 +97,7 @@ function BlockListBlock( {
 	wrapperProps,
 	setAttributes,
 	onReplace,
+	onRemove,
 	onInsertBlocksAfter,
 	onMerge,
 	toggleSelection,
@@ -113,11 +108,6 @@ function BlockListBlock( {
 		themeSupportsLayout,
 		...context
 	} = useContext( PrivateBlockContext );
-	const { removeBlock } = useDispatch( blockEditorStore );
-	const onRemove = useCallback(
-		() => removeBlock( clientId ),
-		[ clientId, removeBlock ]
-	);
 
 	const parentLayout = useLayout() || {};
 
@@ -537,6 +527,9 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 				initialPosition
 			);
 		},
+		onRemove() {
+			removeBlock( ownProps.clientId );
+		},
 		toggleSelection( selectionEnabled ) {
 			toggleSelection( selectionEnabled );
 		},
@@ -797,6 +790,7 @@ function BlockListBlockProvider( props ) {
 		mayDisplayParentControls,
 		originalBlockClientId,
 		themeSupportsLayout,
+		canMove,
 	};
 
 	// Here we separate between the props passed to BlockListBlock and any other

package/src/components/block-list/content.scss

@@ -427,3 +427,9 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b
 	// Additional -1px is required to avoid sub pixel rounding errors allowing background to show.
 	margin: 0 calc(-1 * var(--wp--style--root--padding-right) - 1px) 0 calc(-1 * var(--wp--style--root--padding-left) - 1px) !important;
 }
+
+// This only works in Firefox, Chrome and Safari don't accept a custom cursor
+// during drag.
+.is-dragging {
+	cursor: grabbing;
+}

package/src/components/block-list/use-block-props/index.js

@@ -30,6 +30,7 @@ import { useIntersectionObserver } from './use-intersection-observer';
 import { useScrollIntoView } from './use-scroll-into-view';
 import { useFlashEditableBlocks } from '../../use-flash-editable-blocks';
 import { canBindBlock } from '../../../hooks/use-bindings-attributes';
+import { useFirefoxDraggableCompatibility } from './use-firefox-draggable-compatibility';
 
 /**
  * This hook is used to lightly mark an element as a block element. The element
@@ -100,11 +101,13 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		isTemporarilyEditingAsBlocks,
 		defaultClassName,
 		isSectionBlock,
+		canMove,
 	} = useContext( PrivateBlockContext );
 
 	// translators: %s: Type of block (i.e. Text, Image etc)
 	const blockLabel = sprintf( __( 'Block: %s' ), blockTitle );
 	const htmlSuffix = mode === 'html' && ! __unstableIsHtml ? '-visual' : '';
+	const ffDragRef = useFirefoxDraggableCompatibility();
 	const mergedRefs = useMergeRefs( [
 		props.ref,
 		useFocusFirstElement( { clientId, initialPosition } ),
@@ -120,6 +123,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 			isEnabled: isSectionBlock,
 		} ),
 		useScrollIntoView( { isSelected } ),
+		canMove ? ffDragRef : undefined,
 	] );
 
 	const blockEditContext = useBlockEditContext();
@@ -152,6 +156,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 
 	return {
 		tabIndex: blockEditingMode === 'disabled' ? -1 : 0,
+		draggable: canMove && ! hasChildSelected ? true : undefined,
 		...wrapperProps,
 		...props,
 		ref: mergedRefs,

package/src/components/block-list/use-block-props/use-firefox-draggable-compatibility.js

@@ -0,0 +1,83 @@
+/**
+ * WordPress dependencies
+ */
+import { useRefEffect } from '@wordpress/compose';
+
+const nodesByDocument = new Map();
+
+function add( doc, node ) {
+	let set = nodesByDocument.get( doc );
+	if ( ! set ) {
+		set = new Set();
+		nodesByDocument.set( doc, set );
+		doc.addEventListener( 'pointerdown', down );
+	}
+	set.add( node );
+}
+
+function remove( doc, node ) {
+	const set = nodesByDocument.get( doc );
+	if ( set ) {
+		set.delete( node );
+		restore( node );
+		if ( set.size === 0 ) {
+			nodesByDocument.delete( doc );
+			doc.removeEventListener( 'pointerdown', down );
+		}
+	}
+}
+
+function restore( node ) {
+	const prevDraggable = node.getAttribute( 'data-draggable' );
+	if ( prevDraggable ) {
+		node.removeAttribute( 'data-draggable' );
+		// Only restore if `draggable` is still removed. It could have been
+		// changed by React in the meantime.
+		if ( prevDraggable === 'true' && ! node.getAttribute( 'draggable' ) ) {
+			node.setAttribute( 'draggable', 'true' );
+		}
+	}
+}
+
+function down( event ) {
+	const { target } = event;
+	const { ownerDocument, isContentEditable } = target;
+	const nodes = nodesByDocument.get( ownerDocument );
+
+	if ( isContentEditable ) {
+		// Whenever an editable element is clicked, check which draggable
+		// blocks contain this element, and temporarily disable draggability.
+		for ( const node of nodes ) {
+			if (
+				node.getAttribute( 'draggable' ) === 'true' &&
+				node.contains( target )
+			) {
+				node.removeAttribute( 'draggable' );
+				node.setAttribute( 'data-draggable', 'true' );
+			}
+		}
+	} else {
+		// Whenever a non-editable element is clicked, re-enable draggability
+		// for any blocks that were previously disabled.
+		for ( const node of nodes ) {
+			restore( node );
+		}
+	}
+}
+
+/**
+ * In Firefox, the `draggable` and `contenteditable` attributes don't play well
+ * together. When `contenteditable` is within a `draggable` element, selection
+ * doesn't get set in the right place. The only solution is to temporarily
+ * remove the `draggable` attribute clicking inside `contenteditable` elements.
+ *
+ * @return {Function} Cleanup function.
+ */
+export function useFirefoxDraggableCompatibility() {
+	return useRefEffect( ( node ) => {
+		add( node.ownerDocument, node );
+		return () => {
+			remove( node.ownerDocument, node );
+		};
+	}, [] );
+}

package/src/components/block-list/use-block-props/use-selected-block-event-handlers.js

@@ -5,12 +5,15 @@ import { isTextField } from '@wordpress/dom';
 import { ENTER, BACKSPACE, DELETE } from '@wordpress/keycodes';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useRefEffect } from '@wordpress/compose';
+import { createRoot } from '@wordpress/element';
+import { store as blocksStore } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../../store';
 import { unlock } from '../../../lock-unlock';
+import BlockDraggableChip from '../../../components/block-draggable/draggable-chip';
 
 /**
  * Adds block behaviour:
@@ -21,12 +24,16 @@ import { unlock } from '../../../lock-unlock';
  * @param {string} clientId Block client ID.
  */
 export function useEventHandlers( { clientId, isSelected } ) {
-	const { getBlockRootClientId, getBlockIndex, isZoomOut } = unlock(
-		useSelect( blockEditorStore )
-	);
-	const { insertAfterBlock, removeBlock, resetZoomLevel } = unlock(
-		useDispatch( blockEditorStore )
-	);
+	const { getBlockType } = useSelect( blocksStore );
+	const { getBlockRootClientId, isZoomOut, hasMultiSelection, getBlockName } =
+		unlock( useSelect( blockEditorStore ) );
+	const {
+		insertAfterBlock,
+		removeBlock,
+		resetZoomLevel,
+		startDraggingBlocks,
+		stopDraggingBlocks,
+	} = unlock( useDispatch( blockEditorStore ) );
 
 	return useRefEffect(
 		( node ) => {
@@ -76,7 +83,102 @@ export function useEventHandlers( { clientId, isSelected } ) {
 			 * @param {DragEvent} event Drag event.
 			 */
 			function onDragStart( event ) {
-				event.preventDefault();
+				if (
+					node !== event.target ||
+					node.isContentEditable ||
+					node.ownerDocument.activeElement !== node ||
+					hasMultiSelection()
+				) {
+					event.preventDefault();
+					return;
+				}
+				const data = JSON.stringify( {
+					type: 'block',
+					srcClientIds: [ clientId ],
+					srcRootClientId: getBlockRootClientId( clientId ),
+				} );
+				event.dataTransfer.effectAllowed = 'move'; // remove "+" cursor
+				event.dataTransfer.clearData();
+				event.dataTransfer.setData( 'wp-blocks', data );
+				const { ownerDocument } = node;
+				const { defaultView } = ownerDocument;
+				const selection = defaultView.getSelection();
+				selection.removeAllRanges();
+
+				const domNode = document.createElement( 'div' );
+				const root = createRoot( domNode );
+				root.render(
+					<BlockDraggableChip
+						icon={ getBlockType( getBlockName( clientId ) ).icon }
+					/>
+				);
+				document.body.appendChild( domNode );
+				domNode.style.position = 'absolute';
+				domNode.style.top = '0';
+				domNode.style.left = '0';
+				domNode.style.zIndex = '1000';
+				domNode.style.pointerEvents = 'none';
+
+				// Setting the drag chip as the drag image actually works, but
+				// the behaviour is slightly different in every browser. In
+				// Safari, it animates, in Firefox it's slightly transparent...
+				// So we set a fake drag image and have to reposition it
+				// ourselves.
+				const dragElement = ownerDocument.createElement( 'div' );
+				// Chrome will show a globe icon if the drag element does not
+				// have dimensions.
+				dragElement.style.width = '1px';
+				dragElement.style.height = '1px';
+				dragElement.style.position = 'fixed';
+				dragElement.style.visibility = 'hidden';
+				ownerDocument.body.appendChild( dragElement );
+				event.dataTransfer.setDragImage( dragElement, 0, 0 );
+
+				let offset = { x: 0, y: 0 };
+
+				if ( document !== ownerDocument ) {
+					const frame = defaultView.frameElement;
+					if ( frame ) {
+						const rect = frame.getBoundingClientRect();
+						offset = { x: rect.left, y: rect.top };
+					}
+				}
+
+				// chip handle offset
+				offset.x -= 58;
+
+				function over( e ) {
+					domNode.style.transform = `translate( ${
+						e.clientX + offset.x
+					}px, ${ e.clientY + offset.y }px )`;
+				}
+
+				over( event );
+
+				function end() {
+					ownerDocument.removeEventListener( 'dragover', over );
+					ownerDocument.removeEventListener( 'dragend', end );
+					domNode.remove();
+					dragElement.remove();
+					stopDraggingBlocks();
+					document.body.classList.remove(
+						'is-dragging-components-draggable'
+					);
+					ownerDocument.documentElement.classList.remove(
+						'is-dragging'
+					);
+				}
+
+				ownerDocument.addEventListener( 'dragover', over );
+				ownerDocument.addEventListener( 'dragend', end );
+				ownerDocument.addEventListener( 'drop', end );
+
+				startDraggingBlocks( [ clientId ] );
+				// Important because it hides the block toolbar.
+				document.body.classList.add(
+					'is-dragging-components-draggable'
+				);
+				ownerDocument.documentElement.classList.add( 'is-dragging' );
 			}
 
 			node.addEventListener( 'keydown', onKeyDown );
@@ -91,11 +193,13 @@ export function useEventHandlers( { clientId, isSelected } ) {
 			clientId,
 			isSelected,
 			getBlockRootClientId,
-			getBlockIndex,
 			insertAfterBlock,
 			removeBlock,
 			isZoomOut,
 			resetZoomLevel,
+			hasMultiSelection,
+			startDraggingBlocks,
+			stopDraggingBlocks,
 		]
 	);
 }

package/src/components/block-lock/modal.js

@@ -99,9 +99,7 @@ export default function BlockLockModal( { clientId, onClose } ) {
 			>
 				<fieldset className="block-editor-block-lock-modal__options">
 					<legend>
-						{ __(
-							'Choose specific attributes to restrict or lock all available options.'
-						) }
+						{ __( 'Select the features you want to lock' ) }
 					</legend>
 					{ /*
 					 * Disable reason: The `list` ARIA role is redundant but
@@ -137,7 +135,7 @@ export default function BlockLockModal( { clientId, onClose } ) {
 									<li className="block-editor-block-lock-modal__checklist-item">
 										<CheckboxControl
 											__nextHasNoMarginBottom
-											label={ __( 'Restrict editing' ) }
+											label={ __( 'Lock editing' ) }
 											checked={ !! lock.edit }
 											onChange={ ( edit ) =>
 												setLock( ( prevLock ) => ( {
@@ -159,7 +157,7 @@ export default function BlockLockModal( { clientId, onClose } ) {
 								<li className="block-editor-block-lock-modal__checklist-item">
 									<CheckboxControl
 										__nextHasNoMarginBottom
-										label={ __( 'Disable movement' ) }
+										label={ __( 'Lock movement' ) }
 										checked={ lock.move }
 										onChange={ ( move ) =>
 											setLock( ( prevLock ) => ( {
@@ -178,7 +176,7 @@ export default function BlockLockModal( { clientId, onClose } ) {
 								<li className="block-editor-block-lock-modal__checklist-item">
 									<CheckboxControl
 										__nextHasNoMarginBottom
-										label={ __( 'Prevent removal' ) }
+										label={ __( 'Lock removal' ) }
 										checked={ lock.remove }
 										onChange={ ( remove ) =>
 											setLock( ( prevLock ) => ( {

package/src/components/block-parent-selector/index.js

@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { getBlockType, store as blocksStore } from '@wordpress/blocks';
 import { ToolbarButton } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
@@ -24,31 +23,18 @@ import { unlock } from '../../lock-unlock';
  */
 export default function BlockParentSelector() {
 	const { selectBlock } = useDispatch( blockEditorStore );
-	const { parentClientId, isVisible } = useSelect( ( select ) => {
+	const { parentClientId } = useSelect( ( select ) => {
 		const {
-			getBlockName,
 			getBlockParents,
 			getSelectedBlockClientId,
-			getBlockEditingMode,
 			getParentSectionBlock,
 		} = unlock( select( blockEditorStore ) );
-		const { hasBlockSupport } = select( blocksStore );
 		const selectedBlockClientId = getSelectedBlockClientId();
 		const parentSection = getParentSectionBlock( selectedBlockClientId );
 		const parents = getBlockParents( selectedBlockClientId );
 		const _parentClientId = parentSection ?? parents[ parents.length - 1 ];
-		const parentBlockName = getBlockName( _parentClientId );
-		const _parentBlockType = getBlockType( parentBlockName );
 		return {
 			parentClientId: _parentClientId,
-			isVisible:
-				_parentClientId &&
-				getBlockEditingMode( _parentClientId ) !== 'disabled' &&
-				hasBlockSupport(
-					_parentBlockType,
-					'__experimentalParentSelector',
-					true
-				),
 		};
 	}, [] );
 	const blockInformation = useBlockDisplayInformation( parentClientId );
@@ -61,10 +47,6 @@ export default function BlockParentSelector() {
 		highlightParent: true,
 	} );
 
-	if ( ! isVisible ) {
-		return null;
-	}
-
 	return (
 		<div
 			className="block-editor-block-parent-selector"