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.

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

RichText Editor core/underline missing #47484

Closed
aceArt-GmbH opened this issue Jan 27, 2023 · 5 comments
Closed

RichText Editor core/underline missing #47484

aceArt-GmbH opened this issue Jan 27, 2023 · 5 comments
Labels
[Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable Needs Decision Needs a decision to be actionable or relevant [Type] Enhancement A suggestion for improvement.

Comments

@aceArt-GmbH
Copy link

Description

<RichText /> should allow underlining text.
There is code for it in this repo https://github.com/WordPress/gutenberg/tree/trunk/packages/format-library/src/underline.
But it does not show up as option

Step-by-step reproduction instructions

  1. npx @wordpress/create-block starter-block
  2. cd starter-block
  3. wp-env start
  4. npm start
  5. Add the RichText editor to the edit.js
import { RichText } from "@wordpress/block-editor";
<RichText
	tagName="div"
	value={attributes.test}
	onChange={(test) => setAttributes({ test })}
/>
  1. see no underline

Screenshots, screen recording, code snippet

image

Workaround:

/*
	Register underline button to rich text editor
	https://developer.wordpress.org/block-editor/how-to-guides/format-api/
*/
const UnderlineButton = ({ isActive, onChange, value }) => {
	return (
		<RichTextToolbarButton
			icon="editor-underline"
			title="Unterstrichen"
			onClick={() => {
				onChange(
					toggleFormat(value, {
						type: "my-project/underline",
					})
				);
			}}
			isActive={isActive}
		/>
	);
};

registerFormatType("my-project/underline", {
	title: "Unterstrichen",
	tagName: "u",
	className: null,
	edit: UnderlineButton,
});

Environment info

  • Wordpress 6.1.1
  • "@wordpress/scripts": "^25.2.0"
  • Chromium and Firefox on Linux

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

@t-hamano
Copy link
Contributor

Hi @aceArt-GmbH,
The underline can be run from the shortcut, but as far as I know, it is intentional that it is not shown in the dropdown. The following topics will give you some background information.

@t-hamano t-hamano added the [Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable label Jan 27, 2023
@aceArt-GmbH
Copy link
Author

okay, if this is intentional it should at least be documented somewhere in the RichText documentation with a way to re-enable it if someone wants it.
Or if you can not re-enable it, feel free to include my workaround

@t-hamano
Copy link
Contributor

The first underline button was removed in WordPress 4.7, before Gutenberg was introduced.

This article states that it was removed due to accessibility issues. I think it would be inappropriate to dare to document how to enable this. If there are developers who want to enable this, I think they can implement it with reference to Formatting Toolbar API.

@ellatrix
I would love to hear any feedback on documenting how to re-enable the underline button.

@jordesign jordesign added [Type] Enhancement A suggestion for improvement. Needs Decision Needs a decision to be actionable or relevant labels Jul 28, 2023
@jordesign
Copy link
Contributor

Just checking in on this issue - to see if there's anything we need to discuss/decide and action - or if it can be closed?

@t-hamano
Copy link
Contributor

@jordesign Thanks for digging up this issue.

As I have commented several times on this issue, I believe the removal of the core/underline shortcut button was not appropriate from an accessibility standpoint and was removed after discussion and consensus.

Developers who really want to add that button could look at the Formatting Toolbar API documentation and implement it, and I don't think we should put a deprecated method on the site.

@aceArt-GmbH

I would like to close this issue, but if you have any suggestions feel free to comment.

@t-hamano t-hamano closed this as not planned Won't fix, can't repro, duplicate, stale Jul 28, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable Needs Decision Needs a decision to be actionable or relevant [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests

3 participants