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

Classic meta boxes modal #34105

Closed
wants to merge 1 commit into from
Closed

Classic meta boxes modal #34105

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
8 changes: 0 additions & 8 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 @@ -43,7 +43,6 @@ import Header from '../header';
import InserterSidebar from '../secondary-sidebar/inserter-sidebar';
import ListViewSidebar from '../secondary-sidebar/list-view-sidebar';
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';
Expand Down Expand Up @@ -85,7 +84,6 @@ function Layout( { styles } ) {
showIconLabels,
hasReducedUI,
showBlockBreadcrumbs,
isTemplateMode,
documentLabel,
} = useSelect( ( select ) => {
const { getEditorSettings, getPostTypeLabel } = select( editorStore );
Expand Down Expand Up @@ -236,12 +234,6 @@ function Layout( { styles } ) {
{ isRichEditingEnabled && mode === 'visual' && (
<VisualEditor styles={ styles } />
) }
{ ! isTemplateMode && (
<div className="edit-post-layout__metaboxes">
<MetaBoxes location="normal" />
<MetaBoxes location="advanced" />
</div>
) }
{ isMobileViewport && sidebarIsOpened && (
<ScrollLock />
) }
Expand Down
64 changes: 53 additions & 11 deletions packages/edit-post/src/components/meta-boxes/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,10 @@ import { map } from 'lodash';
/**
* WordPress dependencies
*/
import { withSelect } from '@wordpress/data';
import { useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import { useState } from '@wordpress/element';
import { Button, Modal } from '@wordpress/components';

/**
* Internal dependencies
Expand All @@ -15,7 +18,20 @@ import MetaBoxesArea from './meta-boxes-area';
import MetaBoxVisibility from './meta-box-visibility';
import { store as editPostStore } from '../../store';

function MetaBoxes( { location, isVisible, metaBoxes } ) {
function MetaBoxes( { location } ) {
const { isVisible, metaBoxes } = useSelect(
( select ) => {
const {
isMetaBoxLocationVisible,
getMetaBoxesPerLocation,
} = select( editPostStore );
return {
metaBoxes: getMetaBoxesPerLocation( location ),
isVisible: isMetaBoxLocationVisible( location ),
};
},
[ location ]
);
return (
<>
{ map( metaBoxes, ( { id } ) => (
Expand All @@ -26,13 +42,39 @@ function MetaBoxes( { location, isVisible, metaBoxes } ) {
);
}

export default withSelect( ( select, { location } ) => {
const { isMetaBoxLocationVisible, getMetaBoxesPerLocation } = select(
editPostStore
);
export default function MetaBoxButton() {
const [ isMetaBoxesOpen, setMetaBoxesOpen ] = useState( false );
const openMetaBoxes = () => setMetaBoxesOpen( true );
const closeMetaBoxes = () => setMetaBoxesOpen( false );

const { hasActiveMetaboxes } = useSelect( ( select ) => {
return {
hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
};
}, [] );

return {
metaBoxes: getMetaBoxesPerLocation( location ),
isVisible: isMetaBoxLocationVisible( location ),
};
} )( MetaBoxes );
if ( ! hasActiveMetaboxes ) {
return null;
}

return (
<>
<Button
variant="secondary"
onClick={ openMetaBoxes }
aria-expanded={ isMetaBoxesOpen }
>
{ __( 'Open classic meta boxes' ) }
</Button>
{ isMetaBoxesOpen && (
<Modal
title={ __( 'Classic meta boxes' ) }
onRequestClose={ closeMetaBoxes }
>
<MetaBoxes location="normal" />
<MetaBoxes location="advanced" />
</Modal>
) }
</>
);
}
2 changes: 2 additions & 0 deletions packages/edit-post/src/components/text-editor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import { compose } from '@wordpress/compose';
* Internal dependencies
*/
import { store as editPostStore } from '../../store';
import ClassicMetaBoxButton from '../meta-boxes';

function TextEditor( { onExit, isRichEditingEnabled } ) {
return (
Expand All @@ -37,6 +38,7 @@ function TextEditor( { onExit, isRichEditingEnabled } ) {
<div className="edit-post-text-editor__body">
<PostTitle />
<PostTextEditor />
<ClassicMetaBoxButton />
</div>
</div>
);
Expand Down
2 changes: 2 additions & 0 deletions packages/edit-post/src/components/visual-editor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ import { __ } from '@wordpress/i18n';
* Internal dependencies
*/
import BlockInspectorButton from './block-inspector-button';
import ClassicMetaBoxButton from '../meta-boxes';
import { store as editPostStore } from '../../store';

function MaybeIframe( {
Expand Down Expand Up @@ -234,6 +235,7 @@ export default function VisualEditor( { styles } ) {
) }
<RecursionProvider>
<BlockList __experimentalLayout={ layout } />
{ ! isTemplateMode && <ClassicMetaBoxButton /> }
</RecursionProvider>
</MaybeIframe>
</motion.div>
Expand Down