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

Add publish flow in site editor #61136

Merged
merged 7 commits into from
Apr 30, 2024
Merged

Add publish flow in site editor #61136

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6cc674b
Add publish flow in site editor
ntsekouras Apr 26, 2024
283d870
renamings
ntsekouras Apr 29, 2024
b8eddf0
update e2e tests
ntsekouras Apr 29, 2024
250eadd
update e2e tests
ntsekouras Apr 29, 2024
afecc9c
update e2e util
ntsekouras Apr 29, 2024
5128cda
add preference UI in site editor
ntsekouras Apr 29, 2024
4347b5d
rename css animation
ntsekouras Apr 30, 2024
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 packages/base-styles/_z-index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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
View file
Open in desktop
Original file line number Diff line number Diff line change
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
View file
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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
View file
Open in desktop
Original file line number Diff line number Diff line change
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

@draganescu draganescu Apr 30, 2024 •
edited
Loading

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
Loading
Loading