@wordpress/edit-site 4.8.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';
@@ -107,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/more-menu/site-export.js

@@ -21,6 +21,9 @@ 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(

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/sidebar/template-card/index.js

@@ -10,21 +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 { 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 ) {
@@ -35,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>

package/src/components/sidebar/template-card/style.scss

@@ -1,51 +1,65 @@
 .edit-site-template-card {
 	display: flex;
 	align-items: flex-start;
-}
 
-.edit-site-template-card__content {
-	flex-grow: 1;
-	margin-bottom: $grid-unit-05;
-}
+	&__content {
+		flex-grow: 1;
+		margin-bottom: $grid-unit-05;
+	}
 
-.edit-site-template-card__title {
-	font-weight: 500;
-	line-height: $icon-size;
-	&.edit-site-template-card__title {
-		margin: 0 0 $grid-unit-05;
+	&__title {
+		font-weight: 500;
+		line-height: $icon-size;
+		&.edit-site-template-card__title {
+			margin: 0;
+		}
 	}
-}
 
-.edit-site-template-card__description {
-	font-size: $default-font-size;
-	margin: 0 0 $grid-unit-20;
-}
+	&__description {
+		font-size: $default-font-size;
+		margin: 0 0 $grid-unit-20;
+	}
 
-.edit-site-template-card__icon {
-	flex: 0 0 $icon-size;
-	margin-right: $grid-unit-15;
-	width: $icon-size;
-	height: $icon-size;
-}
+	&__icon {
+		flex: 0 0 $icon-size;
+		margin-right: $grid-unit-15;
+		width: $icon-size;
+		height: $icon-size;
+	}
 
-h3.edit-site-template-card__template-areas-title {
-	font-weight: 500;
-	margin: 0 0 $grid-unit-10;
-}
+	&__template-areas-list {
+		margin: 0;
 
-.edit-site-template-card__template-areas-list {
-	margin: 0;
+		> li {
+			margin: 0;
+		}
+	}
 
-	> li {
-		margin: 0;
+	&__template-areas-item {
+		width: 100%;
+
+		// Override the default padding.
+		&.components-button.has-icon {
+			padding: 0;
+		}
 	}
-}
 
-.edit-site-template-card__template-areas-item {
-	width: 100%;
+	&__header {
+		display: flex;
+		justify-content: space-between;
+		margin: 0 0 $grid-unit-05;
+	}
 
-	// Override the default padding.
-	&.components-button.has-icon {
-		padding: 0;
+	&__actions {
+		line-height: 0;
+		> .components-button.is-small.has-icon {
+			padding: 0;
+			min-width: auto;
+		}
 	}
 }
+
+h3.edit-site-template-card__template-areas-title {
+	font-weight: 500;
+	margin: 0 0 $grid-unit-10;
+}

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

@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
+import { moreVertical } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../../store';
+import isTemplateRevertable from '../../../utils/is-template-revertable';
+
+export default function Actions( { template } ) {
+	const { revertTemplate } = useDispatch( editSiteStore );
+	const isRevertable = isTemplateRevertable( template );
+	if ( ! isRevertable ) {
+		return null;
+	}
+	return (
+		<DropdownMenu
+			icon={ moreVertical }
+			label={ __( 'Actions' ) }
+			className="edit-site-template-card__actions"
+			toggleProps={ { isSmall: true } }
+		>
+			{ ( { onClose } ) => (
+				<MenuGroup>
+					<MenuItem
+						info={ __( 'Restore to default state' ) }
+						onClick={ () => {
+							revertTemplate( template );
+							onClose();
+						} }
+					>
+						{ __( 'Clear customizations' ) }
+					</MenuItem>
+				</MenuGroup>
+			) }
+		</DropdownMenu>
+	);
+}