@wordpress/edit-site 4.18.0 → 5.0.0

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

@@ -1,159 +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");
-
-	// Footer is visible from medium so we subtract footer's height
-	.interface-interface-skeleton.has-footer & {
-		@include break-medium() {
-			height: calc(100% - #{$button-size-small + $border-width});
-		}
-	}
-}
-
-.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/__snapshots__/index.js.snap

@@ -1,41 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NavigationToggle when in full screen mode should display a default site icon if no user uploaded site icon exists 1`] = `
-<div>
-  <div
-    class="edit-site-navigation-toggle"
-  >
-    <button
-      aria-label="Toggle navigation"
-      aria-pressed="false"
-      class="components-button edit-site-navigation-toggle__button"
-      type="button"
-    >
-      <svg
-        aria-hidden="true"
-        focusable="false"
-        height="36px"
-        viewBox="-2 -2 24 24"
-        width="36px"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M20 10c0-5.51-4.49-10-10-10C4.48 0 0 4.49 0 10c0 5.52 4.48 10 10 10 5.51 0 10-4.48 10-10zM7.78 15.37L4.37 6.22c.55-.02 1.17-.08 1.17-.08.5-.06.44-1.13-.06-1.11 0 0-1.45.11-2.37.11-.18 0-.37 0-.58-.01C4.12 2.69 6.87 1.11 10 1.11c2.33 0 4.45.87 6.05 2.34-.68-.11-1.65.39-1.65 1.58 0 .74.45 1.36.9 2.1.35.61.55 1.36.55 2.46 0 1.49-1.4 5-1.4 5l-3.03-8.37c.54-.02.82-.17.82-.17.5-.05.44-1.25-.06-1.22 0 0-1.44.12-2.38.12-.87 0-2.33-.12-2.33-.12-.5-.03-.56 1.2-.06 1.22l.92.08 1.26 3.41zM17.41 10c.24-.64.74-1.87.43-4.25.7 1.29 1.05 2.71 1.05 4.25 0 3.29-1.73 6.24-4.4 7.78.97-2.59 1.94-5.2 2.92-7.78zM6.1 18.09C3.12 16.65 1.11 13.53 1.11 10c0-1.3.23-2.48.72-3.59C3.25 10.3 4.67 14.2 6.1 18.09zm4.03-6.63l2.58 6.98c-.86.29-1.76.45-2.71.45-.79 0-1.57-.11-2.29-.33.81-2.38 1.62-4.74 2.42-7.1z"
-        />
-      </svg>
-      <div
-        aria-hidden="true"
-        class="components-popover components-tooltip"
-        style="position: absolute;"
-        tabindex="-1"
-      >
-        <div
-          class="components-popover__content"
-        >
-          Toggle navigation
-        </div>
-      </div>
-    </button>
-  </div>
-</div>
-`;

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

@@ -1,69 +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.
-	const mock = jest.fn();
-	return mock;
-} );
-jest.mock( '@wordpress/data/src/components/use-dispatch', () => ( {
-	useDispatch: () => ( { setNavigationPanelActiveMenu: jest.fn() } ),
-} ) );
-
-jest.mock( '@wordpress/core-data' );
-
-describe( 'NavigationToggle', () => {
-	describe( 'when in full screen mode', () => {
-		it( 'should display a user uploaded site icon if it exists', () => {
-			useSelect.mockImplementation( ( cb ) => {
-				return cb( () => ( {
-					getCurrentTemplateNavigationPanelSubMenu: () => 'root',
-					getEntityRecord: () => ( {
-						site_icon_url: 'https://fakeUrl.com',
-					} ),
-					isResolving: () => false,
-					isNavigationOpened: () => false,
-				} ) );
-			} );
-
-			render( <NavigationToggle /> );
-
-			const siteIcon = screen.getByAltText( 'Site Icon' );
-
-			expect( siteIcon ).toBeVisible();
-		} );
-
-		it( 'should display a default site icon if no user uploaded site icon exists', () => {
-			useSelect.mockImplementation( ( cb ) => {
-				return cb( () => ( {
-					getCurrentTemplateNavigationPanelSubMenu: () => 'root',
-					getEntityRecord: () => ( {
-						site_icon_url: '',
-					} ),
-					isResolving: () => false,
-					isNavigationOpened: () => false,
-				} ) );
-			} );
-
-			const { container } = render( <NavigationToggle /> );
-
-			expect(
-				screen.queryByAltText( 'Site Icon' )
-			).not.toBeInTheDocument();
-
-			expect( container ).toMatchSnapshot();
-		} );
-	} );
-} );