@wordpress/editor 14.33.3 → 14.34.0

package/src/components/global-styles-sidebar/default-sidebar.js

@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	ComplementaryArea,
+	ComplementaryAreaMoreMenuItem,
+} from '@wordpress/interface';
+
+export default function DefaultSidebar( {
+	className,
+	identifier,
+	title,
+	icon,
+	children,
+	closeLabel,
+	header,
+	headerClassName,
+	panelClassName,
+	isActiveByDefault,
+} ) {
+	return (
+		<>
+			<ComplementaryArea
+				className={ className }
+				scope="core"
+				identifier={ identifier }
+				title={ title }
+				icon={ icon }
+				closeLabel={ closeLabel }
+				header={ header }
+				headerClassName={ headerClassName }
+				panelClassName={ panelClassName }
+				isActiveByDefault={ isActiveByDefault }
+			>
+				{ children }
+			</ComplementaryArea>
+			<ComplementaryAreaMoreMenuItem
+				scope="core"
+				identifier={ identifier }
+				icon={ icon }
+			>
+				{ title }
+			</ComplementaryAreaMoreMenuItem>
+		</>
+	);
+}

package/src/components/global-styles-sidebar/index.js

@@ -0,0 +1,177 @@
+/**
+ * WordPress dependencies
+ */
+import { FlexItem, Flex, Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { styles, seen, backup } from '@wordpress/icons';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { useViewportMatch, usePrevious } from '@wordpress/compose';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as interfaceStore } from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import GlobalStylesUI from '../global-styles';
+import { GlobalStylesActionMenu } from '../global-styles/menu';
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+import DefaultSidebar from './default-sidebar';
+import WelcomeGuideStyles from './welcome-guide';
+
+export default function GlobalStylesSidebar() {
+	const {
+		shouldResetNavigation,
+		stylesPath,
+		showStylebook,
+		showListViewByDefault,
+		hasRevisions,
+		activeComplementaryArea,
+	} = useSelect( ( select ) => {
+		const { getActiveComplementaryArea } = select( interfaceStore );
+		const { getStylesPath, getShowStylebook } = unlock(
+			select( editorStore )
+		);
+		const _isVisualEditorMode =
+			'visual' === select( editorStore ).getEditorMode();
+		const _showListViewByDefault = select( preferencesStore ).get(
+			'core',
+			'showListViewByDefault'
+		);
+		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
+			select( coreStore );
+
+		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+		const globalStyles = globalStylesId
+			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
+			: undefined;
+
+		return {
+			stylesPath: getStylesPath(),
+			showStylebook: getShowStylebook(),
+			shouldResetNavigation:
+				'edit-site/global-styles' !==
+					getActiveComplementaryArea( 'core' ) ||
+				! _isVisualEditorMode,
+			showListViewByDefault: _showListViewByDefault,
+			hasRevisions:
+				!! globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count,
+			activeComplementaryArea:
+				select( interfaceStore ).getActiveComplementaryArea( 'core' ),
+		};
+	}, [] );
+	const { setStylesPath, setShowStylebook, resetStylesNavigation } = unlock(
+		useDispatch( editorStore )
+	);
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+
+	// Derive state from path and showStylebook
+	const isRevisionsOpened =
+		stylesPath.startsWith( '/revisions' ) && ! showStylebook;
+	const isRevisionsStyleBookOpened =
+		stylesPath.startsWith( '/revisions' ) && showStylebook;
+
+	const previousActiveArea = usePrevious( activeComplementaryArea );
+
+	// Reset navigation when sidebar opens
+	useEffect( () => {
+		if (
+			activeComplementaryArea === 'edit-site/global-styles' &&
+			previousActiveArea !== 'edit-site/global-styles'
+		) {
+			resetStylesNavigation();
+		}
+	}, [ activeComplementaryArea, previousActiveArea, resetStylesNavigation ] );
+
+	useEffect( () => {
+		if ( shouldResetNavigation ) {
+			resetStylesNavigation();
+		}
+	}, [ shouldResetNavigation, resetStylesNavigation ] );
+
+	const { setIsListViewOpened } = useDispatch( editorStore );
+
+	const toggleRevisions = () => {
+		setIsListViewOpened( false );
+		if ( isRevisionsOpened || isRevisionsStyleBookOpened ) {
+			// Close revisions, go back to root
+			setStylesPath( '/' );
+		} else {
+			// Open revisions
+			setStylesPath( '/revisions' );
+		}
+	};
+	const toggleStyleBook = () => {
+		setIsListViewOpened( showStylebook && showListViewByDefault );
+		setShowStylebook( ! showStylebook );
+	};
+
+	return (
+		<>
+			<DefaultSidebar
+				className="editor-global-styles-sidebar"
+				identifier="edit-site/global-styles"
+				title={ __( 'Styles' ) }
+				icon={ styles }
+				closeLabel={ __( 'Close Styles' ) }
+				panelClassName="editor-global-styles-sidebar__panel"
+				header={
+					<Flex
+						className="editor-global-styles-sidebar__header"
+						gap={ 1 }
+					>
+						<FlexItem>
+							<h2 className="editor-global-styles-sidebar__header-title">
+								{ __( 'Styles' ) }
+							</h2>
+						</FlexItem>
+						<Flex
+							justify="flex-end"
+							gap={ 1 }
+							className="editor-global-styles-sidebar__header-actions"
+						>
+							{ ! isMobileViewport && (
+								<FlexItem>
+									<Button
+										icon={ seen }
+										label={ __( 'Style Book' ) }
+										isPressed={ showStylebook }
+										accessibleWhenDisabled
+										disabled={ shouldResetNavigation }
+										onClick={ toggleStyleBook }
+										size="compact"
+									/>
+								</FlexItem>
+							) }
+							<FlexItem>
+								<Button
+									label={ __( 'Revisions' ) }
+									icon={ backup }
+									onClick={ toggleRevisions }
+									accessibleWhenDisabled
+									disabled={ ! hasRevisions }
+									isPressed={
+										isRevisionsOpened ||
+										isRevisionsStyleBookOpened
+									}
+									size="compact"
+								/>
+							</FlexItem>
+							<GlobalStylesActionMenu
+								onChangePath={ setStylesPath }
+							/>
+						</Flex>
+					</Flex>
+				}
+			>
+				<GlobalStylesUI
+					path={ stylesPath }
+					onPathChange={ setStylesPath }
+				/>
+			</DefaultSidebar>
+			<WelcomeGuideStyles />
+		</>
+	);
+}

package/src/components/global-styles-sidebar/style.scss

@@ -0,0 +1,119 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+
+.editor-global-styles-sidebar {
+	display: flex;
+	flex-direction: column;
+	min-height: 100%;
+
+	&__panel {
+		flex: 1;
+	}
+
+	.components-navigator-screen {
+		padding: 0;
+	}
+}
+
+.editor-global-styles-sidebar .editor-global-styles-sidebar__header-title {
+	margin: 0;
+}
+
+.editor-global-styles-sidebar .editor-global-styles-sidebar__header-actions {
+	flex: 1;
+}
+
+.editor-global-styles-sidebar .components-navigation__menu-title-heading {
+	font-size: $default-font-size * 1.2;
+	font-weight: $font-weight-medium;
+}
+
+.editor-global-styles-sidebar .components-navigation__item > button span {
+	font-weight: $font-weight-medium;
+}
+
+.editor-global-styles-sidebar .block-editor-panel-color-gradient-settings {
+	border: 0;
+}
+
+.editor-global-styles-sidebar .single-column {
+	grid-column: span 1;
+}
+
+.editor-global-styles-sidebar .components-tools-panel .span-columns {
+	grid-column: 1 / -1;
+}
+
+.editor-global-styles-sidebar__blocks-group {
+	padding-top: $grid-unit-30;
+	border-top: $border-width solid $gray-200;
+}
+
+.editor-global-styles-sidebar__blocks-group-help {
+	padding: 0 $grid-unit-20;
+}
+
+.global-styles-ui-color-palette-panel,
+.global-styles-ui-gradient-palette-panel {
+	padding: $grid-unit-20;
+}
+
+// Override the `hr` styles defined in the `ComplementaryArea` component
+// from the `@wordpress/interface` package.
+.editor-global-styles-sidebar hr {
+	margin: 0;
+}
+
+.show-icon-labels {
+	.editor-global-styles-sidebar__header {
+		.components-button.has-icon {
+			width: auto;
+
+			// Hide the button icons when labels are set to display...
+			svg {
+				display: none;
+			}
+			// ... and display labels.
+			&::after {
+				content: attr(aria-label);
+				font-size: $helptext-font-size;
+			}
+		}
+	}
+}
+
+.editor-welcome-guide {
+	width: 312px;
+
+	&.guide-styles .editor-welcome-guide__image {
+		background: #00a0d2;
+	}
+
+	&__image {
+		margin: 0 0 $grid-unit-20;
+		> img {
+			display: block;
+			max-width: 100%;
+			object-fit: cover;
+		}
+	}
+
+	&__heading {
+		font-family: $default-font;
+		font-size: 24px;
+		line-height: 1.4;
+		margin: $grid-unit-20 0 $grid-unit-20 0;
+		padding: 0 $grid-unit-40;
+	}
+
+	&__text {
+		font-size: $default-font-size;
+		line-height: 1.4;
+		margin: 0 0 $grid-unit-20 0;
+		padding: 0 $grid-unit-40;
+
+		img {
+			vertical-align: bottom;
+		}
+	}
+}

package/src/components/global-styles-sidebar/welcome-guide-image.js

@@ -0,0 +1,11 @@
+export default function WelcomeGuideImage( { nonAnimatedSrc, animatedSrc } ) {
+	return (
+		<picture className="editor-welcome-guide__image">
+			<source
+				srcSet={ nonAnimatedSrc }
+				media="(prefers-reduced-motion: reduce)"
+			/>
+			<img src={ animatedSrc } width="312" height="240" alt="" />
+		</picture>
+	);
+}

package/src/components/global-styles-sidebar/welcome-guide.js

@@ -0,0 +1,136 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { ExternalLink, Guide } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { store as interfaceStore } from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import WelcomeGuideImage from './welcome-guide-image';
+
+export default function WelcomeGuideStyles() {
+	const { toggle } = useDispatch( preferencesStore );
+
+	const { isActive, isStylesOpen } = useSelect( ( select ) => {
+		const sidebar =
+			select( interfaceStore ).getActiveComplementaryArea( 'core' );
+
+		return {
+			isActive: !! select( preferencesStore ).get(
+				'core/edit-site',
+				'welcomeGuideStyles'
+			),
+			isStylesOpen: sidebar === 'edit-site/global-styles',
+		};
+	}, [] );
+
+	if ( ! isActive || ! isStylesOpen ) {
+		return null;
+	}
+
+	const welcomeLabel = __( 'Welcome to Styles' );
+
+	return (
+		<Guide
+			className="editor-welcome-guide guide-styles"
+			contentLabel={ welcomeLabel }
+			finishButtonText={ __( 'Get started' ) }
+			onFinish={ () => toggle( 'core/edit-site', 'welcomeGuideStyles' ) }
+			pages={ [
+				{
+					image: (
+						<WelcomeGuideImage
+							nonAnimatedSrc="https://s.w.org/images/block-editor/welcome-to-styles.svg?1"
+							animatedSrc="https://s.w.org/images/block-editor/welcome-to-styles.gif?1"
+						/>
+					),
+					content: (
+						<>
+							<h1 className="editor-welcome-guide__heading">
+								{ welcomeLabel }
+							</h1>
+							<p className="editor-welcome-guide__text">
+								{ __(
+									'Tweak your site, or give it a whole new look! Get creative — how about a new color palette for your buttons, or choosing a new font? Take a look at what you can do here.'
+								) }
+							</p>
+						</>
+					),
+				},
+				{
+					image: (
+						<WelcomeGuideImage
+							nonAnimatedSrc="https://s.w.org/images/block-editor/set-the-design.svg?1"
+							animatedSrc="https://s.w.org/images/block-editor/set-the-design.gif?1"
+						/>
+					),
+					content: (
+						<>
+							<h1 className="editor-welcome-guide__heading">
+								{ __( 'Set the design' ) }
+							</h1>
+							<p className="editor-welcome-guide__text">
+								{ __(
+									'You can customize your site as much as you like with different colors, typography, and layouts. Or if you prefer, just leave it up to your theme to handle!'
+								) }
+							</p>
+						</>
+					),
+				},
+				{
+					image: (
+						<WelcomeGuideImage
+							nonAnimatedSrc="https://s.w.org/images/block-editor/personalize-blocks.svg?1"
+							animatedSrc="https://s.w.org/images/block-editor/personalize-blocks.gif?1"
+						/>
+					),
+					content: (
+						<>
+							<h1 className="editor-welcome-guide__heading">
+								{ __( 'Personalize blocks' ) }
+							</h1>
+							<p className="editor-welcome-guide__text">
+								{ __(
+									'You can adjust your blocks to ensure a cohesive experience across your site — add your unique colors to a branded Button block, or adjust the Heading block to your preferred size.'
+								) }
+							</p>
+						</>
+					),
+				},
+				{
+					image: (
+						<WelcomeGuideImage
+							nonAnimatedSrc="https://s.w.org/images/block-editor/welcome-documentation.svg"
+							animatedSrc="https://s.w.org/images/block-editor/welcome-documentation.gif"
+						/>
+					),
+					content: (
+						<>
+							<h1 className="editor-welcome-guide__heading">
+								{ __( 'Learn more' ) }
+							</h1>
+							<p className="editor-welcome-guide__text">
+								{ __(
+									'New to block themes and styling your site?'
+								) }{ ' ' }
+								<ExternalLink
+									href={ __(
+										'https://wordpress.org/documentation/article/styles-overview/'
+									) }
+								>
+									{ __(
+										'Here’s a detailed guide to learn how to make the most of it.'
+									) }
+								</ExternalLink>
+							</p>
+						</>
+					),
+				},
+			] }
+		/>
+	);
+}

package/src/components/header/index.js

@@ -50,9 +50,7 @@ const backButtonVariations = {
 function Header( {
 	customSaveButton,
 	forceIsDirty,
-	forceDisableBlockTools,
 	setEntitiesSavedStatesCallback,
-	title,
 } ) {
 	const isWideViewport = useViewportMatch( 'large' );
 	const isLargeViewport = useViewportMatch( 'medium' );
@@ -65,6 +63,7 @@ function Header( {
 		hasFixedToolbar,
 		hasBlockSelection,
 		hasSectionRootClientId,
+		isStylesCanvasActive,
 	} = useSelect( ( select ) => {
 		const { get: getPreference } = select( preferencesStore );
 		const {
@@ -72,6 +71,9 @@ function Header( {
 			getCurrentPostType,
 			isPublishSidebarOpened: _isPublishSidebarOpened,
 		} = select( editorStore );
+		const { getStylesPath, getShowStylebook } = unlock(
+			select( editorStore )
+		);
 		const { getBlockSelectionStart, getSectionRootClientId } = unlock(
 			select( blockEditorStore )
 		);
@@ -84,6 +86,9 @@ function Header( {
 			hasFixedToolbar: getPreference( 'core', 'fixedToolbar' ),
 			hasBlockSelection: !! getBlockSelectionStart(),
 			hasSectionRootClientId: !! getSectionRootClientId(),
+			isStylesCanvasActive:
+				!! getStylesPath()?.startsWith( '/revisions' ) ||
+				getShowStylebook(),
 		};
 	}, [] );
 
@@ -96,7 +101,7 @@ function Header( {
 			NAVIGATION_POST_TYPE,
 			TEMPLATE_PART_POST_TYPE,
 			PATTERN_POST_TYPE,
-		].includes( postType ) || forceDisableBlockTools;
+		].includes( postType ) || isStylesCanvasActive;
 
 	const [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] =
 		useState( true );
@@ -129,7 +134,7 @@ function Header( {
 				transition={ { type: 'tween' } }
 			>
 				<DocumentTools
-					disableBlockTools={ forceDisableBlockTools || isTextEditor }
+					disableBlockTools={ isStylesCanvasActive || isTextEditor }
 				/>
 				{ hasFixedToolbar && isLargeViewport && (
 					<CollapsibleBlockToolbar
@@ -144,7 +149,7 @@ function Header( {
 					variants={ toolbarVariations }
 					transition={ { type: 'tween' } }
 				>
-					<DocumentBar title={ title } />
+					<DocumentBar />
 				</motion.div>
 			) }
 			<motion.div
@@ -176,7 +181,7 @@ function Header( {
 				/>
 
 				{ isWideViewport && canBeZoomedOut && (
-					<ZoomOutToggle disabled={ forceDisableBlockTools } />
+					<ZoomOutToggle disabled={ isStylesCanvasActive } />
 				) }
 
 				{ ( isWideViewport || ! showIconLabels ) && (

package/src/components/post-featured-image/index.js

@@ -25,15 +25,19 @@ import {
 	MediaUpload,
 	MediaUploadCheck,
 	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
+import { unlock } from '../../lock-unlock';
 import PostFeaturedImageCheck from './check';
 import { store as editorStore } from '../../store';
 
+const { MediaUploadModal } = unlock( blockEditorPrivateApis );
+
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 
 // Used when labels from post type were not yet loaded or when they are not present.
@@ -48,6 +52,45 @@ const instructions = (
 	</p>
 );
 
+/**
+ * Conditional Media component that uses MediaUploadModal when experiment is enabled,
+ * otherwise falls back to MediaUpload.
+ *
+ * @param {Object}   root0        Component props.
+ * @param {Function} root0.render Render prop function that receives { open } object.
+ * @return {JSX.Element} The component.
+ */
+function ConditionalMediaUpload( { render, ...props } ) {
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+	const mediaUpload = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		return getSettings().mediaUpload;
+	}, [] );
+
+	if ( window.__experimentalDataViewsMediaModal ) {
+		return (
+			<>
+				{ render && render( { open: () => setIsModalOpen( true ) } ) }
+				<MediaUploadModal
+					{ ...props }
+					isOpen={ isModalOpen }
+					onClose={ () => {
+						setIsModalOpen( false );
+						props.onClose?.();
+					} }
+					onSelect={ ( media ) => {
+						setIsModalOpen( false );
+						props.onSelect?.( media );
+					} }
+					onUpload={ mediaUpload }
+				/>
+			</>
+		);
+	}
+
+	return <MediaUpload { ...props } render={ render } />;
+}
+
 function getMediaDetails( media, postId ) {
 	if ( ! media ) {
 		return {};
@@ -181,7 +224,7 @@ function PostFeaturedImage( {
 					</div>
 				) }
 				<MediaUploadCheck fallback={ instructions }>
-					<MediaUpload
+					<ConditionalMediaUpload
 						title={
 							postType?.labels?.featured_image ||
 							DEFAULT_FEATURE_IMAGE_LABEL

package/src/components/post-last-revision/style.scss

@@ -3,7 +3,7 @@
 
 .editor-post-last-revision__title {
 	width: 100%;
-	font-weight: 500;
+	font-weight: $font-weight-medium;
 }
 
 .editor-post-last-revision__title.components-button.has-icon {

package/src/components/post-panel-row/style.scss

@@ -32,6 +32,7 @@
 		text-wrap: pretty;
 		height: auto;
 		min-height: $button-size-compact;
+		font-weight: $font-weight-regular;
 	}
 
 	.components-dropdown {

package/src/components/post-publish-panel/style.scss

@@ -182,7 +182,7 @@
 }
 
 .post-publish-panel__postpublish-header {
-	font-weight: 500;
+	font-weight: $font-weight-medium;
 }
 
 .post-publish-panel__postpublish-subheader {

package/src/components/post-publish-panel/test/__snapshots__/index.js.snap

@@ -19,7 +19,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
 
 .emotion-4 {
   font-size: 11px;
-  font-weight: 500;
+  font-weight: 499;
   line-height: 1.4;
   text-transform: uppercase;
   display: block;
@@ -246,7 +246,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
 
 .emotion-4 {
   font-size: 11px;
-  font-weight: 500;
+  font-weight: 499;
   line-height: 1.4;
   text-transform: uppercase;
   display: block;

package/src/components/provider/index.js

@@ -32,7 +32,6 @@ import useCommands from '../commands';
 import BlockRemovalWarnings from '../block-removal-warnings';
 import StartPageOptions from '../start-page-options';
 import KeyboardShortcutHelpModal from '../keyboard-shortcut-help-modal';
-import ContentOnlySettingsMenu from '../block-settings-menu/content-only-settings-menu';
 import StartTemplateOptions from '../start-template-options';
 import EditorKeyboardShortcuts from '../global-keyboard-shortcuts';
 import PatternRenameModal from '../pattern-rename-modal';
@@ -370,7 +369,6 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 								<>
 									<PatternsMenuItems />
 									<TemplatePartMenuItems />
-									<ContentOnlySettingsMenu />
 									{ mode === 'template-locked' && (
 										<DisableNonPageContentBlocks />
 									) }