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 8 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
2 changes: 2 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 @@ -14,6 +14,7 @@ import {
PostSyncStatus,
PostURLPanel,
PostTemplatePanel,
PostFeaturedImagePanel,
store as editorStore,
} from '@wordpress/editor';

Expand Down Expand Up @@ -60,6 +61,7 @@ export default function PostStatus() {
<PluginPostStatusInfo.Slot>
{ ( fills ) => (
<>
<PostFeaturedImagePanel withPanelBody={ 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
2 changes: 2 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,6 +7,7 @@ import {
PostURLPanel,
PostSchedulePanel,
PostTemplatePanel,
PostFeaturedImagePanel,
} from '@wordpress/editor';

/**
Expand All @@ -23,6 +24,7 @@ export default function PageSummary( {
} ) {
return (
<VStack spacing={ 0 }>
<PostFeaturedImagePanel withPanelBody={ 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
21 changes: 6 additions & 15 deletions packages/editor/src/components/post-featured-image/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import {
DropZone,
Button,
Spinner,
ResponsiveWrapper,
withNotices,
withFilters,
__experimentalHStack as HStack,
Expand Down Expand Up @@ -99,10 +98,7 @@ function PostFeaturedImage( {
const toggleRef = useRef();
const [ isLoading, setIsLoading ] = useState( false );
const { getSettings } = useSelect( blockEditorStore );
const { mediaWidth, mediaHeight, mediaSourceUrl } = getMediaDetails(
media,
currentPostId
);
const { mediaSourceUrl } = getMediaDetails( media, currentPostId );

function onDropFiles( filesList ) {
getSettings().mediaUpload( {
Expand Down Expand Up @@ -183,16 +179,11 @@ function PostFeaturedImage( {
}
>
{ !! featuredImageId && media && (
<ResponsiveWrapper
naturalWidth={ mediaWidth }
naturalHeight={ mediaHeight }
isInline
>
<img
src={ mediaSourceUrl }
alt=""
/>
</ResponsiveWrapper>
<img
className="editor-post-featured-image__preview-image"
src={ mediaSourceUrl }
alt=""
/>
) }
{ isLoading && <Spinner /> }
{ ! featuredImageId &&
Expand Down
12 changes: 9 additions & 3 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 default function PostFeaturedImagePanel( { withPanelBody = true } ) {
const { postType, isEnabled, isOpened } = useSelect( ( select ) => {
const {
getEditedPostAttribute,
Expand All @@ -37,6 +37,14 @@ function FeaturedImage() {
return null;
}

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

return (
<PostFeaturedImageCheck>
<PanelBody
Expand All @@ -51,5 +59,3 @@ function FeaturedImage() {
</PostFeaturedImageCheck>
);
}

export default FeaturedImage;
25 changes: 15 additions & 10 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
@@ -1,21 +1,13 @@
.editor-post-featured-image {
padding: 0;


.components-spinner {
position: absolute;
top: 50%;
left: 50%;
margin-top: -9px;
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;
}
}

.editor-post-featured-image__container {
Expand Down Expand Up @@ -43,14 +35,27 @@
display: flex;
justify-content: center;
max-height: 150px;
ntsekouras marked this conversation as resolved.
Show resolved Hide resolved

&::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: $border-width solid rgba(0, 0, 0, 0.1);
border-radius: $radius-block-ui;
}
}

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

.components-responsive-wrapper {
.editor-post-featured-image__preview-image {
object-fit: cover;
width: 100%;
background: $gray-100;
object-position: 50% 50%;
aspect-ratio: 2/1;
}
}

Expand Down
7 changes: 6 additions & 1 deletion test/e2e/specs/editor/various/post-visibility.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,12 @@ test.describe( 'Post visibility', () => {

await page.click( 'role=button[name="View next month"i]' );
await page.click( 'role=application[name="Calendar"] >> text=15' );

await page
.locator( '.block-editor-publish-date-time-picker' )
.getByRole( 'button', {
name: 'Close',
} )
.click();
await page.click( 'role=button[name="Select visibility: Public"i]' );

await page.click( 'role=radio[name="Private"i]' );
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