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

Editor: Use the Editor component in the post editor. #62339

Merged
merged 3 commits into from
Jun 6, 2024
Merged

Editor: Use the Editor component in the post editor. #62339

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8b47ac7
Editor: Use the Editor component in edit-post
youknowriad Jun 5, 2024
a069531
Fix welcome guide focus and e2e tests
youknowriad Jun 6, 2024
9ed6d9d
Fix initial edits
youknowriad Jun 6, 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
193 changes: 128 additions & 65 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 @@ -12,6 +12,8 @@ import {
UnsavedChangesWarning,
EditorKeyboardShortcutsRegister,
EditorSnackbars,
ErrorBoundary,
PostLockedModal,
store as editorStore,
privateApis as editorPrivateApis,
} from '@wordpress/editor';
Expand All @@ -25,15 +27,21 @@ import { __, sprintf } from '@wordpress/i18n';
import { useCallback, useMemo } from '@wordpress/element';
import { store as noticesStore } from '@wordpress/notices';
import { store as preferencesStore } from '@wordpress/preferences';
import { privateApis as commandsPrivateApis } from '@wordpress/commands';
import {
CommandMenu,
privateApis as commandsPrivateApis,
} from '@wordpress/commands';
import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
import { privateApis as blockLibraryPrivateApis } from '@wordpress/block-library';
import { addQueryArgs } from '@wordpress/url';
import { store as coreStore } from '@wordpress/core-data';
import { SlotFillProvider } from '@wordpress/components';

/**
* Internal dependencies
*/
import BackButton from '../back-button';
import EditorInitialization from '../editor-initialization';
import EditPostKeyboardShortcuts from '../keyboard-shortcuts';
import InitPatternModal from '../init-pattern-modal';
import BrowserURL from '../browser-url';
Expand All @@ -45,12 +53,12 @@ import { unlock } from '../../lock-unlock';
import useEditPostCommands from '../../commands/use-commands';
import { usePaddingAppender } from './use-padding-appender';
import { useShouldIframe } from './use-should-iframe';
import useNavigateToEntityRecord from '../../hooks/use-navigate-to-entity-record';

const { getLayoutStyles } = unlock( blockEditorPrivateApis );
const { useCommands } = unlock( coreCommandsPrivateApis );
const { useCommandContext } = unlock( commandsPrivateApis );
const { EditorInterface, FullscreenMode, Sidebar } =
unlock( editorPrivateApis );
const { Editor, FullscreenMode } = unlock( editorPrivateApis );
const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis );
const DESIGN_POST_TYPES = [
'wp_template',
Expand Down Expand Up @@ -91,7 +99,7 @@ function useEditorStyles() {
) ?? [];

const defaultEditorStyles = [
...editorSettings.defaultEditorStyles,
...( editorSettings?.defaultEditorStyles ?? [] ),
...presetStyles,
];

Expand Down Expand Up @@ -140,12 +148,26 @@ function useEditorStyles() {
] );
}

function Layout( { initialPost } ) {
function Layout( {
postId: initialPostId,
postType: initialPostType,
settings,
initialEdits,
} ) {
useCommands();
useEditPostCommands();
const paddingAppenderRef = usePaddingAppender();
const shouldIframe = useShouldIframe();
const { createErrorNotice } = useDispatch( noticesStore );
const {
currentPost,
onNavigateToEntityRecord,
onNavigateToPreviousEntityRecord,
} = useNavigateToEntityRecord(
initialPostId,
initialPostType,
'post-only'
);
const {
mode,
isFullscreenActive,
Expand All @@ -157,35 +179,61 @@ function Layout( { initialPost } ) {
hasHistory,
isEditingTemplate,
isWelcomeGuideVisible,
} = useSelect( ( select ) => {
const { get } = select( preferencesStore );
const { getEditorSettings } = select( editorStore );
const { isFeatureActive } = select( editPostStore );
templateId,
} = useSelect(
( select ) => {
const { get } = select( preferencesStore );
const { isFeatureActive, getEditedPostTemplateId } = unlock(
select( editPostStore )
);
const { canUser, getPostType } = select( coreStore );

return {
mode: select( editorStore ).getEditorMode(),
isFullscreenActive:
select( editPostStore ).isFeatureActive( 'fullscreenMode' ),
hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
hasBlockSelected:
!! select( blockEditorStore ).getBlockSelectionStart(),
showIconLabels: get( 'core', 'showIconLabels' ),
isDistractionFree: get( 'core', 'distractionFree' ),
showMetaBoxes:
select( editorStore ).getRenderingMode() === 'post-only',
hasHistory: !! getEditorSettings().onNavigateToPreviousEntityRecord,
isEditingTemplate:
select( editorStore ).getCurrentPostType() === 'wp_template',
isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ),
};
}, [] );
const supportsTemplateMode = settings.supportsTemplateMode;
const isViewable =
getPostType( currentPost.postType )?.viewable ?? false;
const canViewTemplate = canUser( 'read', 'templates' );

return {
mode: select( editorStore ).getEditorMode(),
isFullscreenActive:
select( editPostStore ).isFeatureActive( 'fullscreenMode' ),
hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
hasBlockSelected:
!! select( blockEditorStore ).getBlockSelectionStart(),
showIconLabels: get( 'core', 'showIconLabels' ),
isDistractionFree: get( 'core', 'distractionFree' ),
showMetaBoxes:
select( editorStore ).getRenderingMode() === 'post-only',
isEditingTemplate:
select( editorStore ).getCurrentPostType() ===
'wp_template',
isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ),
templateId:
supportsTemplateMode &&
isViewable &&
canViewTemplate &&
currentPost.postType !== 'wp_template'
? getEditedPostTemplateId()
: null,
};
},
[ settings.supportsTemplateMode, currentPost.postType ]
);

// Set the right context for the command palette
const commandContext = hasBlockSelected
? 'block-selection-edit'
: 'entity-edit';
useCommandContext( commandContext );

const editorSettings = useMemo(
() => ( {
...settings,
onNavigateToEntityRecord,
onNavigateToPreviousEntityRecord,
defaultRenderingMode: 'post-only',
} ),
[ settings, onNavigateToEntityRecord, onNavigateToPreviousEntityRecord ]
);
const styles = useEditorStyles();

// We need to add the show-icon-labels class to the body element so it is applied to modals.
Expand Down Expand Up @@ -263,48 +311,63 @@ function Layout( { initialPost } ) {
[ createSuccessNotice ]
);

const initialPost = useMemo( () => {
return {
type: initialPostType,
id: initialPostId,
};
}, [ initialPostType, initialPostId ] );
return (
<>
<FullscreenMode isActive={ isFullscreenActive } />
<BrowserURL hasHistory={ hasHistory } />
<UnsavedChangesWarning />
<AutosaveMonitor />
<LocalAutosaveMonitor />
<EditPostKeyboardShortcuts />
<EditorKeyboardShortcutsRegister />
<BlockKeyboardShortcuts />
<WelcomeGuide />
<InitPatternModal />
<PluginArea onError={ onPluginAreaError } />
{ ! isDistractionFree && (
<Sidebar
<SlotFillProvider>
<ErrorBoundary>
<CommandMenu />
<WelcomeGuide postType={ currentPost.postType } />
<Editor
settings={ editorSettings }
initialEdits={ initialEdits }
postType={ currentPost.postType }
postId={ currentPost.postId }
templateId={ templateId }
className={ className }
styles={ styles }
forceIsDirty={ hasActiveMetaboxes }
contentRef={ paddingAppenderRef }
disableIframe={ ! shouldIframe }
// We should auto-focus the canvas (title) on load.
// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus={ ! isWelcomeGuideVisible }
onActionPerformed={ onActionPerformed }
extraPanels={
extraSidebarPanels={
! isEditingTemplate && <MetaBoxes location="side" />
}
/>
) }
<PostEditorMoreMenu />
<BackButton initialPost={ initialPost } />
<EditorSnackbars />
<EditorInterface
className={ className }
styles={ styles }
forceIsDirty={ hasActiveMetaboxes }
contentRef={ paddingAppenderRef }
disableIframe={ ! shouldIframe }
// We should auto-focus the canvas (title) on load.
// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus={ ! isWelcomeGuideVisible }
>
{ ! isDistractionFree && showMetaBoxes && (
<div className="edit-post-layout__metaboxes">
<MetaBoxes location="normal" />
<MetaBoxes location="advanced" />
</div>
) }
</EditorInterface>
</>
extraContent={
! isDistractionFree &&
showMetaBoxes && (
<div className="edit-post-layout__metaboxes">
<MetaBoxes location="normal" />
<MetaBoxes location="advanced" />
</div>
)
}
>
<PostLockedModal />
<EditorInitialization />
<FullscreenMode isActive={ isFullscreenActive } />
<BrowserURL hasHistory={ hasHistory } />
<UnsavedChangesWarning />
<AutosaveMonitor />
<LocalAutosaveMonitor />
<EditPostKeyboardShortcuts />
<EditorKeyboardShortcutsRegister />
<BlockKeyboardShortcuts />
<InitPatternModal />
<PluginArea onError={ onPluginAreaError } />
<PostEditorMoreMenu />
<BackButton initialPost={ initialPost } />
<EditorSnackbars />
</Editor>
</ErrorBoundary>
</SlotFillProvider>
);
}

Expand Down
30 changes: 15 additions & 15 deletions packages/edit-post/src/components/welcome-guide/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
* WordPress dependencies
*/
import { useSelect } from '@wordpress/data';
import { store as editorStore } from '@wordpress/editor';

/**
* Internal dependencies
Expand All @@ -11,21 +10,22 @@ import WelcomeGuideDefault from './default';
import WelcomeGuideTemplate from './template';
import { store as editPostStore } from '../../store';

export default function WelcomeGuide() {
const { isActive, isEditingTemplate } = useSelect( ( select ) => {
const { isFeatureActive } = select( editPostStore );
const { getCurrentPostType } = select( editorStore );
const _isEditingTemplate = getCurrentPostType() === 'wp_template';
export default function WelcomeGuide( { postType } ) {
const { isActive, isEditingTemplate } = useSelect(
( select ) => {
const { isFeatureActive } = select( editPostStore );
const _isEditingTemplate = postType === 'wp_template';
const feature = _isEditingTemplate
? 'welcomeGuideTemplate'
: 'welcomeGuide';

const feature = _isEditingTemplate
? 'welcomeGuideTemplate'
: 'welcomeGuide';

return {
isActive: isFeatureActive( feature ),
isEditingTemplate: _isEditingTemplate,
};
}, [] );
return {
isActive: isFeatureActive( feature ),
isEditingTemplate: _isEditingTemplate,
};
},
[ postType ]
);

if ( ! isActive ) {
return null;
Expand Down
Loading
Loading