wp-shortcake / shortcake

Shortcake makes using WordPress shortcodes a piece of cake.
GNU General Public License v2.0
665 stars 143 forks source link

Preserving HTML entities when adding embed codes #789

Open gsalkin opened 6 years ago

gsalkin commented 6 years ago

We have a shortcode registered via the UI that allows users to embed Flickr galleries in posts. The UI is registered like so below:

shortcode_ui_register_for_shortcode( 'flickr_embed',
      array(
        'label'            => esc_html__( 'Flickr Gallery', 'shortcode-ui' ),
        'listItemImage'    => 'dashicons-format-gallery',
        'post_type'        => self::SHORT_CODE_POST_TYPES,
        'inner_content'    => array(
            'label'        => esc_html__( 'Flickr Embed', 'shortcode-ui' ),
            'description'  => esc_html__( 'Add the Flickr Gallery embed code.', 'shortcode-ui' ),
        ),
        'attrs'            => array(
          array(
            'label'        => esc_html__( 'Attachment', 'shortcode-ui' ),
            'attr'         => 'attachment',
            'type'         => 'attachment',
            'libraryType'  => array( 'image' ),
            'addButton'    => esc_html__( 'Select Image', 'shortcode-ui' ),
            'frameTitle'   => esc_html__( 'Select The Cover Image - 1040x585 (16:9)', 'shortcode-ui ' ),
            'description'  => esc_html__('Must be 16:9 (1040x585)', 'shortcode-ui'),
          ),
        ),
      )
    );

When pasting in the embed code into the text area, everything works fine. However, if a user goes to edit the shortcake (update a cover image or what have you), many of the html entities have been converted to their unicode(?) entities.

For example, this: <a data-flickr-embed="true" href="https://www.flickr.com/photos/flickr/albums/72157639858715274" title="Flickr Friday"><img src="https://farm3.staticflickr.com/2838/33797934960_4b586dbcfb_b.jpg" width="1024" height="768" alt="Flickr Friday"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>

Becomes this: <a data-flickr-embed="true" href="https://www.flickr.com/photos/flickr/albums/72157639858715274" title="Flickr Friday"><img src="https://farm3.staticflickr.com/2838/33797934960_4b586dbcfb_b.jpg" width="1024" height="768" alt="Flickr Friday"></a><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20async%20src%3D%22%2F%2Fembedr.flickr.com%2Fassets%2Fclient-code.js%22%20charset%3D%22utf-8%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

Obviously, stripping the <script> tags prevents the embed from working properly.

Does anyone know how to ensure that the text area preserves the code as originally pasted? Is this a Wordpress issue perhaps?

goldenapples commented 6 years ago

WP replaces Githubissues.

  • Githubissues is a development platform for aggregating issues.