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

[Site Editor]: Move featured image at the top of the inspector controls #59783

Merged
merged 11 commits into from
Mar 14, 2024
Merged

[Site Editor]: Move featured image at the top of the inspector controls #59783

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
62f0f0c
[Site Editor]: Move featured image at the top of the inspector controls
ntsekouras Mar 12, 2024
f419b70
move featured image to `summary` panel
ntsekouras Mar 12, 2024
0c4bbf7
use existing component
ntsekouras Mar 13, 2024
13f17ca
update styles to be closer to details view
ntsekouras Mar 13, 2024
25a7517
minor change
ntsekouras Mar 13, 2024
a6281df
fix e2e test
ntsekouras Mar 13, 2024
bc80263
make public api prop `withPanelBody`
ntsekouras Mar 13, 2024
b546a2f
remove ResponsiveWrapper
ntsekouras Mar 13, 2024
1656148
Use `outline` for border
jameskoster Mar 13, 2024
1b9f13e
Update 'set featured image' button dimensions
jameskoster Mar 13, 2024
1ca7acd
remove max-height
ntsekouras Mar 13, 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
7 changes: 7 additions & 0 deletions packages/edit-post/src/components/sidebar/post-status/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
PostURLPanel,
PostTemplatePanel,
store as editorStore,
privateApis as editorPrivateApis,
} from '@wordpress/editor';

/**
Expand All @@ -27,6 +28,9 @@ import PostSlug from '../post-slug';
import PostFormat from '../post-format';
import PostPendingStatus from '../post-pending-status';
import PluginPostStatusInfo from '../plugin-post-status-info';
import { unlock } from '../../../lock-unlock';

const { PrivatePostFeaturedImagePanel } = unlock( editorPrivateApis );

/**
* Module Constants
Expand Down Expand Up @@ -60,6 +64,9 @@ export default function PostStatus() {
<PluginPostStatusInfo.Slot>
{ ( fills ) => (
<>
<PrivatePostFeaturedImagePanel
renderPanelBody={ false }
/>
<PostVisibility />
<PostSchedulePanel />
<PostTemplatePanel />
Expand Down
2 changes: 0 additions & 2 deletions packages/edit-post/src/components/sidebar/settings-sidebar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@ import {
PageAttributesPanel,
PostDiscussionPanel,
PostExcerptPanel,
PostFeaturedImagePanel,
PostLastRevisionPanel,
PostTaxonomiesPanel,
} from '@wordpress/editor';
Expand Down Expand Up @@ -117,7 +116,6 @@ const SidebarContent = ( {
<PluginDocumentSettingPanel.Slot />
<PostLastRevisionPanel />
<PostTaxonomiesPanel />
<PostFeaturedImagePanel />
<PostExcerptPanel />
<PostDiscussionPanel />
<PageAttributesPanel />
Expand Down
2 changes: 0 additions & 2 deletions packages/edit-site/src/components/sidebar-edit-mode/page-panels/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ import {
PageAttributesPanel,
PostDiscussionPanel,
PostExcerptPanel,
PostFeaturedImagePanel,
PostLastRevisionPanel,
PostTaxonomiesPanel,
store as editorStore,
Expand Down Expand Up @@ -104,7 +103,6 @@ export default function PagePanels() {
) }
<PostLastRevisionPanel />
<PostTaxonomiesPanel />
<PostFeaturedImagePanel />
<PostExcerptPanel />
<PostDiscussionPanel />
<PageAttributesPanel />
Expand Down
5 changes: 5 additions & 0 deletions packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-summary.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,16 @@ import {
PostURLPanel,
PostSchedulePanel,
PostTemplatePanel,
privateApis as editorPrivateApis,
} from '@wordpress/editor';

/**
* Internal dependencies
*/
import PageStatus from './page-status';
import { unlock } from '../../../lock-unlock';

const { PrivatePostFeaturedImagePanel } = unlock( editorPrivateApis );

export default function PageSummary( {
status,
Expand All @@ -23,6 +27,7 @@ export default function PageSummary( {
} ) {
return (
<VStack spacing={ 0 }>
<PrivatePostFeaturedImagePanel renderPanelBody={ false } />
<PageStatus
status={ status }
date={ date }
Expand Down
28 changes: 17 additions & 11 deletions packages/edit-site/src/components/sidebar-edit-mode/sidebar-card/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,11 @@ import classnames from 'classnames';
/**
* WordPress dependencies
*/
import { Icon } from '@wordpress/components';
import {
Icon,
__experimentalHStack as HStack,
__experimentalVStack as VStack,
} from '@wordpress/components';

export default function SidebarCard( {
className,
Expand All @@ -18,17 +22,19 @@ export default function SidebarCard( {
} ) {
return (
<div className={ classnames( 'edit-site-sidebar-card', className ) }>
<Icon className="edit-site-sidebar-card__icon" icon={ icon } />
<div className="edit-site-sidebar-card__content">
<div className="edit-site-sidebar-card__header">
<h2 className="edit-site-sidebar-card__title">{ title }</h2>
{ actions }
</div>
<div className="edit-site-sidebar-card__description">
{ description }
</div>
<HStack spacing={ 3 } className="edit-site-sidebar-card__header">
Copy link
Member

Choose a reason for hiding this comment

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

I'll let designers weight on this. My eye-ruler doesn't like that the icons (title/header vs areas) are not aligned:

Before After
Captura de ecrã 2024-03-13, às 11 01 53 Captura de ecrã 2024-03-13, às 11 02 01

Copy link
Contributor

Choose a reason for hiding this comment

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

Happy to make changes in this PR to massage the details so this resembles the designs in #59689 (comment), but that might be better handled in a follow-up?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Follow up can work for me. No strong opinions

Copy link
Member

Choose a reason for hiding this comment

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

Either way works for me

<Icon className="edit-site-sidebar-card__icon" icon={ icon } />
<h2 className="edit-site-sidebar-card__title">{ title }</h2>
{ actions }
</HStack>
<VStack className="edit-site-sidebar-card__content">
{ description && (
<div className="edit-site-sidebar-card__description">
{ description }
</div>
) }
{ children }
</div>
</VStack>
</div>
);
}
6 changes: 1 addition & 5 deletions packages/edit-site/src/components/sidebar-edit-mode/sidebar-card/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,12 @@
.edit-site-sidebar-card {
display: flex;
align-items: flex-start;

&__content {
flex-grow: 1;
margin-bottom: $grid-unit-05;
}

&__title {
font-weight: 500;
line-height: $icon-size;
flex-grow: 1;
&.edit-site-sidebar-card__title {
font-size: $default-font-size;
line-height: $default-line-height;
Expand All @@ -24,7 +21,6 @@

&__icon {
flex: 0 0 $icon-size;
margin-right: $grid-unit-15;
width: $icon-size;
height: $icon-size;
}
Expand Down
2 changes: 0 additions & 2 deletions packages/edit-site/src/components/sidebar-edit-mode/template-panel/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import {
PageAttributesPanel,
PostDiscussionPanel,
PostExcerptPanel,
PostFeaturedImagePanel,
PostLastRevisionPanel,
PostTaxonomiesPanel,
store as editorStore,
Expand Down Expand Up @@ -142,7 +141,6 @@ export default function TemplatePanel() {
) }
<PostLastRevisionPanel />
<PostTaxonomiesPanel />
<PostFeaturedImagePanel />
Copy link
Contributor Author

@ntsekouras ntsekouras Mar 12, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

@youknowriad you have added this here, but I don't think it's needed or used anywhere..

Am I missing something?

<PostExcerptPanel />
<PostDiscussionPanel />
<PageAttributesPanel />
Expand Down
14 changes: 12 additions & 2 deletions packages/editor/src/components/post-featured-image/panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import PostFeaturedImageCheck from './check';

const PANEL_NAME = 'featured-image';

function FeaturedImage() {
export function PrivatePostFeaturedImagePanel( { renderPanelBody } ) {
ntsekouras marked this conversation as resolved.
Show resolved Hide resolved
const { postType, isEnabled, isOpened } = useSelect( ( select ) => {
const {
getEditedPostAttribute,
Expand All @@ -37,6 +37,14 @@ function FeaturedImage() {
return null;
}

if ( ! renderPanelBody ) {
return (
<PostFeaturedImageCheck>
<PostFeaturedImage />
</PostFeaturedImageCheck>
);
}

return (
<PostFeaturedImageCheck>
<PanelBody
Expand All @@ -52,4 +60,6 @@ function FeaturedImage() {
);
}

export default FeaturedImage;
export default function PostFeaturedImagePanel() {
return <PrivatePostFeaturedImagePanel renderPanelBody />;
}
18 changes: 11 additions & 7 deletions packages/editor/src/components/post-featured-image/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@
margin-left: -9px;
}

// This keeps images at their intrinsic size (eg. a 50px
// image will never be wider than 50px).
.components-responsive-wrapper__content {
max-width: 100%;
width: auto;
object-fit: cover;
height: 100%;
width: 100%;
object-position: 50% 50%;
}
}

Expand All @@ -39,18 +39,22 @@
box-shadow: 0 0 0 0 var(--wp-admin-theme-color);
overflow: hidden; // Ensure the focus style properly encapsulates the image.

// Apply a max-height.
display: flex;
justify-content: center;
max-height: 150px;
height: 150px;
}

.editor-post-featured-image__preview {
height: auto;

.components-responsive-wrapper {
width: 100%;
height: 100%;
background: $gray-100;

> div {
width: 100%;
height: 100%;
}
}
}

Expand Down
2 changes: 2 additions & 0 deletions packages/editor/src/private-apis.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import PostPanelRow from './components/post-panel-row';
import PostViewLink from './components/post-view-link';
import PreviewDropdown from './components/preview-dropdown';
import PreferencesModal from './components/preferences-modal';
import { PrivatePostFeaturedImagePanel } from './components/post-featured-image/panel';

export const privateApis = {};
lock( privateApis, {
Expand All @@ -32,6 +33,7 @@ lock( privateApis, {
PostViewLink,
PreviewDropdown,
PreferencesModal,
PrivatePostFeaturedImagePanel,

// This is a temporary private API while we're updating the site editor to use EditorProvider.
useBlockEditorSettings,
Expand Down
1 change: 0 additions & 1 deletion test/e2e/specs/editor/various/sidebar.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,6 @@ test.describe( 'Sidebar', () => {
'Summary',
'Categories',
'Tags',
'Featured image',
'Excerpt',
'Discussion',
] );
Expand Down
Loading