@wordpress/edit-post 7.34.0 → 8.0.0

package/src/components/text-editor/style.scss

@@ -1,71 +0,0 @@
-.edit-post-text-editor {
-	position: relative;
-	width: 100%;
-	background-color: $white;
-	flex-grow: 1;
-
-	// Post title.
-	.editor-post-title:not(.is-raw-text),
-	.editor-post-title.is-raw-text textarea {
-		max-width: none;
-		line-height: $default-line-height;
-
-		font-family: $editor-html-font;
-		font-size: 2.5em;
-		font-weight: normal;
-
-		border: $border-width solid $gray-600;
-		border-radius: 0;
-
-		// Same padding as body.
-		padding: $grid-unit-20;
-
-		@include break-small() {
-			padding: $grid-unit-30;
-		}
-
-		&:focus {
-			border-color: var(--wp-admin-theme-color);
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-		}
-	}
-}
-
-.edit-post-text-editor__body {
-	width: 100%;
-	padding: 0 $grid-unit-15 $grid-unit-15 $grid-unit-15;
-	max-width: $break-xlarge;
-	margin-left: auto;
-	margin-right: auto;
-
-	@include break-large() {
-		padding: 0 $grid-unit-30 $grid-unit-30 $grid-unit-30;
-	}
-}
-
-// Exit code editor toolbar.
-.edit-post-text-editor__toolbar {
-	position: sticky;
-	z-index: z-index(".edit-post-text-editor__toolbar");
-	top: 0;
-	left: 0;
-	right: 0;
-	display: flex;
-	background: rgba($white, 0.8);
-	padding: $grid-unit-05 $grid-unit-15;
-
-	@include break-small() {
-		padding: $grid-unit-15;
-	}
-
-	@include break-large() {
-		padding: $grid-unit-15 $grid-unit-30;
-	}
-
-	h2 {
-		line-height: $button-size;
-		margin: 0 auto 0 0;
-		font-size: $default-font-size;
-		color: $gray-900;
-	}
-}

package/src/components/visual-editor/block-inspector-button.js

@@ -1,59 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { MenuItem } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { speak } from '@wordpress/a11y';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../store';
-
-const noop = () => {};
-
-export function BlockInspectorButton( { onClick = noop, small = false } ) {
-	const { shortcut, areAdvancedSettingsOpened } = useSelect(
-		( select ) => ( {
-			shortcut: select(
-				keyboardShortcutsStore
-			).getShortcutRepresentation( 'core/editor/toggle-sidebar' ),
-			areAdvancedSettingsOpened:
-				select( editPostStore ).getActiveGeneralSidebarName() ===
-				'edit-post/block',
-		} ),
-		[]
-	);
-	const { openGeneralSidebar, closeGeneralSidebar } =
-		useDispatch( editPostStore );
-
-	const label = areAdvancedSettingsOpened
-		? __( 'Hide more settings' )
-		: __( 'Show more settings' );
-
-	return (
-		<MenuItem
-			onClick={ () => {
-				if ( areAdvancedSettingsOpened ) {
-					closeGeneralSidebar();
-					speak( __( 'Block settings closed' ) );
-				} else {
-					openGeneralSidebar( 'edit-post/block' );
-					speak(
-						__(
-							'Additional settings are now available in the Editor block settings sidebar'
-						)
-					);
-				}
-				onClick();
-			} }
-			shortcut={ shortcut }
-		>
-			{ ! small && label }
-		</MenuItem>
-	);
-}
-
-export default BlockInspectorButton;

package/src/components/visual-editor/index.js

@@ -1,101 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import {
-	store as editorStore,
-	privateApis as editorPrivateApis,
-} from '@wordpress/editor';
-import { useMemo } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
-import { store as blocksStore } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../store';
-import { unlock } from '../../lock-unlock';
-import { usePaddingAppender } from './use-padding-appender';
-
-const { EditorCanvas } = unlock( editorPrivateApis );
-
-const isGutenbergPlugin = process.env.IS_GUTENBERG_PLUGIN ? true : false;
-
-export default function VisualEditor( { styles } ) {
-	const {
-		isWelcomeGuideVisible,
-		renderingMode,
-		isBlockBasedTheme,
-		hasV3BlocksOnly,
-		isEditingTemplate,
-	} = useSelect( ( select ) => {
-		const { isFeatureActive } = select( editPostStore );
-		const { getEditorSettings, getRenderingMode } = select( editorStore );
-		const { getBlockTypes } = select( blocksStore );
-		const editorSettings = getEditorSettings();
-
-		return {
-			isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ),
-			renderingMode: getRenderingMode(),
-			isBlockBasedTheme: editorSettings.__unstableIsBlockBasedTheme,
-			hasV3BlocksOnly: getBlockTypes().every( ( type ) => {
-				return type.apiVersion >= 3;
-			} ),
-			isEditingTemplate:
-				select( editorStore ).getCurrentPostType() === 'wp_template',
-		};
-	}, [] );
-	const hasMetaBoxes = useSelect(
-		( select ) => select( editPostStore ).hasMetaBoxes(),
-		[]
-	);
-
-	const paddingAppenderRef = usePaddingAppender();
-
-	let paddingBottom;
-
-	// Add a constant padding for the typewritter effect. When typing at the
-	// bottom, there needs to be room to scroll up.
-	if ( ! hasMetaBoxes && renderingMode === 'post-only' ) {
-		paddingBottom = '40vh';
-	}
-
-	styles = useMemo(
-		() => [
-			...styles,
-			{
-				// We should move this in to future to the body.
-				css: paddingBottom
-					? `body{padding-bottom:${ paddingBottom }}`
-					: '',
-			},
-		],
-		[ styles, paddingBottom ]
-	);
-
-	const isToBeIframed =
-		( ( hasV3BlocksOnly || ( isGutenbergPlugin && isBlockBasedTheme ) ) &&
-			! hasMetaBoxes ) ||
-		isEditingTemplate;
-
-	return (
-		<div
-			className={ classnames( 'edit-post-visual-editor', {
-				'has-inline-canvas': ! isToBeIframed,
-			} ) }
-		>
-			<EditorCanvas
-				disableIframe={ ! isToBeIframed }
-				styles={ styles }
-				// We should auto-focus the canvas (title) on load.
-				// eslint-disable-next-line jsx-a11y/no-autofocus
-				autoFocus={ ! isWelcomeGuideVisible }
-				contentRef={ paddingAppenderRef }
-			/>
-		</div>
-	);
-}

package/src/components/visual-editor/style.scss

@@ -1,53 +0,0 @@
-.edit-post-visual-editor {
-	position: relative;
-	display: flex;
-	flex-flow: column;
-	// In the iframed canvas this keeps extra scrollbars from appearing (when block toolbars overflow). In the
-	// legacy (non-iframed) canvas, overflow must not be hidden in order to maintain support for sticky positioning.
-	&:not(.has-inline-canvas) {
-		overflow: hidden;
-	}
-
-	// Gray preview overlay (desktop/tablet/mobile) is intentionally not set on an element with scrolling content like
-	// interface-interface-skeleton__content. This causes graphical glitches (flashes of the background color)
-	// when scrolling in Safari due to incorrect ordering of large compositing layers (GPU acceleration).
-	background-color: $gray-300;
-
-	// The button element easily inherits styles that are meant for the editor style.
-	// These rules enhance the specificity to reduce that inheritance.
-	// This is duplicated in edit-site.
-	& .components-button {
-		font-family: $default-font;
-		font-size: $default-font-size;
-		padding: 6px 12px;
-
-		&.has-icon {
-			padding: 6px;
-		}
-	}
-
-	// The following flex rule is important for the canvas layout, please be careful when refactoring,
-	// as older browser interpret flex height behavior differently. Be sure to test on Safari 13.
-	// The syntax is `flex: [flex-grow] [flex-shrink] [flex-basis];`
-	// We set the canvas to be allowed to grow (vertically), but not shrink.
-	flex: 1 0 auto;
-
-	// Since the parent container is also a flex container, a `flex-basis: 100%;` is not needed,
-	// as align-items: stretch is inherited by default.Additionally due to older browser's flex height
-	// interpretation, any percentage value is likely going to cause issues, such as metaboxes overlapping.
-	// See also https://www.w3.org/TR/CSS22/visudet.html#the-height-property.
-}
-
-.edit-post-visual-editor__content-area {
-	width: 100%;
-	height: 100%;
-	position: relative;
-	box-sizing: border-box;
-	display: flex;
-
-	// This is necessary for older browsers due to their flex height interpretation.
-	// These browsers (including Safari 13) ignore the percentage value entirely.
-	// By setting flex-grow, the element stretches to fill the parent.
-	// See also https://www.w3.org/TR/CSS22/visudet.html#the-height-property
-	flex-grow: 1;
-}

package/src/hooks/commands/use-common-commands.js

@@ -1,126 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { __, isRTL } from '@wordpress/i18n';
-import {
-	drawerLeft,
-	drawerRight,
-	blockDefault,
-	fullscreen,
-	formatListBullets,
-} from '@wordpress/icons';
-import { useCommand } from '@wordpress/commands';
-import { store as preferencesStore } from '@wordpress/preferences';
-import {
-	store as editorStore,
-	privateApis as editorPrivateApis,
-} from '@wordpress/editor';
-import { store as noticesStore } from '@wordpress/notices';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../store';
-import { unlock } from '../../lock-unlock';
-
-const { interfaceStore } = unlock( editorPrivateApis );
-
-export default function useCommonCommands() {
-	const { openGeneralSidebar, closeGeneralSidebar } =
-		useDispatch( editPostStore );
-	const { activeSidebar, isFullscreen, isPublishSidebarEnabled } = useSelect(
-		( select ) => {
-			const { get } = select( preferencesStore );
-
-			return {
-				activeSidebar:
-					select( interfaceStore ).getActiveComplementaryArea(
-						'core'
-					),
-				isPublishSidebarEnabled:
-					select( editorStore ).isPublishSidebarEnabled(),
-				isFullscreen: get( 'core/edit-post', 'fullscreenMode' ),
-			};
-		},
-		[]
-	);
-	const { toggle } = useDispatch( preferencesStore );
-	const { createInfoNotice } = useDispatch( noticesStore );
-
-	useCommand( {
-		name: 'core/open-settings-sidebar',
-		label: __( 'Toggle settings sidebar' ),
-		icon: isRTL() ? drawerLeft : drawerRight,
-		callback: ( { close } ) => {
-			close();
-			if ( activeSidebar === 'edit-post/document' ) {
-				closeGeneralSidebar();
-			} else {
-				openGeneralSidebar( 'edit-post/document' );
-			}
-		},
-	} );
-
-	useCommand( {
-		name: 'core/open-block-inspector',
-		label: __( 'Toggle block inspector' ),
-		icon: blockDefault,
-		callback: ( { close } ) => {
-			close();
-			if ( activeSidebar === 'edit-post/block' ) {
-				closeGeneralSidebar();
-			} else {
-				openGeneralSidebar( 'edit-post/block' );
-			}
-		},
-	} );
-
-	useCommand( {
-		name: 'core/toggle-fullscreen-mode',
-		label: isFullscreen
-			? __( 'Exit fullscreen' )
-			: __( 'Enter fullscreen' ),
-		icon: fullscreen,
-		callback: ( { close } ) => {
-			toggle( 'core/edit-post', 'fullscreenMode' );
-			close();
-			createInfoNotice(
-				isFullscreen ? __( 'Fullscreen off.' ) : __( 'Fullscreen on.' ),
-				{
-					id: 'core/edit-post/toggle-fullscreen-mode/notice',
-					type: 'snackbar',
-					actions: [
-						{
-							label: __( 'Undo' ),
-							onClick: () => {
-								toggle( 'core/edit-post', 'fullscreenMode' );
-							},
-						},
-					],
-				}
-			);
-		},
-	} );
-
-	useCommand( {
-		name: 'core/toggle-publish-sidebar',
-		label: isPublishSidebarEnabled
-			? __( 'Disable pre-publish checks' )
-			: __( 'Enable pre-publish checks' ),
-		icon: formatListBullets,
-		callback: ( { close } ) => {
-			close();
-			toggle( 'core', 'isPublishSidebarEnabled' );
-			createInfoNotice(
-				isPublishSidebarEnabled
-					? __( 'Pre-publish checks disabled.' )
-					: __( 'Pre-publish checks enabled.' ),
-				{
-					id: 'core/editor/publish-sidebar/notice',
-					type: 'snackbar',
-				}
-			);
-		},
-	} );
-}

package/src/hooks/components/index.js

@@ -1,13 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { addFilter } from '@wordpress/hooks';
-import { MediaUpload } from '@wordpress/media-utils';
-
-const replaceMediaUpload = () => MediaUpload;
-
-addFilter(
-	'editor.MediaUpload',
-	'core/edit-post/replace-media-upload',
-	replaceMediaUpload
-);

package/src/hooks/index.js

@@ -1,5 +0,0 @@
-/**
- * Internal dependencies
- */
-import './components';
-import './validate-multiple-use';

package/src/hooks/validate-multiple-use/index.js

@@ -1,163 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	createBlock,
-	findTransform,
-	getBlockTransforms,
-	getBlockType,
-	hasBlockSupport,
-} from '@wordpress/blocks';
-import { Button } from '@wordpress/components';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { Warning, store as blockEditorStore } from '@wordpress/block-editor';
-import { addFilter } from '@wordpress/hooks';
-import { __ } from '@wordpress/i18n';
-import { compose, createHigherOrderComponent } from '@wordpress/compose';
-
-/**
- * Recursively find very first block of an specific block type.
- *
- * @param {Object[]} blocks List of blocks.
- * @param {string}   name   Block name to search.
- *
- * @return {Object|undefined} Return block object or undefined.
- */
-function findFirstOfSameType( blocks, name ) {
-	if ( ! Array.isArray( blocks ) || ! blocks.length ) {
-		return;
-	}
-
-	for ( const block of blocks ) {
-		if ( block.name === name ) {
-			return block;
-		}
-
-		// Search inside innerBlocks.
-		const firstBlock = findFirstOfSameType( block.innerBlocks, name );
-
-		if ( firstBlock ) {
-			return firstBlock;
-		}
-	}
-}
-
-const enhance = compose(
-	/**
-	 * For blocks whose block type doesn't support `multiple`, provides the
-	 * wrapped component with `originalBlockClientId` -- a reference to the
-	 * first block of the same type in the content -- if and only if that
-	 * "original" block is not the current one. Thus, an inexisting
-	 * `originalBlockClientId` prop signals that the block is valid.
-	 *
-	 * @param {Component} WrappedBlockEdit A filtered BlockEdit instance.
-	 *
-	 * @return {Component} Enhanced component with merged state data props.
-	 */
-	withSelect( ( select, block ) => {
-		const multiple = hasBlockSupport( block.name, 'multiple', true );
-
-		// For block types with `multiple` support, there is no "original
-		// block" to be found in the content, as the block itself is valid.
-		if ( multiple ) {
-			return {};
-		}
-
-		// Otherwise, only pass `originalBlockClientId` if it refers to a different
-		// block from the current one.
-		const blocks = select( blockEditorStore ).getBlocks();
-		const firstOfSameType = findFirstOfSameType( blocks, block.name );
-		const isInvalid =
-			firstOfSameType && firstOfSameType.clientId !== block.clientId;
-		return {
-			originalBlockClientId: isInvalid && firstOfSameType.clientId,
-		};
-	} ),
-	withDispatch( ( dispatch, { originalBlockClientId } ) => ( {
-		selectFirst: () =>
-			dispatch( blockEditorStore ).selectBlock( originalBlockClientId ),
-	} ) )
-);
-
-const withMultipleValidation = createHigherOrderComponent( ( BlockEdit ) => {
-	return enhance( ( { originalBlockClientId, selectFirst, ...props } ) => {
-		if ( ! originalBlockClientId ) {
-			return <BlockEdit { ...props } />;
-		}
-
-		const blockType = getBlockType( props.name );
-		const outboundType = getOutboundType( props.name );
-
-		return [
-			<div key="invalid-preview" style={ { minHeight: '60px' } }>
-				<BlockEdit key="block-edit" { ...props } />
-			</div>,
-			<Warning
-				key="multiple-use-warning"
-				actions={ [
-					<Button
-						key="find-original"
-						variant="secondary"
-						onClick={ selectFirst }
-					>
-						{ __( 'Find original' ) }
-					</Button>,
-					<Button
-						key="remove"
-						variant="secondary"
-						onClick={ () => props.onReplace( [] ) }
-					>
-						{ __( 'Remove' ) }
-					</Button>,
-					outboundType && (
-						<Button
-							key="transform"
-							variant="secondary"
-							onClick={ () =>
-								props.onReplace(
-									createBlock(
-										outboundType.name,
-										props.attributes
-									)
-								)
-							}
-						>
-							{ __( 'Transform into:' ) } { outboundType.title }
-						</Button>
-					),
-				] }
-			>
-				<strong>{ blockType?.title }: </strong>
-				{ __( 'This block can only be used once.' ) }
-			</Warning>,
-		];
-	} );
-}, 'withMultipleValidation' );
-
-/**
- * Given a base block name, returns the default block type to which to offer
- * transforms.
- *
- * @param {string} blockName Base block name.
- *
- * @return {?Object} The chosen default block type.
- */
-function getOutboundType( blockName ) {
-	// Grab the first outbound transform.
-	const transform = findTransform(
-		getBlockTransforms( 'to', blockName ),
-		( { type, blocks } ) => type === 'block' && blocks.length === 1 // What about when .length > 1?
-	);
-
-	if ( ! transform ) {
-		return null;
-	}
-
-	return getBlockType( transform.blocks[ 0 ] );
-}
-
-addFilter(
-	'editor.BlockEdit',
-	'core/edit-post/validate-multiple-use/with-multiple-validation',
-	withMultipleValidation
-);