@wordpress/edit-site 4.6.0 → 4.9.0

package/src/components/global-styles/use-global-styles-output.js

@@ -283,7 +283,14 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 					styles: value,
 					selector: blockSelectors[ blockName ].selector
 						.split( ',' )
-						.map( ( sel ) => sel + ' ' + ELEMENTS[ elementName ] )
+						.map( ( sel ) => {
+							const elementSelectors =
+								ELEMENTS[ elementName ].split( ',' );
+							return elementSelectors.map(
+								( elementSelector ) =>
+									sel + ' ' + elementSelector
+							);
+						} )
 						.join( ',' ),
 				} );
 			}
@@ -390,10 +397,42 @@ export const toStyles = ( tree, blockSelectors, hasBlockGapSupport ) => {
 
 		// Process the remaning block styles (they use either normal block class or __experimentalSelector).
 		const declarations = getStylesDeclarations( styles );
-		if ( declarations.length === 0 ) {
-			return;
+		if ( declarations?.length ) {
+			ruleset = ruleset + `${ selector }{${ declarations.join( ';' ) };}`;
+		}
+
+		// Check for pseudo selector in `styles` and handle separately.
+		const psuedoSelectorStyles = Object.entries( styles ).filter(
+			( [ key ] ) => key.startsWith( ':' )
+		);
+
+		if ( psuedoSelectorStyles?.length ) {
+			psuedoSelectorStyles.forEach( ( [ pseudoKey, pseudoRule ] ) => {
+				const pseudoDeclarations = getStylesDeclarations( pseudoRule );
+
+				if ( ! pseudoDeclarations?.length ) {
+					return;
+				}
+
+				// `selector` maybe provided in a form
+				// where block level selectors have sub element
+				// selectors appended to them as a comma seperated
+				// string.
+				// e.g. `h1 a,h2 a,h3 a,h4 a,h5 a,h6 a`;
+				// Split and append pseudo selector to create
+				// the proper rules to target the elements.
+				const _selector = selector
+					.split( ',' )
+					.map( ( sel ) => sel + pseudoKey )
+					.join( ',' );
+
+				const psuedoRule = `${ _selector }{${ pseudoDeclarations.join(
+					';'
+				) };}`;
+
+				ruleset = ruleset + psuedoRule;
+			} );
 		}
-		ruleset = ruleset + `${ selector }{${ declarations.join( ';' ) };}`;
 	} );
 
 	/* Add alignment / layout styles */

package/src/components/global-styles/utils.js

@@ -11,6 +11,7 @@ export const ROOT_BLOCK_SUPPORTS = [
 	'backgroundColor',
 	'color',
 	'linkColor',
+	'buttonColor',
 	'fontFamily',
 	'fontSize',
 	'fontStyle',
@@ -75,6 +76,8 @@ const STYLE_PATH_TO_CSS_VAR_INFIX = {
 	'color.background': 'color',
 	'color.text': 'color',
 	'elements.link.color.text': 'color',
+	'elements.button.color.text': 'color',
+	'elements.button.backgroundColor': 'background-color',
 	'color.gradient': 'gradient',
 	'typography.fontSize': 'font-size',
 	'typography.fontFamily': 'font-family',

package/src/components/header/index.js

@@ -6,6 +6,7 @@ import { useViewportMatch } from '@wordpress/compose';
 import {
 	ToolSelector,
 	__experimentalPreviewOptions as PreviewOptions,
+	NavigableToolbar,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { PinnedItems } from '@wordpress/interface';
@@ -57,9 +58,8 @@ export default function Header( {
 			getEditorMode,
 		} = select( editSiteStore );
 		const { getEditedEntityRecord } = select( coreStore );
-		const { __experimentalGetTemplateInfo: getTemplateInfo } = select(
-			editorStore
-		);
+		const { __experimentalGetTemplateInfo: getTemplateInfo } =
+			select( editorStore );
 		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
 
 		const postType = getEditedPostType();
@@ -108,47 +108,72 @@ export default function Header( {
 
 	return (
 		<div className="edit-site-header">
-			<div className="edit-site-header_start">
+			<NavigableToolbar
+				className="edit-site-header_start"
+				aria-label={ __( 'Document tools' ) }
+			>
 				<div className="edit-site-header__toolbar">
-					<Button
+					<ToolbarItem
 						ref={ inserterButton }
+						as={ Button }
+						className="edit-site-header-toolbar__inserter-toggle"
 						variant="primary"
 						isPressed={ isInserterOpen }
-						className="edit-site-header-toolbar__inserter-toggle"
-						disabled={ ! isVisualMode }
 						onMouseDown={ preventDefault }
 						onClick={ openInserter }
+						disabled={ ! isVisualMode }
 						icon={ plus }
+						/* translators: button label text should, if possible, be under 16
+				characters. */
 						label={ _x(
 							'Toggle block inserter',
 							'Generic label for block inserter button'
 						) }
+						showTooltip={ ! showIconLabels }
 					>
 						{ showIconLabels &&
 							( ! isInserterOpen ? __( 'Add' ) : __( 'Close' ) ) }
-					</Button>
+					</ToolbarItem>
 					{ isLargeViewport && (
 						<>
 							<ToolbarItem
 								as={ ToolSelector }
+								showTooltip={ ! showIconLabels }
+								variant={
+									showIconLabels ? 'tertiary' : undefined
+								}
 								disabled={ ! isVisualMode }
 							/>
-							<UndoButton />
-							<RedoButton />
-							<Button
+							<ToolbarItem
+								as={ UndoButton }
+								showTooltip={ ! showIconLabels }
+								variant={
+									showIconLabels ? 'tertiary' : undefined
+								}
+							/>
+							<ToolbarItem
+								as={ RedoButton }
+								showTooltip={ ! showIconLabels }
+								variant={
+									showIconLabels ? 'tertiary' : undefined
+								}
+							/>
+							<ToolbarItem
+								as={ Button }
 								className="edit-site-header-toolbar__list-view-toggle"
-								disabled={ ! isVisualMode }
 								icon={ listView }
+								disabled={ ! isVisualMode }
 								isPressed={ isListViewOpen }
 								/* translators: button label text should, if possible, be under 16 characters. */
 								label={ __( 'List View' ) }
 								onClick={ toggleListView }
 								shortcut={ listViewShortcut }
+								showTooltip={ ! showIconLabels }
 							/>
 						</>
 					) }
 				</div>
-			</div>
+			</NavigableToolbar>
 
 			<div className="edit-site-header_center">
 				<DocumentActions

package/src/components/header/mode-switcher/index.js

@@ -36,10 +36,10 @@ function ModeSwitcher() {
 			shortcut: select(
 				keyboardShortcutsStore
 			).getShortcutRepresentation( 'core/edit-site/toggle-mode' ),
-			isRichEditingEnabled: select( editSiteStore ).getSettings()
-				.richEditingEnabled,
-			isCodeEditingEnabled: select( editSiteStore ).getSettings()
-				.codeEditingEnabled,
+			isRichEditingEnabled:
+				select( editSiteStore ).getSettings().richEditingEnabled,
+			isCodeEditingEnabled:
+				select( editSiteStore ).getSettings().codeEditingEnabled,
 			mode: select( editSiteStore ).getEditorMode(),
 		} ),
 		[]

package/src/components/header/more-menu/copy-content-menu-item.js

@@ -18,9 +18,8 @@ export default function CopyContentMenuItem() {
 	const { createNotice } = useDispatch( noticesStore );
 	const getText = useSelect( ( select ) => {
 		return () => {
-			const { getEditedPostId, getEditedPostType } = select(
-				editSiteStore
-			);
+			const { getEditedPostId, getEditedPostType } =
+				select( editSiteStore );
 			const { getEditedEntityRecord } = select( coreStore );
 			const record = getEditedEntityRecord(
 				'postType',
@@ -49,5 +48,5 @@ export default function CopyContentMenuItem() {
 
 	const ref = useCopyToClipboard( getText, onSuccess );
 
-	return <MenuItem ref={ ref }>{ __( 'Copy all content' ) }</MenuItem>;
+	return <MenuItem ref={ ref }>{ __( 'Copy all blocks' ) }</MenuItem>;
 }

package/src/components/header/more-menu/site-export.js

@@ -21,14 +21,16 @@ export default function SiteExport() {
 			const response = await apiFetch( {
 				path: '/wp-block-editor/v1/export',
 				parse: false,
+				headers: {
+					Accept: 'application/zip',
+				},
 			} );
 			const blob = await response.blob();
 			const contentDisposition = response.headers.get(
 				'content-disposition'
 			);
-			const contentDispositionMatches = contentDisposition.match(
-				/=(.+)\.zip/
-			);
+			const contentDispositionMatches =
+				contentDisposition.match( /=(.+)\.zip/ );
 			const fileName = contentDispositionMatches[ 1 ]
 				? contentDispositionMatches[ 1 ]
 				: 'edit-site-export';

package/src/components/header/style.scss

@@ -16,9 +16,14 @@ $header-toolbar-min-width: 335px;
 		@include reduce-motion("transition");
 	}
 
-	.edit-site-header_start,
+	.edit-site-header_start {
+		display: flex;
+		border: none;
+	}
+
 	.edit-site-header_end {
 		display: flex;
+		justify-content: flex-end;
 	}
 
 	.edit-site-header_center {
@@ -33,10 +38,6 @@ $header-toolbar-min-width: 335px;
 		// See https://dev.w3.org/csswg/css-flexbox/#min-size-auto
 		min-width: 0;
 	}
-
-	.edit-site-header_end {
-		justify-content: flex-end;
-	}
 }
 
 // Keeps the document title centered when the sidebar is open
@@ -152,6 +153,49 @@ body.is-navigation-sidebar-open {
 	}
 }
 
+.edit-site-header_start {
+	display: flex;
+	border: none;
+
+	// The Toolbar component adds different styles to buttons, so we reset them
+	// here to the original button styles
+	.edit-site-header__toolbar > .components-button.has-icon,
+	.edit-site-header__toolbar > .components-dropdown > .components-button.has-icon {
+		height: $button-size;
+		min-width: $button-size;
+		padding: 6px;
+
+		&.is-pressed {
+			background: $gray-900;
+		}
+
+		&:focus:not(:disabled) {
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 $border-width $white;
+			outline: 1px solid transparent;
+		}
+
+		&::before {
+			display: none;
+		}
+	}
+
+	.edit-site-header__toolbar > .edit-site-header-toolbar__inserter-toggle.has-icon {
+		margin-right: $grid-unit-10;
+		// Special dimensions for this button.
+		min-width: 32px;
+		width: 32px;
+		height: 32px;
+		padding: 0;
+	}
+
+	.edit-site-header__toolbar > .edit-site-header-toolbar__inserter-toggle.has-text.has-icon {
+		width: auto;
+		padding: 0 $grid-unit-10;
+	}
+
+
+}
+
 // Button text label styles
 
 .show-icon-labels .edit-site-header {
@@ -192,4 +236,8 @@ body.is-navigation-sidebar-open {
 		height: 36px;
 		padding: 0 6px;
 	}
+
+	.edit-site-header_start .edit-site-header__toolbar > * + * {
+		margin-left: $grid-unit-10;
+	}
 }

package/src/components/header/undo-redo/redo.js

@@ -7,8 +7,9 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { redo as redoIcon, undo as undoIcon } from '@wordpress/icons';
 import { displayShortcut } from '@wordpress/keycodes';
 import { store as coreStore } from '@wordpress/core-data';
+import { forwardRef } from '@wordpress/element';
 
-export default function RedoButton() {
+function RedoButton( props, ref ) {
 	const hasRedo = useSelect(
 		( select ) => select( coreStore ).hasRedo(),
 		[]
@@ -16,6 +17,8 @@ export default function RedoButton() {
 	const { redo } = useDispatch( coreStore );
 	return (
 		<Button
+			{ ...props }
+			ref={ ref }
 			icon={ ! isRTL() ? redoIcon : undoIcon }
 			label={ __( 'Redo' ) }
 			shortcut={ displayShortcut.primaryShift( 'z' ) }
@@ -27,3 +30,5 @@ export default function RedoButton() {
 		/>
 	);
 }
+
+export default forwardRef( RedoButton );

package/src/components/header/undo-redo/undo.js

@@ -7,8 +7,9 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { undo as undoIcon, redo as redoIcon } from '@wordpress/icons';
 import { displayShortcut } from '@wordpress/keycodes';
 import { store as coreStore } from '@wordpress/core-data';
+import { forwardRef } from '@wordpress/element';
 
-export default function UndoButton() {
+function UndoButton( props, ref ) {
 	const hasUndo = useSelect(
 		( select ) => select( coreStore ).hasUndo(),
 		[]
@@ -16,6 +17,8 @@ export default function UndoButton() {
 	const { undo } = useDispatch( coreStore );
 	return (
 		<Button
+			{ ...props }
+			ref={ ref }
 			icon={ ! isRTL() ? undoIcon : redoIcon }
 			label={ __( 'Undo' ) }
 			shortcut={ displayShortcut.primary( 'z' ) }
@@ -27,3 +30,5 @@ export default function UndoButton() {
 		/>
 	);
 }
+
+export default forwardRef( UndoButton );

package/src/components/keyboard-shortcut-help-modal/config.js

@@ -20,8 +20,20 @@ export const textFormattingShortcuts = [
 		keyCombination: { modifier: 'primaryShift', character: 'k' },
 		description: __( 'Remove a link.' ),
 	},
+	{
+		keyCombination: { character: '[[' },
+		description: __( 'Insert a link to a post or page' ),
+	},
 	{
 		keyCombination: { modifier: 'primary', character: 'u' },
 		description: __( 'Underline the selected text.' ),
 	},
+	{
+		keyCombination: { modifier: 'access', character: 'd' },
+		description: __( 'Strikethrough the selected text.' ),
+	},
+	{
+		keyCombination: { modifier: 'access', character: 'x' },
+		description: __( 'Make the selected text inline code.' ),
+	},
 ];

package/src/components/keyboard-shortcuts/index.js

@@ -19,10 +19,8 @@ import { SIDEBAR_BLOCK } from '../sidebar/constants';
 import { STORE_NAME } from '../../store/constants';
 
 function KeyboardShortcuts( { openEntitiesSavedStates } ) {
-	const {
-		__experimentalGetDirtyEntityRecords,
-		isSavingEntityRecord,
-	} = useSelect( coreStore );
+	const { __experimentalGetDirtyEntityRecords, isSavingEntityRecord } =
+		useSelect( coreStore );
 	const { getEditorMode } = useSelect( editSiteStore );
 	const isListViewOpen = useSelect(
 		( select ) => select( editSiteStore ).isListViewOpened(),
@@ -36,12 +34,10 @@ function KeyboardShortcuts( { openEntitiesSavedStates } ) {
 		[]
 	);
 	const { redo, undo } = useDispatch( coreStore );
-	const { setIsListViewOpened, switchEditorMode } = useDispatch(
-		editSiteStore
-	);
-	const { enableComplementaryArea, disableComplementaryArea } = useDispatch(
-		interfaceStore
-	);
+	const { setIsListViewOpened, switchEditorMode } =
+		useDispatch( editSiteStore );
+	const { enableComplementaryArea, disableComplementaryArea } =
+		useDispatch( interfaceStore );
 
 	useShortcut( 'core/edit-site/save', ( event ) => {
 		event.preventDefault();

package/src/components/list/actions/index.js

@@ -19,9 +19,8 @@ import RenameMenuItem from './rename-menu-item';
 export default function Actions( { template } ) {
 	const { removeTemplate, revertTemplate } = useDispatch( editSiteStore );
 	const { saveEditedEntityRecord } = useDispatch( coreStore );
-	const { createSuccessNotice, createErrorNotice } = useDispatch(
-		noticesStore
-	);
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
 
 	const isRemovable = isTemplateRemovable( template );
 	const isRevertable = isTemplateRevertable( template );

package/src/components/list/actions/rename-menu-item.js

@@ -19,12 +19,10 @@ export default function RenameMenuItem( { template, onClose } ) {
 	const [ title, setTitle ] = useState( () => template.title.rendered );
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 
-	const { editEntityRecord, saveEditedEntityRecord } = useDispatch(
-		coreStore
-	);
-	const { createSuccessNotice, createErrorNotice } = useDispatch(
-		noticesStore
-	);
+	const { editEntityRecord, saveEditedEntityRecord } =
+		useDispatch( coreStore );
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
 
 	if ( ! template.is_custom ) {
 		return null;

package/src/components/list/added-by.js

@@ -106,9 +106,10 @@ function AddedByPlugin( { slug, isCustomized } ) {
 }
 
 function AddedByAuthor( { id } ) {
-	const user = useSelect( ( select ) => select( coreStore ).getUser( id ), [
-		id,
-	] );
+	const user = useSelect(
+		( select ) => select( coreStore ).getUser( id ),
+		[ id ]
+	);
 
 	return (
 		<BaseAddedBy

package/src/components/navigation-sidebar/index.js

@@ -18,10 +18,8 @@ export const {
 	Slot: NavigationPanelPreviewSlot,
 } = createSlotFill( 'EditSiteNavigationPanelPreview' );
 
-const {
-	Fill: NavigationSidebarFill,
-	Slot: NavigationSidebarSlot,
-} = createSlotFill( 'EditSiteNavigationSidebar' );
+const { Fill: NavigationSidebarFill, Slot: NavigationSidebarSlot } =
+	createSlotFill( 'EditSiteNavigationSidebar' );
 
 function NavigationSidebar( { isDefaultOpen = false, activeTemplateType } ) {
 	const isDesktopViewport = useViewportMatch( 'medium' );

package/src/components/save-button/index.js

@@ -16,10 +16,8 @@ export default function SaveButton( {
 	isEntitiesSavedStatesOpen,
 } ) {
 	const { isDirty, isSaving } = useSelect( ( select ) => {
-		const {
-			__experimentalGetDirtyEntityRecords,
-			isSavingEntityRecord,
-		} = select( coreStore );
+		const { __experimentalGetDirtyEntityRecords, isSavingEntityRecord } =
+			select( coreStore );
 		const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
 		return {
 			isDirty: dirtyEntityRecords.length > 0,

package/src/components/sidebar/index.js

@@ -28,9 +28,10 @@ export const SidebarInspectorFill = InspectorFill;
 export function SidebarComplementaryAreaFills() {
 	const { sidebar, isEditorSidebarOpened, hasBlockSelection } = useSelect(
 		( select ) => {
-			const _sidebar = select(
-				interfaceStore
-			).getActiveComplementaryArea( STORE_NAME );
+			const _sidebar =
+				select( interfaceStore ).getActiveComplementaryArea(
+					STORE_NAME
+				);
 			const _isEditorSidebarOpened = [
 				SIDEBAR_BLOCK,
 				SIDEBAR_TEMPLATE,
@@ -38,9 +39,8 @@ export function SidebarComplementaryAreaFills() {
 			return {
 				sidebar: _sidebar,
 				isEditorSidebarOpened: _isEditorSidebarOpened,
-				hasBlockSelection: !! select(
-					blockEditorStore
-				).getBlockSelectionStart(),
+				hasBlockSelection:
+					!! select( blockEditorStore ).getBlockSelectionStart(),
 			};
 		},
 		[]

package/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js

@@ -35,9 +35,8 @@ export default function NavigationInspector() {
 			getBlock,
 		} = select( blockEditorStore );
 
-		const { getEntityRecords, hasFinishedResolution, isResolving } = select(
-			coreStore
-		);
+		const { getEntityRecords, hasFinishedResolution, isResolving } =
+			select( coreStore );
 
 		const navigationMenusQuery = [
 			'postType',
@@ -46,14 +45,12 @@ export default function NavigationInspector() {
 		];
 
 		// Get the active Navigation block (if present).
-		const selectedNavId = __experimentalGetActiveBlockIdByBlockNames(
-			'core/navigation'
-		);
+		const selectedNavId =
+			__experimentalGetActiveBlockIdByBlockNames( 'core/navigation' );
 
 		// Get all Navigation blocks currently within the editor canvas.
-		const navBlockIds = __experimentalGetGlobalBlocksByName(
-			'core/navigation'
-		);
+		const navBlockIds =
+			__experimentalGetGlobalBlocksByName( 'core/navigation' );
 		const idToRef = {};
 		navBlockIds.forEach( ( id ) => {
 			idToRef[ id ] = getBlock( id )?.attributes?.ref;

package/src/components/sidebar/navigation-menu-sidebar/style.scss

@@ -14,7 +14,6 @@
 	padding: $grid-unit-20;
 
 	.block-editor-list-view-leaf .block-editor-list-view-block-contents {
-		align-items: flex-start;
 		white-space: normal;
 	}
 

package/src/components/sidebar/template-card/index.js

@@ -10,22 +10,26 @@ import { store as coreStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../../store';
+import TemplateActions from './template-actions';
 import TemplateAreas from './template-areas';
 
 export default function TemplateCard() {
-	const { title, description, icon } = useSelect( ( select ) => {
+	const {
+		info: { title, description, icon },
+		template,
+	} = useSelect( ( select ) => {
 		const { getEditedPostType, getEditedPostId } = select( editSiteStore );
-		const { getEntityRecord } = select( coreStore );
-		const { __experimentalGetTemplateInfo: getTemplateInfo } = select(
-			editorStore
-		);
+		const { getEditedEntityRecord } = select( coreStore );
+		const { __experimentalGetTemplateInfo: getTemplateInfo } =
+			select( editorStore );
 
 		const postType = getEditedPostType();
 		const postId = getEditedPostId();
-		const record = getEntityRecord( 'postType', postType, postId );
+		const record = getEditedEntityRecord( 'postType', postType, postId );
+
 		const info = record ? getTemplateInfo( record ) : {};
 
-		return info;
+		return { info, template: record };
 	}, [] );
 
 	if ( ! title && ! description ) {
@@ -36,11 +40,15 @@ export default function TemplateCard() {
 		<div className="edit-site-template-card">
 			<Icon className="edit-site-template-card__icon" icon={ icon } />
 			<div className="edit-site-template-card__content">
-				<h2 className="edit-site-template-card__title">{ title }</h2>
+				<div className="edit-site-template-card__header">
+					<h2 className="edit-site-template-card__title">
+						{ title }
+					</h2>
+					<TemplateActions template={ template } />
+				</div>
 				<div className="edit-site-template-card__description">
 					{ description }
 				</div>
-
 				<TemplateAreas />
 			</div>
 		</div>