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

Use Badge component in page markers #68103

Merged
merged 6 commits into from
Dec 19, 2024
Merged

Use Badge component in page markers #68103

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7235792
Use Badge component in page markers
juanfra Dec 18, 2024
342c6a8
Remove redundant prop.
juanfra Dec 18, 2024
b349329
Remove import.
juanfra Dec 18, 2024
1f25289
Merge branch 'trunk' into fix/use-badge-page-markers
juanfra Dec 19, 2024
32f76df
Merge branch 'trunk' into fix/use-badge-page-markers
juanfra Dec 19, 2024
7af1658
Fix the title alignment.
juanfra Dec 19, 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
10 changes: 6 additions & 4 deletions packages/editor/src/components/post-card-panel/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
__experimentalHStack as HStack,
__experimentalVStack as VStack,
__experimentalText as Text,
privateApis as componentsPrivateApis,
} from '@wordpress/components';
import { store as coreStore } from '@wordpress/core-data';
import { useSelect } from '@wordpress/data';
Expand All @@ -25,6 +26,7 @@ import { unlock } from '../../lock-unlock';
import PostActions from '../post-actions';
import usePageTypeBadge from '../../utils/pageTypeBadge';
import { getTemplateInfo } from '../../utils/get-template-info';
const { Badge } = unlock( componentsPrivateApis );

/**
* Renders a title of the post type and the available quick actions available within a 3-dot dropdown.
Expand Down Expand Up @@ -109,11 +111,11 @@ export default function PostCardPanel( {
className="editor-post-card-panel__title"
as="h2"
>
{ title }
<span className="editor-post-card-panel__title-name">
Copy link
Member

Choose a reason for hiding this comment

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

I think this wrapper is unnecessary, see below comment for explanation.

{ title }
</span>
{ pageTypeBadge && postIds.length === 1 && (
<span className="editor-post-card-panel__title-badge">
{ pageTypeBadge }
</span>
<Badge>{ pageTypeBadge }</Badge>
) }
</Text>
<PostActions
Expand Down
17 changes: 4 additions & 13 deletions packages/editor/src/components/post-card-panel/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@
&.editor-post-card-panel__title {
@include heading-medium();
margin: 0;
padding: 2px 0;
display: flex;
align-items: center;
flex-wrap: wrap;
Expand All @@ -34,19 +33,11 @@
margin-bottom: $grid-unit-10;
}

.editor-post-card-panel__title-name {
padding: 2px 0;
}
Comment on lines +36 to +38
Copy link
Member

Choose a reason for hiding this comment

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

I think this is unnecessary, because the wrapping .editor-post-card-panel__title.editor-post-card-panel__title already has display: flex; align-items: center, and it should center the nested title name vertically even without providing top/bottom padding.

Copy link
Member Author

@juanfra juanfra Dec 19, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

@tyxla Thanks for reviewing! Right, in that case is indeed not needed. I kept it for the particular case when the page title is long, and displayed in two lines.

That's when, without the padding, the vertical alignment ends up pushing the page title to the top and the alignment between title and icon is not working (please see the screenshot on the Panel title without 2px padding and long title column here).

If we're okay with not having that, I can remove it. The only thing is that it won't be in line with what we have for the Block Card.

Copy link
Member

Choose a reason for hiding this comment

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

@mirka suggests introducing truncation to one line in #68107 which I think should void the need for this.

Copy link
Member Author

Choose a reason for hiding this comment

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

The proposed truncation is for the Badge, though. What's pushing things to be in two lines is the page title in this case.

Copy link
Member

Choose a reason for hiding this comment

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

Ah, I see what you mean. I think it makes sense to keep the padding then 👍


.editor-post-card-panel__description {
color: $gray-700;
}
}

.editor-post-card-panel__title-badge {
Copy link
Member

Choose a reason for hiding this comment

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

👏

background: $gray-100;
color: $gray-800;
padding: 0 $grid-unit-05;
border-radius: $radius-small;
font-size: 12px;
font-weight: 400;
flex-shrink: 0;
line-height: $grid-unit-05 * 5;
display: inline-block;
}
10 changes: 0 additions & 10 deletions packages/fields/src/fields/page-title/style.scss
View file
Open in desktop

This file was deleted.

7 changes: 5 additions & 2 deletions packages/fields/src/fields/page-title/view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,15 @@ import { __ } from '@wordpress/i18n';
import { useSelect } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';
import type { Settings } from '@wordpress/core-data';
import { privateApis as componentsPrivateApis } from '@wordpress/components';

/**
* Internal dependencies
*/
import type { CommonPost } from '../../types';
import { BaseTitleView } from '../title/view';
import { unlock } from '../../lock-unlock';
const { Badge } = unlock( componentsPrivateApis );

export default function PageTitleView( { item }: { item: CommonPost } ) {
const { frontPageId, postsPageId } = useSelect( ( select ) => {
Expand All @@ -27,11 +30,11 @@ export default function PageTitleView( { item }: { item: CommonPost } ) {
return (
<BaseTitleView item={ item } className="fields-field__page-title">
{ [ frontPageId, postsPageId ].includes( item.id as number ) && (
<span className="fields-field__page-title__badge">
<Badge>
{ item.id === frontPageId
? __( 'Homepage' )
: __( 'Posts Page' ) }
</span>
</Badge>
) }
</BaseTitleView>
);
Expand Down
1 change: 0 additions & 1 deletion packages/fields/src/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,4 @@
@import "./fields/featured-image/style.scss";
@import "./fields/template/style.scss";
@import "./fields/title/style.scss";
@import "./fields/page-title/style.scss";
@import "./fields/pattern-title/style.scss";
Loading