@wordpress/edit-site 4.19.0 → 5.0.0

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

@@ -1,152 +0,0 @@
-.edit-site-navigation-panel {
-	height: 100%;
-	position: relative;
-	width: 0;
-	overflow: hidden;
-	background: $gray-900;
-	color: $white;
-	transition: width 100ms linear;
-	@include reduce-motion("transition");
-}
-
-.edit-site-navigation-panel__inner {
-	position: relative;
-	width: $nav-sidebar-width;
-	height: 100%;
-	overflow: hidden;
-	// Inner container is hidden to remove menu from the accessibility tree when not visible.
-	// Setting visibility here (rather than on the parent container) preserves the slide transition.
-	visibility: hidden;
-	// Transition settings should match parent container.
-	transition: visibility 100ms linear;
-	@include reduce-motion("transition");
-}
-
-.edit-site-navigation-panel.is-open {
-	width: $nav-sidebar-width;
-
-	.edit-site-navigation-panel__inner {
-		visibility: visible;
-	}
-}
-
-.edit-site-navigation-panel__site-title-container {
-	height: $header-height;
-	padding-left: $header-height;
-	margin: 0 $grid-unit-20 0 $grid-unit-10;
-	display: flex;
-	align-items: center;
-}
-
-.edit-site-navigation-panel__site-title {
-	font-style: normal;
-	font-weight: 600;
-	font-size: 14px; /* Matches menu items */
-	line-height: 20px;
-	color: $gray-300;
-
-	display: -webkit-box;
-	-webkit-line-clamp: 2;
-	-webkit-box-orient: vertical;
-	overflow: hidden;
-}
-
-.edit-site-navigation-panel__scroll-container {
-	overflow-x: hidden;
-	overflow-y: auto;
-	height: calc(100% - #{$header-height});
-}
-
-.edit-site-navigation-panel__back-to-dashboard.components-button.is-tertiary {
-	height: $button-size;
-	margin-top: $grid-unit-30;
-	padding: $grid-unit $grid-unit-20 $grid-unit $grid-unit;
-
-	&:focus:not(:disabled) {
-		border-bottom-color: transparent;
-	}
-}
-
-.edit-site-navigation-panel__preview {
-	display: none;
-	border: $border-width solid $gray-400;
-	width: $nav-sidebar-width;
-	padding: $grid-unit-20;
-	background: $white;
-	box-shadow: $shadow-popover;
-	border-radius: $radius-block-ui;
-	position: absolute;
-	top: $header-height + $grid-unit-15 + 1px; // +1px for the header border
-	left: $nav-sidebar-width + $grid-unit-15;
-	color: $gray-900;
-	z-index: z-index(".edit-site-navigation-panel__preview");
-
-	@include break-medium {
-		display: block;
-	}
-}
-
-.edit-site-navigation-panel__template-item {
-	display: block;
-
-	.components-button {
-		display: flex;
-		flex-direction: column;
-		align-items: flex-start;
-		justify-content: center;
-		height: auto;
-		min-height: $button-size;
-		text-align: left;
-		padding-left: $grid-unit-20;
-		padding-right: $grid-unit-20;
-		color: inherit;
-	}
-}
-
-.edit-site-navigation-panel__template-item-title {
-	font-size: 14px;
-	line-height: 20px;
-
-	em {
-		margin-right: 1ch;
-	}
-}
-
-.edit-site-navigation-panel__template-parts .components-navigation__menu-title-heading {
-	text-transform: capitalize;
-}
-
-.edit-site-navigation-panel__template-part-item .components-navigation__item-title {
-	text-transform: capitalize;
-}
-
-.components-navigation__item + .edit-site-navigation-panel__template-item {
-	margin-top: $grid-unit-20;
-}
-
-.edit-site-navigation-panel__template-item + .edit-site-navigation-panel__template-item {
-	margin-top: $grid-unit-10;
-}
-
-.edit-site-navigation-panel__info-wrapper {
-	padding: $grid-unit-05 0;
-}
-
-.edit-site-navigation-panel__template-item-description {
-	padding-top: $grid-unit-10;
-	font-size: 12px;
-	line-height: 16px;
-}
-
-.edit-site-navigation-panel__new-template-dropdown {
-	margin: 0 0 0 $grid-unit-15;
-
-	button {
-		margin: 0;
-	}
-}
-.edit-site-navigation-panel__new-template-popover {
-	@include break-small() {
-		min-width: 300px;
-	}
-}

package/src/components/navigation-sidebar/navigation-panel/template-hierarchy.js

@@ -1,81 +0,0 @@
-/**
- * External dependencies
- */
-import { map } from 'lodash';
-
-/**
- * Internal dependencies
- */
-import {
-	MENU_TEMPLATES,
-	MENU_TEMPLATES_GENERAL,
-	MENU_TEMPLATES_PAGES,
-	MENU_TEMPLATES_POSTS,
-	TEMPLATE_OVERRIDES,
-	TEMPLATES_GENERAL,
-	TEMPLATES_PAGES_PREFIXES,
-	TEMPLATES_POSTS_PREFIXES,
-	TEMPLATES_TOP_LEVEL,
-} from './constants';
-
-export function isTemplateSuperseded( slug, existingSlugs, showOnFront ) {
-	if ( ! TEMPLATE_OVERRIDES[ slug ] ) {
-		return false;
-	}
-
-	// `home` template is unused if it is superseded by `front-page`
-	// or "show on front" is set to show a page rather than blog posts.
-	if ( slug === 'home' && showOnFront !== 'posts' ) {
-		return true;
-	}
-
-	return TEMPLATE_OVERRIDES[ slug ].every(
-		( overrideSlug ) =>
-			existingSlugs.includes( overrideSlug ) ||
-			isTemplateSuperseded( overrideSlug, existingSlugs, showOnFront )
-	);
-}
-
-export function getTemplateLocation( slug ) {
-	const isTopLevelTemplate = TEMPLATES_TOP_LEVEL.includes( slug );
-	if ( isTopLevelTemplate ) {
-		return MENU_TEMPLATES;
-	}
-
-	const isGeneralTemplate = TEMPLATES_GENERAL.includes( slug );
-	if ( isGeneralTemplate ) {
-		return MENU_TEMPLATES_GENERAL;
-	}
-
-	const isPostsTemplate = TEMPLATES_POSTS_PREFIXES.some( ( prefix ) =>
-		slug.startsWith( prefix )
-	);
-	if ( isPostsTemplate ) {
-		return MENU_TEMPLATES_POSTS;
-	}
-
-	const isPagesTemplate = TEMPLATES_PAGES_PREFIXES.some( ( prefix ) =>
-		slug.startsWith( prefix )
-	);
-	if ( isPagesTemplate ) {
-		return MENU_TEMPLATES_PAGES;
-	}
-
-	return MENU_TEMPLATES_GENERAL;
-}
-
-export function getUnusedTemplates( templates, showOnFront ) {
-	const templateSlugs = map( templates, 'slug' );
-	const supersededTemplates = templates.filter( ( { slug } ) =>
-		isTemplateSuperseded( slug, templateSlugs, showOnFront )
-	);
-
-	return supersededTemplates;
-}
-
-export function getTemplatesLocationMap( templates ) {
-	return templates.reduce( ( obj, template ) => {
-		obj[ template.slug ] = getTemplateLocation( template.slug );
-		return obj;
-	}, {} );
-}

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

@@ -1,114 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useEffect, useRef } from '@wordpress/element';
-import {
-	Button,
-	Icon,
-	__unstableMotion as motion,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { wordpress } from '@wordpress/icons';
-import { store as coreDataStore } from '@wordpress/core-data';
-import { useReducedMotion } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../../store';
-
-function NavigationToggle( { icon } ) {
-	const { isNavigationOpen, isRequestingSiteIcon, siteIconUrl } = useSelect(
-		( select ) => {
-			const { getEntityRecord, isResolving } = select( coreDataStore );
-			const siteData =
-				getEntityRecord( 'root', '__unstableBase', undefined ) || {};
-
-			return {
-				isNavigationOpen: select( editSiteStore ).isNavigationOpened(),
-				isRequestingSiteIcon: isResolving( 'core', 'getEntityRecord', [
-					'root',
-					'__unstableBase',
-					undefined,
-				] ),
-				siteIconUrl: siteData.site_icon_url,
-			};
-		},
-		[]
-	);
-	const { setIsNavigationPanelOpened } = useDispatch( editSiteStore );
-
-	const disableMotion = useReducedMotion();
-
-	const navigationToggleRef = useRef();
-
-	useEffect( () => {
-		// TODO: Remove this effect when alternative solution is merged.
-		// See: https://github.com/WordPress/gutenberg/pull/37314
-		if ( ! isNavigationOpen ) {
-			navigationToggleRef.current.focus();
-		}
-	}, [ isNavigationOpen ] );
-
-	const toggleNavigationPanel = () =>
-		setIsNavigationPanelOpened( ! isNavigationOpen );
-
-	let buttonIcon = <Icon size="36px" icon={ wordpress } />;
-
-	const effect = {
-		expand: {
-			scale: 1.25,
-			transition: { type: 'tween', duration: '0.3' },
-		},
-	};
-
-	if ( siteIconUrl ) {
-		buttonIcon = (
-			<motion.img
-				variants={ ! disableMotion && effect }
-				alt={ __( 'Site Icon' ) }
-				className="edit-site-navigation-toggle__site-icon"
-				src={ siteIconUrl }
-			/>
-		);
-	} else if ( isRequestingSiteIcon ) {
-		buttonIcon = null;
-	} else if ( icon ) {
-		buttonIcon = <Icon size="36px" icon={ icon } />;
-	}
-
-	const classes = classnames( {
-		'edit-site-navigation-toggle__button': true,
-		'has-icon': siteIconUrl,
-	} );
-
-	return (
-		<motion.div
-			className={
-				'edit-site-navigation-toggle' +
-				( isNavigationOpen ? ' is-open' : '' )
-			}
-			whileHover="expand"
-		>
-			<Button
-				className={ classes }
-				label={ __( 'Toggle navigation' ) }
-				ref={ navigationToggleRef }
-				// isPressed will add unwanted styles.
-				aria-pressed={ isNavigationOpen }
-				onClick={ toggleNavigationPanel }
-				showTooltip
-			>
-				{ buttonIcon }
-			</Button>
-		</motion.div>
-	);
-}
-
-export default NavigationToggle;

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

@@ -1,71 +0,0 @@
-// Developer notes: these rules are duplicated for the post editor.
-// They need to be updated in both places.
-
-.edit-site-navigation-toggle {
-	align-items: center;
-	background: $gray-900;
-	border-radius: 0;
-	display: flex;
-	position: absolute;
-	z-index: z-index(".edit-site-navigation-toggle");
-	height: $header-height;
-	width: $header-height;
-}
-
-.edit-site-navigation-toggle__button.components-button {
-	align-items: center;
-	background: $gray-900;
-	border-radius: 0;
-	color: $white;
-	height: $header-height + $border-width;
-	width: $header-height;
-	z-index: 1;
-	margin-bottom: - $border-width;
-	min-width: $header-height;
-
-	&:hover,
-	&:active {
-		color: $white;
-	}
-
-	&:focus {
-		box-shadow: none;
-	}
-
-	&::before {
-		transition: box-shadow 0.1s ease;
-		@include reduce-motion("transition");
-		content: "";
-		display: block;
-		position: absolute;
-		top: 9px;
-		right: 9px;
-		bottom: 9px;
-		left: 9px;
-		border-radius: $radius-block-ui + $border-width + $border-width;
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-900;
-	}
-
-	// Hover color.
-	&:hover::before {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-700;
-	}
-
-	&.has-icon:hover::before {
-		box-shadow: none;
-	}
-
-	// Lightened spot color focus.
-	&:focus::before {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) rgba($white, 0.1), inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-	}
-
-	.edit-site-navigation-toggle__site-icon {
-		width: $button-size;
-		height: $button-size;
-		border-radius: $radius-block-ui;
-		object-fit: cover;
-		// Compensate for the top-bar border.
-		margin-top: -($border-width);
-	}
-}

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

@@ -1,65 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import NavigationToggle from '..';
-
-jest.mock( '@wordpress/data/src/components/use-select', () => {
-	// This allows us to tweak the returned value on each test.
-	return jest.fn();
-} );
-
-describe( 'NavigationToggle', () => {
-	describe( 'when in full screen mode', () => {
-		it( 'should display a user uploaded site icon if it exists', () => {
-			useSelect.mockImplementation( ( cb ) =>
-				cb( () => ( {
-					getEntityRecord: () => ( {
-						site_icon_url: 'https://fakeUrl.com',
-					} ),
-					isResolving: () => false,
-					isNavigationOpened: () => false,
-				} ) )
-			);
-
-			const { unmount } = render( <NavigationToggle /> );
-
-			const siteIcon = screen.getByAltText( 'Site Icon' );
-			expect( siteIcon ).toBeVisible();
-
-			// Unmount the UI synchronously so that any async effects, like the on-mount focus
-			// that shows and positions a tooltip, are cancelled right away and never run.
-			unmount();
-		} );
-
-		it( 'should display a default site icon if no user uploaded site icon exists', () => {
-			useSelect.mockImplementation( ( cb ) =>
-				cb( () => ( {
-					getEntityRecord: () => ( {
-						site_icon_url: '',
-					} ),
-					isResolving: () => false,
-					isNavigationOpened: () => false,
-				} ) )
-			);
-
-			const { unmount } = render( <NavigationToggle /> );
-
-			const siteIcon = screen.queryByAltText( 'Site Icon' );
-			expect( siteIcon ).not.toBeInTheDocument();
-
-			// Unmount the UI synchronously so that any async effects, like the on-mount focus
-			// that shows and positions a tooltip, are cancelled right away and never run.
-			unmount();
-		} );
-	} );
-} );