Insert data-label through new format on RichText

  • Resolved little_bird

    (@little_bird)


    1 year, 6 months ago

    Hi,

    I want to create a RichText format that allows me to add data attributes to a selected word or phrase. Is that possible? In the documentation and examples I found, the only attributes that are possible to add are style, class, or href. If it is not possible to add data attributes through a new format, how can I do it?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator bcworkz

    (@bcworkz)

    WP enforces a limited set of allowed HTML tags and attributes through wp_kses_allowed_html(). There is a filter hook by the same name which we can use to modify what is allowed. The filter callback you’d add can modify the passed array as desired to allow other attributes.
    https://developer.www.ads-software.com/reference/hooks/wp_kses_allowed_html/

    Thread Starter little_bird

    (@little_bird)

    Hi bcworkz,

    Thanks for your answer. I realized that it is indeed possible to add data attributes through a custom format on a RichText component. It didn’t work for me before because I was using the wrong syntax, but now it is working. without using the wp_kses_allowed_html() filter.

    If someone needs it for reference, this is part of the format code using a ComboboxControl component.

    <ComboboxControl
	label="Term to add"
	value={term}
	options={options}
	onChange={(newTerm) => { // newTerm is the postID
		setTerm(newTerm);
		setShowPopover(false);
		const attributes = { style: 'color: #1d55a9; font-weight: bold;', class: hebrew-israterm, 'data-hbwterm': ${newTerm} };

		if (newTerm) {
			onChange(applyFormat(value, {
				type: 'heb-expression-block/hebrew-expression',
				attributes
			}));
		} else {
			onChange(toggleFormat(value, { type: 'heb-expression-block/hebrew-expression' }));
		}


	}}
	__nextHasNoMarginBottom
/>
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Insert data-label through new format on RichText’ is closed to new replies.