Skip to content

Commit

Permalink
Editor: Use the Editor component in the post editor. (#62339)
Browse files Browse the repository at this point in the history 
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
  • Loading branch information
@youknowriad @ramonjd
3 people authored Jun 6, 2024
1 parent a5a8117 commit 9ecf721
Show file tree
Hide file tree
Showing 10 changed files with 233 additions and 298 deletions.
193 changes: 128 additions & 65 deletions packages/edit-post/src/components/layout/index.js
View file
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
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

1 comment on commit 9ecf721

@github-actions
Copy link

Choose a reason for hiding this comment

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

Flaky tests detected in 9ecf721.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/9398860359
📝 Reported issues:

Please sign in to comment.