Description
One of the plugins I work on, Tasty Pins, offers the ability to add "Pinterest Text" to an image (related #8473).
In the Classic Editor, the user can edit their Pinterest Text in the Media Library:
When the image is inserted into the post, the Pinterest Text is included as a data-pinterest-description
data attribute:
Even though all of this interaction is clientside, a plugin can modify the <img>
image markup sent to the editor via the image_send_to_editor
filter (ref):
/**
* Append Pinterest Text to markup sent to editor
*
* @param string $html The image HTML markup to send.
* @param int $id The attachment id.
* @return string
*/
public static function filter_image_send_to_editor( $html, $id ) {
if ( ! empty( $_POST['props']['tp_pinterest_text'] ) ) {
$html = str_replace( '<img ', '<img data-pin-description="' . esc_attr( wp_unslash( $_POST['props']['tp_pinterest_text'] ) ) . '" ', $html );
}
if ( ! empty( $_POST['props']['tp_pinterest_nopin'] ) ) {
$html = str_replace( '<img ', '<img data-pin-nopin="true" ', $html );
}
return $html;
}
What's the best way to achieve equivalent behavior in Gutenberg?
One idea, albeit not necessarily a good one, is to make onSelectImage
filterable:
gutenberg/core-blocks/image/edit.js
Lines 113 to 128 in abb14b1
onSelectImage
seems to be common across Image, Cover Image, and Gallery Blocks. Other approaches?