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

post-title: add text styling options #31400

Closed
wants to merge 1 commit into from
Closed

post-title: add text styling options #31400

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
15 changes: 12 additions & 3 deletions packages/block-library/src/post-title/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {
BlockControls,
InspectorControls,
useBlockProps,
PlainText,
RichText,
Copy link
Contributor

@priethor priethor May 3, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

Hi @kapilpaul, thanks for attempting this PR as a first contribution 🎉

However, simply changing the block's component from PlainText to RichText has a number of unexpected effects in other places that use the post title, as it currently is not expected to contain rich text and the new HTML added by the RichText is displayed as content, like in the example below:

Grabacion.de.pantalla.2021-05-03.a.las.18.03.21.mov

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Hi @priethor Thanks for reviewing it. I understand this will cause a lot of issues. So in that case, how can I achieve this feature? Do you have anything in mind? Can you please guide me?

Copy link
Contributor

Choose a reason for hiding this comment

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

Achieving fine-grained styling options that require markup inside the post title content would require quite some architectural changes, so a better approach would be adding styles that affect the whole block rather than the content in a similar way Font Size and Line Height work.

Users won't be able to make "Hello" bold and "world" italic, for example, which I would say is a very specific and not-so-common use case, but the whole block would be bold and/or italic. As these would be saved as block attributes and not inside the post title as markup, other uses of the post title like get_the_title() won't be impacted.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Exactly that comes to my mind. I will look deeper into it. Thanks for the guidance. I will work on it :)

} from '@wordpress/block-editor';
import {
ToolbarGroup,
Expand Down Expand Up @@ -58,6 +58,14 @@ export default function PostTitleEdit( {

const { title = '', link } = post;

const allowedFormats = [
'core/bold',
'core/italic',
'core/strikethrough',
'core/subscript',
'core/superscript',
];

let titleElement = (
<TagName { ...( isLink ? {} : blockProps ) }>
{ __( 'An example title' ) }
Expand All @@ -66,9 +74,10 @@ export default function PostTitleEdit( {

if ( postType && postId ) {
titleElement = (
<PlainText
<RichText
tagName={ TagName }
placeholder={ __( 'No Title' ) }
allowedFormats={ allowedFormats }
value={ title }
onChange={ ( value ) =>
editEntityRecord( 'postType', postType, postId, {
Expand All @@ -84,7 +93,7 @@ export default function PostTitleEdit( {
if ( isLink ) {
titleElement = (
<TagName { ...blockProps }>
<PlainText
<RichText
tagName="a"
href={ link }
target={ linkTarget }
Expand Down