Make WordPress Core

Opened 10 years ago

Closed 8 years ago

#26681 closed enhancement (duplicate)

Allow HTML in selection captured with Press This bookmarklet

Reported by: grosbouff's profile grosbouff Owned by:
Milestone: Priority: normal
Severity: normal Version: 3.8
Component: Press This Keywords: close
Focuses: Cc:

Description

Hi, since a few weeks I'm using the Press This bookmarklet, which is, I think, an underestimated function of WP.

I like websites like Pinterest, Springpad or LoveIt, but i'm not trusting them and I want to do what I want with the "pins" I save : I would like to save them on my WP, not on an external service.

For example, I had a LoveIt account and they just said they were shutting down their service, 2 weeks before doing it, and without any tool to help users backup their account. (hopefully I had already created a WP plugin to backup it : http://wordpress.org/plugins/loveitcom-importer/)
Pinterest is great but only allows 3 private albums... I don't like when websites are forcing me to do what I don't want : share my stuff.

I think Wordpress COULD and SHOULD propose an alternative to those services, and only one thing is missing for this : the ability to capture HTML and not only text.
This is a HUGE difference !

"Press This" could work as actually (get selection then load it in the popup window); but having a filter hook on the HTML selection would allow plugins to act on the selection captured :
WP would, by default, santize the selection with a filter hook to output simple text, but having this hook would allow plugins to act on the selection captured:

plugins could

  • allow certain html tags (em, bold, stroke, img, a, ...) instead of having "pure" text,
  • download remote medias found in the captured code,
  • Set appropriate post format depending on what is captured,
  • Change how the popup displays and have a wizard instead of the actual press this page;

I already send this as a Wordpress Idea (http://wordpress.org/ideas/topic/improve-press-this-bookmarklet), sorry to post here but I'm sure would be a great feature and i'm surprised nobody seems to have talked about this already.

I had once started to develop my own plugin to achieve this, but it was really difficult to make as there are not much hooks in the "Press This" code, and above all, because WP is capturing text and not code.
Changing this would make things really easier.

Thanks a lot, hope you'll like the idea !

Change History (17)

#1 @grosbouff
10 years ago

No one interested about this ?

#2 @kraftbj
9 years ago

Have you seen the Press This feature plugin project? https://wordpress.org/plugins/press-this/

The aim of the project is to, hopefully in 4.2, replace the existing Press This. It doesn't pull code in, but does allow for sideloading of remote images. Dev meetings Wednesdays at 1600 UTC in #feature-pressthis (in the new Slack instance, http://chat.wordpress.org ).

#3 follow-up: @Michael Arestad
9 years ago

allow certain html tags (em, bold, stroke, img, a, ...) instead of having "pure" text,

I'm really hesitant to allow HTML pastes in Press This that format text, but it is something that needs consideration and discussion.

download remote medias found in the captured code,

I don't fully understand this request. Can you give me an example?

Set appropriate post format depending on what is captured

We are indeed exploring the idea of trying to guess post formats (as well as disabling that).

Change how the popup displays and have a wizard instead of the actual press this page;

The UI is getting a whole new rethink. It won't be a wizard, but it will be pretty efficient.

#4 in reply to: ↑ 3 @kraftbj
9 years ago

Replying to Michael Arestad:

download remote medias found in the captured code,

I don't fully understand this request. Can you give me an example?

I understood this as selecting an image as part of the blockquote and having that loaded, instead of just the text. In the featured plugin, I think the media modal, while not exactly this request, works in a similar enough fashion.

#5 follow-up: @grosbouff
9 years ago

Yeah, as @kraftbj said, that's the idea.
Press This is a cool feature but I think it has not evolved since a while.
It is too much text-oriented; and i'm sure a lot of users would be really glad to be able to capture medias and other stuff.
Personally, I would use Press This waaayyy more to capture images than to capture text.

It should fetch HTML code and allow to filter tags to get images, videos, audios, and text-styling (bold, italic, etc).
Plugins should be able to add filters and actions on it : allow new tags, convert "popular" pieces of HTML codes(Youtube, Soundcloud, etc) to Oembed stuff.

And so on...

#6 in reply to: ↑ 5 @Michael Arestad
9 years ago

Replying to grosbouff:

It should fetch HTML code and allow to filter tags to get images, videos, audios, and text-styling (bold, italic, etc).
Plugins should be able to add filters and actions on it : allow new tags, convert "popular" pieces of HTML codes(Youtube, Soundcloud, etc) to Oembed stuff.

The current implementation already does some of that. If you're on a YouTube page and hit Press This, it'll snag and provide the embed code. We're working on making that a bit more visual and seeing if we can improve the intelligence of how PT selects content for you.

I don't plan on implementing anything that brings in HTML markup for text styling. That functionality will still exist on the full editor if needed. We're making it much easier to hop from Press This into the full editor without losing progress as well. This could allow you, should you desire to, the ability to hop into the full editor and paste in the styled content.

#7 follow-up: @grosbouff
9 years ago

The current implementation already does some of that. If you're on a YouTube page and hit Press This, it'll snag and provide the embed code.

Ok, but what if I want to grab a part of an article, let's say an article about movies, which has 3 videos embedded (at different places of the article) ?

It won't work. I'll have to spend time to grab the things I want from that article; as I usually do.

As a Wordpress user, I would really appreciate that WP (and Press This) helps me saving time by offering the possibility of grabbing the real content (and not only the text) of a page.

As I said above, this could be an alternative to Pinterest, for example.
I like to collect images (and medias) I see everywhere, and knowing that Press This can't do it is too bad :(

#8 in reply to: ↑ 7 @Michael Arestad
9 years ago

Replying to grosbouff:

Ok, but what if I want to grab a part of an article, let's say an article about movies, which has 3 videos embedded (at different places of the article) ?

It won't work. I'll have to spend time to grab the things I want from that article; as I usually do.

That's true. Ideally, what would you like to happen when you Press a page?

#9 @grosbouff
9 years ago

That's true. Ideally, what would you like to happen when you Press a page?

  • To grab the whole content, medias included [when the page is not a "single" media page. (a Youtube video is a single media page]
  • Grab styling too (bold, italic, etc)
  • If there is a user selection, "trim" the content to the user's selection.

#10 @azaozz
9 years ago

  • Keywords close added

To grab the whole content, medias included...
Grab styling too (bold, italic, etc).

Don't think Press This should be a "site copy" tool. It's purpose is to share something interesting you found, with a link back to the original and perhaps a small quote, not copy whole pages and post them on your site :)

#11 @grosbouff
9 years ago

Don't think Press This should be a "site copy" tool. It's purpose is to share something interesting you found, with a link back to the original and perhaps a small quote, not copy whole pages and post them on your site :)

Of course, the goal should not be to be a "site copy" tool, you misunderstood me on this point.

In my opinion, Press This is (should be) useful when you stumble upon a great quote, a part of an interesting article, a nice set of pictures, a cool video...

The idea is not to "clone" another website, but to be able to collect things - like in an herbaria.

Personally, I have a (private) blog where I collect such things. It's only for my own use; I collect "memories" and things I like.
Imagine how useful it could be for a scientist, a journalist, an artist ... trying to get documentation for his work.

Wordpress is an incredible toolbox you can tweak for your own usage. Press This should be developed in the same spirit : implementing tools (actions,filters,...) people could use and/or tweak.

I think there is a large variety of ways people are using / could use Press This.
In my opinion, the current tool is (nice but) too restrictive, it doesn't leave enough slack for developers to play with it; and not allowing to capture HTML is one of the problems.

#12 @azaozz
9 years ago

Ah I see. Seems this type of usage can be added by a plugin. If you try to make such plugin and encounter difficulties, perhaps request a filter (or an action) that would make it work better.

#13 follow-up: @grosbouff
9 years ago

perhaps request a filter (or an action) that would make it work better.

Hi @azaoozz, that's why I opened this ticket :)

See first post :

[...]"Press This" could work as actually (get selection then load it in the popup window); but having a filter hook on the HTML selection would allow plugins to act on the selection captured :
WP would, by default, santize the selection with a filter hook to output simple text, but having this hook would allow plugins to act on the selection captured[...]

#14 in reply to: ↑ 13 @azaozz
9 years ago

Replying to grosbouff:

I meant a proposed filter location, args, etc. and a small example of how it can be used. It is much easier to understand what's needed when trying to use it, and having some code would probably explain it better :)

As far as I see the bookmarklet JS may have to be replaced by such plugin. Also it should filter the received HTML, use kses to allow only certain tags, etc.

#15 @Stagger Lee
9 years ago

Just tested last Press This (core). This is not usable at all.
100 times faster to just copy/paste text via TinyMce "Paste as text" button and format it quickly.

All is one looooong line with all empty spaces removed. (with blockquote or without)

How to format this text after ? No way. Exactly as you see it here looks in Press This window, and after in Post.


Adding multiple actions and filters using anonymous functions in WordPressLeave a reply Using closures when adding hooks and filters in WordPress is very convenient, instead of defining a global function to run your hook, like this:123456 add_filter('the_content', 'filter_the_content');function filter_the_content($content){ Do something with the content return $content;}You can instead define the function in-place, which is referred to as a closure, or anonymous function:12345 add_filter('the_content', function($content){ Do something with the content return $content;});This is nice because it’s slightly shorter and we avoid polluting the global namespace with functions.But, you run into a problem if you want to attach the same anonymous function to multiple filters. While you can do it very easily with a global function like this:123456789 Both the_content and widget_text will be filtered through filter_the_content()add_filter('the_content', 'filter_the_content');add_filter('widget_text', 'filter_the_content'); function filter_the_content($content){ Do something with the content return $content;}…there’s really no way to do this with anonymous function. You’d have to create the same function twice, resulting in a DRY violation:01020304050607080910111213 Filter the_contentadd_filter('the_content', function($content){ Do something with the content return $content;}); Filter widget_textadd_filter('widget_text', function($content){ Do something with the content return $content;});That’s not very pretty, so I thought for a while about a good way to attach multiple filters and actions to the same anonymous function.The solutionBy implementing a wrapper function for add_filter(), which we will call add_filters(), we can let developers pass an array as the filter name and then apply the filter function multiple times, each time attaching our anonymous function. If we take the previous example which forced us to repeat ourselves, we can now do this:12345 add_filters(array( 'the_content', 'widget_text' ), function($content){ Do something with both the_content and widget_text filters return $content;});Cool, but what about different priorities?Let’s fix that too! If you have to apply different priorities, we’ll just specify them as an array in the same order as the array of filter names, like this:123456 add_filters(array( 'the_content', 'widget_text' ), function($content){ Do something with both the_content and widget_text filters return $content;},array(15,20)); the_content filter will have priority 15 and widget_text filter will have priority 20How would we do this for actions?Filters and actions are actually the same thing, the only difference is that an action does not (generally) return anything, it just lets you hook in and run your code at a certain event or timing. (Like when a user registers, when a comment is posted, and so on.) In the WordPress core source code, add_action() is just a wrapper for add_filter()!For example, this code will print a comment in both the header and footer.1234 add_actions(array('wp_head', 'wp_footer'), function() { echo ""; }); So, how do you get these functions? You can either download the helper plugin on GitHub, or copy and paste the below code into a WordPress theme or plugin!0102030405060708091011121314151617181920212223242526272829303132333435363738 / * Add multiple filters to a closure * * @param $tags * @param $function_to_add * @param int $priority * @param int $accepted_args * * @return bool true */function add_filters($tags, $function_to_add, $priority = 10, $accepted_args = 1){ If the filter names are not an array, create an array containing one item if(!is_array($tags)) $tags = array($tags); For each filter name foreach($tags as $index => $tag) add_filter($tag, $function_to_add, (int)(is_array($priority) ? $priority[$index] : $priority), (int)(is_array($accepted_args) ? $accepted_args[$index] : $accepted_args)); return true;} / * Add multiple actions to a closure * * @param $tags * @param $function_to_add * @param int $priority * @param int $accepted_args * * @return bool true */function add_actions($tags, $function_to_add, $priority = 10, $accepted_args = 1){ add_action() is just a wrapper around add_filter(), so we do the same return add_filters($tags, $function_to_add, $priority, $accepted_args

#16 @kraftbj
8 years ago

Related: #33712

#17 @kraftbj
8 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to duplicate
  • Status changed from new to closed

I'm going to close this and defer to #33712. The line/paragraph breaks are the key need, in my opinion. In the process of looking at that, we can look at adding other limited tags (as mentioned in this comment).

Note: See TracTickets for help on using tickets.