Skip to content

Commit

Permalink
Add publish flow in site editor (#61136)
Browse files Browse the repository at this point in the history 
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: draganescu <andraganescu@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: Marc-pi <mdxfr@git.wordpress.org>
  • Loading branch information
@ntsekouras @Mamaduka
@youknowriad @jameskoster @draganescu
8 people committed Apr 30, 2024
1 parent 4595915 commit 280d316
Show file tree
Hide file tree
Showing 28 changed files with 256 additions and 466 deletions.
1 change: 1 addition & 0 deletions packages/base-styles/_z-index.scss
View file
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
6 changes: 3 additions & 3 deletions packages/components/src/higher-order/navigate-regions/style.scss
View file
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
View file
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
View file
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
View file
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 @@ -349,14 +349,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
View file
Expand Up @@ -26,83 +26,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
View file
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
View file
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 ]
);

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
View file
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 @@ -151,7 +158,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" /> }
{ ! isDistractionFree && <PinnedItems.Slot scope="core" /> }
<MoreMenu />
<SiteEditorMoreMenuItems />
Expand Down

0 comments on commit 280d316

Please sign in to comment.