Removing breadcrumbs from wc-admin header, replacing with simple titl… (https://github.com/woocommerce/woocommerce-admin/pull/5232)
Removing breadcrumbs from wc-admin header, replacing with simple title (https://github.com/woocommerce/woocommerce-admin/pull/3963) This is an interim step towards the integration of wc-navigation, where a back button will be provided to restore the critical functionality of the breadcrumbs. Note that the `breadcrumbs` data was preserved since it's still being utilized do construct the document title (in semi-breadcrumb-fashion) on both the backend and front-end.
This commit is contained in:
Joel Thiessen
GitHub
parent
173b8c6262
commit
23c19ee1b2
|
|
@ -5,11 +5,9 @@ import { __, sprintf } from '@wordpress/i18n';
|
|||
import { useEffect, useRef, useState } from '@wordpress/element';
|
||||
import classnames from 'classnames';
|
||||
import { decodeEntities } from '@wordpress/html-entities';
|
||||
import { Link } from '@woocommerce/components';
|
||||
import { useUserPreferences } from '@woocommerce/data';
|
||||
import { getNewPath } from '@woocommerce/navigation';
|
||||
import { recordEvent } from '@woocommerce/tracks';
|
||||
import { getAdminLink, getSetting } from '@woocommerce/wc-admin-settings';
|
||||
import { getSetting } from '@woocommerce/wc-admin-settings';
|
||||
import { __experimentalText as Text } from '@wordpress/components';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
|
|
@ -18,23 +16,12 @@ import './style.scss';
|
|||
import ActivityPanel from './activity-panel';
|
||||
import { MobileAppBanner } from '../mobile-banner';
|
||||
|
||||
const trackLinkClick = ( event ) => {
|
||||
const target = event.target.closest( 'a' );
|
||||
const href = target.getAttribute( 'href' );
|
||||
|
||||
if ( href ) {
|
||||
recordEvent( 'navbar_breadcrumb_click', {
|
||||
href,
|
||||
text: target.innerText,
|
||||
} );
|
||||
}
|
||||
};
|
||||
|
||||
export const Header = ( { sections, isEmbedded = false, query } ) => {
|
||||
const headerElement = useRef( null );
|
||||
const rafHandle = useRef( null );
|
||||
const threshold = useRef( null );
|
||||
const siteTitle = getSetting( 'siteTitle', '' );
|
||||
const pageTitle = sections.slice( -1 )[ 0 ];
|
||||
const [ isScrolled, setIsScrolled ] = useState( false );
|
||||
const { updateUserPreferences, ...userData } = useUserPreferences();
|
||||
|
||||
|
|
@ -106,30 +93,14 @@ export const Header = ( { sections, isEmbedded = false, query } ) => {
|
|||
onInstall={ dismissHandler }
|
||||
/>
|
||||
) }
|
||||
<h1 className="woocommerce-layout__header-breadcrumbs">
|
||||
{ sections.map( ( section, i ) => {
|
||||
const sectionPiece = Array.isArray( section ) ? (
|
||||
<Link
|
||||
href={
|
||||
isEmbedded
|
||||
? getAdminLink( section[ 0 ] )
|
||||
: getNewPath( {}, section[ 0 ], {} )
|
||||
}
|
||||
type={ isEmbedded ? 'wp-admin' : 'wc-admin' }
|
||||
onClick={ trackLinkClick }
|
||||
>
|
||||
{ section[ 1 ] }
|
||||
</Link>
|
||||
) : (
|
||||
section
|
||||
);
|
||||
return (
|
||||
<span key={ i }>
|
||||
{ decodeEntities( sectionPiece ) }
|
||||
</span>
|
||||
);
|
||||
} ) }
|
||||
</h1>
|
||||
|
||||
<Text
|
||||
className="woocommerce-layout__header-heading"
|
||||
as="h1"
|
||||
variant="subtitle.small"
|
||||
>
|
||||
{ decodeEntities( pageTitle ) }
|
||||
</Text>
|
||||
{ window.wcAdminFeatures[ 'activity-panels' ] && (
|
||||
<ActivityPanel isEmbedded={ isEmbedded } query={ query } />
|
||||
) }
|
||||
|
|
|
|||
|
|
@ -23,21 +23,18 @@
|
|||
flex-direction: row;
|
||||
}
|
||||
|
||||
.woocommerce-layout__header-breadcrumbs {
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
.woocommerce-layout__header-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 0 0 $fallback-gutter-large;
|
||||
padding: 0 0 0 $gutter-large;
|
||||
flex: 1 auto;
|
||||
height: $header-height;
|
||||
line-height: $header-height;
|
||||
background: $studio-white;
|
||||
|
||||
span + span::before {
|
||||
content: ' / ';
|
||||
color: $gray-text;
|
||||
margin: 0 2px 0 2px;
|
||||
}
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -23,7 +23,6 @@ jest.mock( '@woocommerce/data', () => ( {
|
|||
* External dependencies
|
||||
*/
|
||||
import { render, fireEvent } from '@testing-library/react';
|
||||
import { recordEvent } from '@woocommerce/tracks';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
|
|
@ -82,18 +81,4 @@ describe( 'Header', () => {
|
|||
'Accounts & Privacy ‹ Settings ‹ Fake Site Title — WooCommerce'
|
||||
);
|
||||
} );
|
||||
|
||||
it( 'tracks link clicks with recordEvent', () => {
|
||||
const { queryByRole } = render(
|
||||
<Header sections={ encodedBreadcrumb } isEmbedded={ false } />
|
||||
);
|
||||
|
||||
const firstLink = queryByRole( 'link' );
|
||||
fireEvent.click( firstLink );
|
||||
|
||||
expect( recordEvent ).toBeCalledWith( 'navbar_breadcrumb_click', {
|
||||
href: firstLink.getAttribute( 'href' ),
|
||||
text: firstLink.innerText,
|
||||
} );
|
||||
} );
|
||||
} );
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
|
||||
|
||||
.woocommerce-embed-page {
|
||||
#wpbody .woocommerce-layout,
|
||||
.woocommerce-layout__notice-list-hide + .wrap {
|
||||
|
|
@ -64,7 +62,7 @@
|
|||
box-shadow: 0 8px 16px 0 rgba(85, 93, 102, 0.3);
|
||||
}
|
||||
|
||||
.woocommerce-layout__header-breadcrumbs {
|
||||
.woocommerce-layout__header-heading {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
// css resets some wp-admin specific rules so that the app fits better in the extension container
|
||||
.woocommerce-page {
|
||||
.wrap {
|
||||
|
|
@ -75,7 +74,7 @@
|
|||
}
|
||||
|
||||
// #wpwrap id added for specificity
|
||||
#wpwrap .woocommerce-layout__header-breadcrumbs {
|
||||
#wpwrap .woocommerce-layout__header-heading {
|
||||
padding-left: 60px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -775,19 +775,12 @@ class Loader {
|
|||
*
|
||||
* @param array $section Section to create breadcrumb from.
|
||||
*/
|
||||
private static function output_breadcrumbs( $section ) {
|
||||
private static function output_heading( $section ) {
|
||||
if ( ! static::user_can_analytics() ) {
|
||||
return;
|
||||
}
|
||||
?>
|
||||
<span>
|
||||
<?php if ( is_array( $section ) ) : ?>
|
||||
<a href="<?php echo esc_url( admin_url( $section[0] ) ); ?>"><?php echo esc_html( $section[1] ); ?></a>
|
||||
<?php else : ?>
|
||||
<?php echo esc_html( $section ); ?>
|
||||
<?php endif; ?>
|
||||
</span>
|
||||
<?php
|
||||
|
||||
echo esc_html( $section );
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -813,10 +806,8 @@ class Loader {
|
|||
<div id="woocommerce-embedded-root" class="is-embed-loading">
|
||||
<div class="woocommerce-layout">
|
||||
<div class="woocommerce-layout__header is-embed-loading">
|
||||
<h1 class="woocommerce-layout__header-breadcrumbs">
|
||||
<?php foreach ( $sections as $section ) : ?>
|
||||
<?php self::output_breadcrumbs( $section ); ?>
|
||||
<?php endforeach; ?>
|
||||
<h1 class="woocommerce-layout__header-heading">
|
||||
<?php self::output_heading( end( $sections ) ); ?>
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue