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.

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

Add publish flow in site editor #61136

Merged
merged 7 commits into from Apr 30, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/base-styles/_z-index.scss
Expand Up @@ -88,6 +88,7 @@ $z-layers: (
// #wpadminbar { z-index: 99999 }
".interface-interface-skeleton__sidebar": 100000,
".edit-post-layout__toggle-sidebar-panel": 100000,
".editor-layout__toggle-sidebar-panel": 100000,
".edit-widgets-sidebar": 100000,
".edit-post-layout .edit-post-post-publish-panel": 100001,
// For larger views, the wp-admin navbar dropdown should be at top of
Expand Down
Expand Up @@ -29,9 +29,9 @@

// Header top bar when Distraction free mode is on.
&.is-distraction-free .interface-interface-skeleton__header .edit-post-header,
.interface-interface-skeleton__sidebar .edit-post-layout__toggle-sidebar-panel,
.interface-interface-skeleton__actions .edit-post-layout__toggle-publish-panel,
.interface-interface-skeleton__actions .edit-post-layout__toggle-entities-saved-states-panel,
.interface-interface-skeleton__sidebar .editor-layout__toggle-sidebar-panel,
.interface-interface-skeleton__actions .editor-layout__toggle-publish-panel,
.interface-interface-skeleton__actions .editor-layout__toggle-entities-saved-states-panel,
.editor-post-publish-panel {
outline: 4px solid $components-color-accent;
outline-offset: -4px;
Expand Down
25 changes: 19 additions & 6 deletions packages/e2e-test-utils-playwright/src/editor/site-editor.ts
Expand Up @@ -21,21 +21,34 @@ export async function saveSiteEditorEntities(
const editorTopBar = this.page.getByRole( 'region', {
name: 'Editor top bar',
} );
const savePanel = this.page.getByRole( 'region', { name: 'Save panel' } );

// If we have changes in a single entity which can be published the label is `Publish`.
const saveButton = editorTopBar.getByRole( 'button', {
name: 'Save',
exact: true,
} );
const publishButton = editorTopBar.getByRole( 'button', {
name: 'Publish',
} );
const publishButtonIsVisible = ! ( await saveButton.isVisible() );
// First Save button in the top bar.
await editorTopBar
.getByRole( 'button', { name: 'Save', exact: true } )
.click();
const buttonToClick = publishButtonIsVisible ? publishButton : saveButton;
await buttonToClick.click();

if ( ! options.isOnlyCurrentEntityDirty ) {
// Second Save button in the entities panel.
await savePanel
await this.page
.getByRole( 'region', {
name: /(Editor publish|Save panel)/,
} )
.getByRole( 'button', { name: 'Save', exact: true } )
.click();
}
// The text in the notice can be different based on the edited entity, whether
// we are saving multiple entities and whether we publish or update. So for now,
// we locate it based on the last part.
await this.page
.getByRole( 'button', { name: 'Dismiss this notice' } )
.getByText( 'Site updated.' )
.getByText( /(updated|published)\./ )
.waitFor();
}
2 changes: 1 addition & 1 deletion packages/edit-post/src/components/header/index.js
Expand Up @@ -24,7 +24,6 @@ import { useState } from '@wordpress/element';
*/
import FullscreenModeClose from './fullscreen-mode-close';
import PostEditorMoreMenu from './more-menu';
import PostPublishButtonOrToggle from './post-publish-button-or-toggle';
import MainDashboardButton from './main-dashboard-button';
import { store as editPostStore } from '../../store';
import { unlock } from '../../lock-unlock';
Expand All @@ -36,6 +35,7 @@ const {
PreviewDropdown,
PinnedItems,
MoreMenu,
PostPublishButtonOrToggle,
} = unlock( editorPrivateApis );

const slideY = {
Expand Down
5 changes: 3 additions & 2 deletions packages/edit-post/src/components/layout/index.js
Expand Up @@ -48,7 +48,6 @@ import Header from '../header';
import SettingsSidebar from '../sidebar/settings-sidebar';
import MetaBoxes from '../meta-boxes';
import WelcomeGuide from '../welcome-guide';
import ActionsPanel from './actions-panel';
import { store as editPostStore } from '../../store';
import { unlock } from '../../lock-unlock';
import useCommonCommands from '../../hooks/commands/use-common-commands';
Expand All @@ -61,6 +60,7 @@ const {
ListViewSidebar,
ComplementaryArea,
FullscreenMode,
SavePublishPanels,
InterfaceSkeleton,
interfaceStore,
} = unlock( editorPrivateApis );
Expand Down Expand Up @@ -345,14 +345,15 @@ function Layout( { initialPost } ) {
)
}
actions={
<ActionsPanel
<SavePublishPanels
closeEntitiesSavedStates={ closeEntitiesSavedStates }
isEntitiesSavedStatesOpen={
entitiesSavedStatesCallback
}
setEntitiesSavedStatesCallback={
setEntitiesSavedStatesCallback
}
forceIsDirtyPublishPanel={ hasActiveMetaboxes }
/>
}
shortcuts={ {
Expand Down
80 changes: 0 additions & 80 deletions packages/edit-post/src/components/layout/style.scss
Expand Up @@ -19,83 +19,3 @@
}

@include editor-left(".edit-post-layout .components-editor-notices__snackbar");

.edit-post-layout .editor-post-publish-panel {
position: fixed;
z-index: z-index(".edit-post-layout .edit-post-post-publish-panel");
top: $admin-bar-height-big;
bottom: 0;
right: 0;
left: 0;
overflow: auto;

@include break-medium() {
z-index: z-index(".edit-post-layout .edit-post-post-publish-panel {greater than small}");
top: $admin-bar-height;
left: auto;
width: $sidebar-width + $border-width;
border-left: $border-width solid $gray-300;
transform: translateX(+100%);
animation: edit-post-post-publish-panel__slide-in-animation 0.1s forwards;
@include reduce-motion("animation");

body.is-fullscreen-mode & {
top: 0;
}

// Keep it open on focus to avoid conflict with navigate-regions animation.
[role="region"]:focus & {
transform: translateX(0%);
}
}
}

@keyframes edit-post-post-publish-panel__slide-in-animation {
100% {
transform: translateX(0%);
}
}

.edit-post-layout .editor-post-publish-panel__header-publish-button {
justify-content: center;
}

.edit-post-layout__toggle-publish-panel,
.edit-post-layout__toggle-sidebar-panel,
.edit-post-layout__toggle-entities-saved-states-panel {
z-index: z-index(".edit-post-layout__toggle-sidebar-panel");
position: fixed !important; // Need to override the default relative positionning
top: -9999em;
bottom: auto;
left: auto;
right: 0;
box-sizing: border-box;
width: $sidebar-width;
background-color: $white;
border: 1px dotted $gray-300;
height: auto !important; // Need to override the default sidebar positionnings
padding: $grid-unit-30;
display: flex;
justify-content: center;
}

.edit-post-layout__toggle-sidebar-panel {
.interface-interface-skeleton__sidebar:focus &,
.interface-interface-skeleton__sidebar:focus-within & {
top: auto;
bottom: 0;
}
}

.edit-post-layout__toggle-entities-saved-states-panel,
.edit-post-layout__toggle-publish-panel {
.interface-interface-skeleton__actions:focus &,
.interface-interface-skeleton__actions:focus-within & {
top: auto;
bottom: 0;
}
}

.edit-post-layout .entities-saved-states__panel-header {
height: $header-height + $border-width;
}
24 changes: 2 additions & 22 deletions packages/edit-post/src/components/preferences-modal/index.js
Expand Up @@ -3,7 +3,6 @@
*/

import { __ } from '@wordpress/i18n';
import { useViewportMatch } from '@wordpress/compose';
import { privateApis as preferencesPrivateApis } from '@wordpress/preferences';
import { privateApis as editorPrivateApis } from '@wordpress/editor';

Expand All @@ -12,32 +11,13 @@ import { privateApis as editorPrivateApis } from '@wordpress/editor';
*/
import { unlock } from '../../lock-unlock';
import MetaBoxesSection from './meta-boxes-section';
import EnablePublishSidebarOption from './enable-publish-sidebar';

const { PreferencesModalSection, PreferenceToggleControl } = unlock(
preferencesPrivateApis
);
const { PreferenceToggleControl } = unlock( preferencesPrivateApis );
const { PreferencesModal } = unlock( editorPrivateApis );

export default function EditPostPreferencesModal() {
const isLargeViewport = useViewportMatch( 'medium' );

const extraSections = {
general: (
<>
{ isLargeViewport && (
<PreferencesModalSection title={ __( 'Publishing' ) }>
<EnablePublishSidebarOption
help={ __(
'Review settings, such as visibility and tags.'
) }
label={ __( 'Enable pre-publish checks' ) }
/>
</PreferencesModalSection>
) }
<MetaBoxesSection title={ __( 'Advanced' ) } />
</>
),
general: <MetaBoxesSection title={ __( 'Advanced' ) } />,
appearance: (
<PreferenceToggleControl
scope="core/edit-post"
Expand Down
39 changes: 38 additions & 1 deletion packages/edit-site/src/components/editor/index.js
Expand Up @@ -35,6 +35,7 @@ import {
import { __, sprintf } from '@wordpress/i18n';
import { store as coreDataStore } from '@wordpress/core-data';
import { privateApis as blockLibraryPrivateApis } from '@wordpress/block-library';
import { useState, useCallback } from '@wordpress/element';

/**
* Internal dependencies
Expand Down Expand Up @@ -66,6 +67,7 @@ const {
InterfaceSkeleton,
ComplementaryArea,
interfaceStore,
SavePublishPanels,
} = unlock( editorPrivateApis );

const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis );
Expand Down Expand Up @@ -189,6 +191,22 @@ export default function Editor( { isLoading, onClick } ) {
const { closeGeneralSidebar } = useDispatch( editSiteStore );

const settings = useSpecificEditorSettings();

// Local state for save panel.
// Note 'truthy' callback implies an open panel.
const [ entitiesSavedStatesCallback, setEntitiesSavedStatesCallback ] =
useState( false );

const closeEntitiesSavedStates = useCallback(
( arg ) => {
if ( typeof entitiesSavedStatesCallback === 'function' ) {
entitiesSavedStatesCallback( arg );
}
setEntitiesSavedStatesCallback( false );
},
[ entitiesSavedStatesCallback ]
);
Comment on lines +194 to +208
Copy link
Member

Choose a reason for hiding this comment

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

I think the edit-site package has selectors/actions for this. See #45200. We should probably put this into the editor store and reuse it in both editors.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Do you think we can do it in a follow up to minimize the risk of introducing any regressions? I'd love to minimize the changes per PR, as there are more needed for every step that gets us closer. 😄


const isReady =
! isLoading &&
( ( postWithTemplate && !! contextPost && !! editedPost ) ||
Expand Down Expand Up @@ -223,6 +241,8 @@ export default function Editor( { isLoading, onClick } ) {
'edit-site-editor__interface-skeleton',
{
'show-icon-labels': showIconLabels,
'is-entity-save-view-open':
!! entitiesSavedStatesCallback,
}
) }
header={
Expand All @@ -249,11 +269,28 @@ export default function Editor( { isLoading, onClick } ) {
ease: [ 0.6, 0, 0.4, 1 ],
} }
>
<Header />
<Header
setEntitiesSavedStatesCallback={
setEntitiesSavedStatesCallback
}
/>
</motion.div>
) }
</AnimatePresence>
}
actions={
<SavePublishPanels
closeEntitiesSavedStates={
closeEntitiesSavedStates
}
isEntitiesSavedStatesOpen={
entitiesSavedStatesCallback
}
setEntitiesSavedStatesCallback={
setEntitiesSavedStatesCallback
}
/>
}
notices={ <EditorSnackbars /> }
content={
<>
Expand Down
32 changes: 30 additions & 2 deletions packages/edit-site/src/components/header-edit-mode/index.js
Expand Up @@ -14,6 +14,7 @@ import { __unstableMotion as motion } from '@wordpress/components';
import { store as preferencesStore } from '@wordpress/preferences';
import {
DocumentBar,
PostSavedState,
store as editorStore,
privateApis as editorPrivateApis,
} from '@wordpress/editor';
Expand All @@ -31,23 +32,26 @@ import {
} from '../editor-canvas-container';
import { unlock } from '../../lock-unlock';
import { FOCUSABLE_ENTITIES } from '../../utils/constants';
import { isPreviewingTheme } from '../../utils/is-previewing-theme';

const {
CollapsableBlockToolbar,
MoreMenu,
PostViewLink,
PreviewDropdown,
PinnedItems,
PostPublishButtonOrToggle,
} = unlock( editorPrivateApis );

export default function HeaderEditMode() {
export default function HeaderEditMode( { setEntitiesSavedStatesCallback } ) {
const {
templateType,
isDistractionFree,
blockEditorMode,
showIconLabels,
editorCanvasView,
isFixedToolbar,
isPublishSidebarOpened,
} = useSelect( ( select ) => {
const { getEditedPostType } = select( editSiteStore );
const { __unstableGetEditorMode } = select( blockEditorStore );
Expand All @@ -64,6 +68,8 @@ export default function HeaderEditMode() {
).getEditorCanvasContainerView(),
isDistractionFree: getPreference( 'core', 'distractionFree' ),
isFixedToolbar: getPreference( 'core', 'fixedToolbar' ),
isPublishSidebarOpened:
select( editorStore ).isPublishSidebarOpened(),
};
}, [] );

Expand Down Expand Up @@ -94,6 +100,7 @@ export default function HeaderEditMode() {
ease: 'easeOut',
};

const _isPreviewingTheme = isPreviewingTheme();
return (
<div
className={ classnames( 'edit-site-header-edit-mode', {
Expand Down Expand Up @@ -158,7 +165,28 @@ export default function HeaderEditMode() {
</div>
) }
<PostViewLink />
<SaveButton size="compact" />
{
// TODO: For now we conditionally render the Save/Publish buttons based on
// some specific site editor extra handling. Examples are when we're previewing
// a theme, handling of global styles changes or when we're in 'view' mode,
// which opens the save panel in a Modal.
}
{ ! _isPreviewingTheme && ! isPublishSidebarOpened && (
// This button isn't completely hidden by the publish sidebar.
// We can't hide the whole toolbar when the publish sidebar is open because
// we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node.
// We track that DOM node to return focus to the PostPublishButtonOrToggle
// when the publish sidebar has been closed.
<PostSavedState />
) }
{ ! _isPreviewingTheme && (
<PostPublishButtonOrToggle
setEntitiesSavedStatesCallback={
setEntitiesSavedStatesCallback
}
/>
) }
{ _isPreviewingTheme && <SaveButton size="compact" /> }
Copy link
Contributor

Choose a reason for hiding this comment

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

Would love a review from @scruffian or @draganescu to test the theme activation flows

Copy link
Contributor

Choose a reason for hiding this comment

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

For me it tested all right!

Edit: I did find the activate button disappears when browsing a previewing theme. Testing more.

Copy link
Contributor

Choose a reason for hiding this comment

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

I found the regression above on trunk as well so not this PR.

{ ! isDistractionFree && <PinnedItems.Slot scope="core" /> }
<MoreMenu />
<SiteEditorMoreMenuItems />
Expand Down