Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

FSE: Add basic template information to editor header #25320

Merged
merged 9 commits into from
Sep 17, 2020
Merged

FSE: Add basic template information to editor header #25320

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
29aeb19
Add basic component centered in edit site header
noahtallen Sep 14, 2020
8d884ab
Add classnames dependency to edit-site
noahtallen Sep 14, 2020
816bc30
Add basic dropdown component to header item
noahtallen Sep 14, 2020
3823d19
Add extra props to dropdown button
noahtallen Sep 14, 2020
4c40953
Move template fetch to header component
noahtallen Sep 15, 2020
08e4fbe
Use vertical design for header information
noahtallen Sep 15, 2020
36a4a5d
Add hook, rework props
noahtallen Sep 15, 2020
1ed89a1
Update spacing
noahtallen Sep 16, 2020
f4927d4
Add CSS transition
noahtallen Sep 16, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions packages/edit-site/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@
"@wordpress/plugins": "file:../plugins",
"@wordpress/primitives": "file:../primitives",
"@wordpress/url": "file:../url",
"classnames": "^2.2.5",
"downloadjs": "^1.4.7",
"file-saver": "^2.0.2",
"jszip": "^3.2.2",
Expand Down
80 changes: 80 additions & 0 deletions packages/edit-site/src/components/header/document-actions/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
/**
* External dependencies
*/
import classnames from 'classnames';

/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import {
__experimentalGetBlockLabel as getBlockLabel,
getBlockType,
} from '@wordpress/blocks';
import { useSelect } from '@wordpress/data';

function useSecondaryText() {
const selectedBlock = useSelect( ( select ) => {
return select( 'core/block-editor' ).getSelectedBlock();
} );

// TODO: Handle if parent is template part too.
noahtallen marked this conversation as resolved.
Show resolved Hide resolved
const selectedBlockLabel =
selectedBlock?.name === 'core/template-part'
? getBlockLabel(
getBlockType( selectedBlock?.name ),
selectedBlock?.attributes
)
: null;

if ( selectedBlockLabel ) {
return {
label: selectedBlockLabel,
isActive: true,
};
}
return {};
}

export default function DocumentActions( { documentTitle } ) {
const { label, isActive } = useSecondaryText();
noahtallen marked this conversation as resolved.
Show resolved Hide resolved
// Title is active when there is no secondary item, or when the secondary
// item is inactive.
const isTitleActive = ! label?.length || ! isActive;
return (
<div
className={ classnames( 'edit-site-document-actions', {
'has-secondary-label': !! label,
} ) }
>
{ documentTitle ? (
<>
<div
className={ classnames(
'edit-site-document-actions__label',
'edit-site-document-actions__title',
{
'is-active': isTitleActive,
}
) }
>
{ documentTitle }
</div>
<div
className={ classnames(
'edit-site-document-actions__label',
'edit-site-document-actions__secondary-item',
{
'is-active': isActive,
}
) }
>
{ label ?? '' }
</div>
</>
) : (
__( 'Loading…' )
) }
</div>
);
}
34 changes: 34 additions & 0 deletions packages/edit-site/src/components/header/document-actions/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
.edit-site-document-actions {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;

.edit-site-document-actions__label {
color: $gray-700;
display: flex;
justify-content: center;
align-items: center;
transition: height 0.25s;

&.is-active {
color: inherit;
}

&.edit-site-document-actions__title {
height: 100%;
// Otherwise, the secondary item still takes up space with height 0:
flex-grow: 1;
}

&.edit-site-document-actions__secondary-item {
height: 0;
}
}

&.has-secondary-label {
.edit-site-document-actions__label {
height: 50%;
}
}
}
125 changes: 71 additions & 54 deletions packages/edit-site/src/components/header/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import SaveButton from '../save-button';
import UndoButton from './undo-redo/undo';
import RedoButton from './undo-redo/redo';
import FullscreenModeClose from './fullscreen-mode-close';
import DocumentActions from './document-actions';

export default function Header( {
openEntitiesSavedStates,
Expand All @@ -36,6 +37,7 @@ export default function Header( {
const {
deviceType,
hasFixedToolbar,
template,
templateId,
templatePartId,
templateType,
Expand All @@ -51,14 +53,18 @@ export default function Header( {
getPage,
} = select( 'core/edit-site' );

const { show_on_front: _showOnFront } = select(
'core'
).getEditedEntityRecord( 'root', 'site' );
const { getEntityRecord, getEditedEntityRecord } = select( 'core' );
const { show_on_front: _showOnFront } = getEditedEntityRecord(
'root',
'site'
);

const _templateId = getTemplateId();
return {
deviceType: __experimentalGetPreviewDeviceType(),
hasFixedToolbar: isFeatureActive( 'fixedToolbar' ),
templateId: getTemplateId(),
templateId: _templateId,
template: getEntityRecord( 'postType', 'wp_template', _templateId ),
templatePartId: getTemplatePartId(),
templateType: getTemplateType(),
page: getPage(),
Expand All @@ -81,62 +87,73 @@ export default function Header( {

return (
<div className="edit-site-header">
<MainDashboardButton.Slot>
<FullscreenModeClose />
</MainDashboardButton.Slot>
<div className="edit-site-header__toolbar">
<Button
isPrimary
isPressed={ isInserterOpen }
className="edit-site-header-toolbar__inserter-toggle"
onClick={ onToggleInserter }
icon={ plus }
label={ _x(
'Add block',
'Generic label for block inserter button'
<div className="edit-site-header_start">
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The changes in this file add three wrapper divs around the content of the header. One for the "start", "center", and "end". The start and end divs have flex: 1. This way, the center div is always centered in the middle of the viewport regardless of the width of the content inside the start/end divs.

<MainDashboardButton.Slot>
<FullscreenModeClose />
</MainDashboardButton.Slot>
<div className="edit-site-header__toolbar">
<Button
isPrimary
isPressed={ isInserterOpen }
className="edit-site-header-toolbar__inserter-toggle"
onClick={ onToggleInserter }
icon={ plus }
label={ _x(
'Add block',
'Generic label for block inserter button'
) }
/>
<ToolSelector />
<UndoButton />
<RedoButton />
<BlockNavigationDropdown />
{ displayBlockToolbar && (
<div className="edit-site-header-toolbar__block-toolbar">
<BlockToolbar hideDragHandle />
</div>
) }
/>
<ToolSelector />
<UndoButton />
<RedoButton />
<BlockNavigationDropdown />
{ displayBlockToolbar && (
<div className="edit-site-header-toolbar__block-toolbar">
<BlockToolbar hideDragHandle />
<div className="edit-site-header__toolbar-switchers">
<PageSwitcher
showOnFront={ showOnFront }
activePage={ page }
onActivePageChange={ setPage }
/>
<div className="edit-site-header__toolbar-switchers-separator">
/
</div>
<TemplateSwitcher
page={ page }
activeId={ templateId }
activeTemplatePartId={ templatePartId }
isTemplatePart={
templateType === 'wp_template_part'
}
onActiveIdChange={ setTemplate }
onActiveTemplatePartIdChange={ setTemplatePart }
onAddTemplate={ addTemplate }
onRemoveTemplate={ removeTemplate }
/>
</div>
) }
<div className="edit-site-header__toolbar-switchers">
<PageSwitcher
showOnFront={ showOnFront }
activePage={ page }
onActivePageChange={ setPage }
</div>
</div>

<div className="edit-site-header_center">
<DocumentActions documentTitle={ template?.slug } />
</div>

<div className="edit-site-header_end">
<div className="edit-site-header__actions">
<PreviewOptions
deviceType={ deviceType }
setDeviceType={ setPreviewDeviceType }
/>
<div className="edit-site-header__toolbar-switchers-separator">
/
</div>
<TemplateSwitcher
page={ page }
activeId={ templateId }
activeTemplatePartId={ templatePartId }
isTemplatePart={ templateType === 'wp_template_part' }
onActiveIdChange={ setTemplate }
onActiveTemplatePartIdChange={ setTemplatePart }
onAddTemplate={ addTemplate }
onRemoveTemplate={ removeTemplate }
<SaveButton
openEntitiesSavedStates={ openEntitiesSavedStates }
/>
<PinnedItems.Slot scope="core/edit-site" />
<MoreMenu />
</div>
</div>
<div className="edit-site-header__actions">
<PreviewOptions
deviceType={ deviceType }
setDeviceType={ setPreviewDeviceType }
/>
<SaveButton
openEntitiesSavedStates={ openEntitiesSavedStates }
/>
<PinnedItems.Slot scope="core/edit-site" />
<MoreMenu />
</div>
</div>
);
}
17 changes: 15 additions & 2 deletions packages/edit-site/src/components/header/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,26 @@
align-items: center;
display: flex;
height: $header-height;
justify-content: space-between;
box-sizing: border-box;

.edit-site-header_start,
.edit-site-header_end {
flex: 1;
display: flex;
}

.edit-site-header_center {
display: flex;
height: 100%;
}

.edit-site-header_end {
justify-content: flex-end;
}
}

.edit-site-header__toolbar {
display: flex;
flex-grow: 1;
padding-left: $grid-unit-30;
align-items: center;

Expand Down
1 change: 1 addition & 0 deletions packages/edit-site/src/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

@import "./components/block-editor/style.scss";
@import "./components/header/style.scss";
@import "./components/header/document-actions/style.scss";
@import "./components/header/fullscreen-mode-close/style.scss";
@import "./components/header/more-menu/style.scss";
@import "./components/notices/style.scss";
Expand Down