WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10k stars 4.02k forks source link

can't insert a shortcode into the text (line) and as soon as I insert or (paste) it. It becomes a shortcode block in a separate block #60564

Open paulvek opened 3 months ago

paulvek commented 3 months ago

This problem still exists in 2024. I can't insert a shortcode into the text and as soon as I insert or (paste) it. It becomes a shortcode block in a separate block. And in fact, it should be inserted inline, which is easily possible in the classic editor.

Originally posted by @paulvek in https://github.com/WordPress/gutenberg/issues/3806#issuecomment-2042563511

talldan commented 3 months ago

@paulvek Please could update the description to provide more information about what's not working? A couple of sentences really isn't enough info for a dev looking to fix a problem.

I clicked through to the link, but it's confusing as there seem to be people taking across purposes about different things. The original issue is that a separate shortcode block is created for inline shortcodes (which seems to have been fixed), then someone seem to be mentioning that inline shortcodes are not processed, so it's hard to understand what the actual issue is.

The most important thing is to provide steps for reproduction that will work on a vanilla WordPress site. You can create one locally for free using a tool like local (https://localwp.com/) to check that the issue is definitely a WordPress one and not a plugin issue.

paulvek commented 3 months ago

The original issue is that a separate shortcode block is created for inline shortcodes (which seems to have been fixed),

That's the problem. Although it is mentioned that this problem has been solved, it has not been solved and this problem still exists.

I want to paste a shortcode in this line but when pasted the shortcode, the shortcode is pasted in another block and separated from this line. you can see the video I attached.

for example, I want to test text with this [acf field="field-text"] shortcode, and another of my descriptions. just as a simple text. but WordPress automatic break my text and converts it like this test text with this shortcode block [acf field="field-text"] shortcode block shortcode, and another of my descriptions.

https://github.com/WordPress/gutenberg/assets/153482922/4ffbbcac-b6ef-4fba-8248-e4c5c73ee3bc

github-actions[bot] commented 2 months ago

Help us move this issue forward. This issue is being marked stale since it has no activity after 15 days of requesting more information. Please add info requested so we can help move the issue forward. Note: The triage policy is to close stale issues that need more info and no response after 2 weeks.

paulvek commented 2 months ago

Help us move this issue forward. This issue is being marked stale since it has no activity after 15 days of requesting more information. Please add info requested so we can help move the issue forward. Note: The triage policy is to close stale issues that need more info and no response after 2 weeks.

@talldan I think there was a mistake, because I replied right away and attached and sent the additional information requested along with the video!

github-actions[bot] commented 2 months ago

Help us move this issue forward. This issue is being marked stale since it has no activity after 15 days of requesting more information. Please add info requested so we can help move the issue forward. Note: The triage policy is to close stale issues that need more info and no response after 2 weeks.

soivigol commented 3 weeks ago

Hey folks. I have the same issue. I opened a ticket on the core track https://core.trac.wordpress.org/ticket/61007. I wish that this issue will be resolved as soon as possible. You think in an editor that he has to insert 50 shortcodes copied from another plugin (real case). With this issue, it's impossible to work. I have two sites in the 6.4.3 version for this problem, but affects to many sites where they have to insert a few shortcodes, and they can to do manually, but with 50 shortcodes it's impossible.

github-actions[bot] commented 1 week ago

Help us move this issue forward. This issue is being marked stale since it has no activity after 15 days of requesting more information. Please add info requested so we can help move the issue forward. Note: The triage policy is to close stale issues that need more info and no response after 2 weeks.

vreemt commented 1 week ago

for me, a recent update broke the behaviour, since WP 6.4.5 or earlier

I tried the following plain html. I've not extensively tested the different variations that did and didn't work, but this also happened with existing content ("classic block") when trying to convert to blocks.

Before, all of the below were inline, rendered as html in the visual editor. Currently (WP 6.5.5), the last paragraph has a separate shortcode block and shows the contents as plain html in the visual editor. Manually (re)moving the extra tags/elements works, but is obviously a very tedious process.

Code editor contents

<p>This is a title: <br />With some <br />words[fn]† © year I am a name. This is the end.[/fn]†</p>

<p>I am a title: <br />A test with <br />Some Words[fn]year I am a name. This is the end.[/fn]</p>

<p>Another few words.[fn]Because we can[/fn]</p>

<p>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.[fn]This was <em>copy pasted</em> from a website. <em>Placeholder text</em> is pretty generic, <em>and there are more interesting versions</em>,https://loremipsum.io.[/fn]</p>

converted to Blocks

<!-- wp:paragraph -->
<p>Another few words.[fn]Because we can[/fn]</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
<!-- /wp:paragraph -->

<!-- wp:shortcode -->
[fn]This was <em>copy pasted</em> from a website. <em>Placeholder text</em> is pretty generic, <em>and there are more interesting versions</em>,https://loremipsum.io.[/fn]
<!-- /wp:shortcode -->

workaround (line breaks between the end of the words and the shortcode don't break the WP paragraph block)

<!-- wp:paragraph -->
<p>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.[fn]This was <em>copy pasted</em> from a website. <em>Placeholder text</em> is pretty generic, <em>and there are more interesting versions</em>,https://loremipsum.io.[/fn]
</p>
<!-- /wp:paragraph -->
vreemt commented 1 week ago

in addition, it seems https://github.com/WordPress/gutenberg/issues/6250#issuecomment-387541963 is still an issue as well -

raw code editor

<p> text containing [bracket] that isn't already </p>
<p>text containing [bracket] that isn't already</p>
<p>[bracket] i am generic text [/bracket]</p>

converted to blocks

<!-- wp:paragraph -->
<p>text containing </p>
<!-- /wp:paragraph -->

<!-- wp:shortcode -->
[bracket] that isn't already

text containing [bracket] that isn't already

[bracket] i am generic text [/bracket]
<!-- /wp:shortcode -->

pasting inline [bracket] i am generic text [/bracket] works as expected:

<!-- wp:paragraph -->
<p>inline [bracket] i am generic text [/bracket]</p>
<!-- /wp:paragraph -->

as well as [bracket] i am generic text (both pasting and converting after adding via the code editor)

but pasting [bracket] i am generic text [/bracket] (not a valid/registered shortcode) sometimes* creates a shortcode block

talldan commented 1 week ago

I personally can't reproduce the issue with pasting in the latest version of gutenberg. Are you still experiencing it @paulvek @soivigol?

vreemt commented 6 days ago

not sure if the latest Gutenberg is on the latest WP 6.5.5, tested on https://playground.wordpress.net/, issue still occurs both via code editor and pasting

Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.[fn]This was copy pasted from a website. Placeholder text is pretty generic, and there are more interesting versions,https://loremipsum.io.[/fn]

without p tags -

Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.[fn]This was copy pasted from a website. Placeholder text is pretty generic, and there are more interesting versions,https://loremipsum.io.[/fn]

<p>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.[fn]This was <em>copy pasted</em> from a website. <em>Placeholder text</em> is pretty generic, <em>and there are more interesting versions</em>,https://loremipsum.io.[/fn]</p>
talldan commented 5 days ago

👍 I can reproduce it with that [fn] shortcode. I was testing with gallery and the acf one mentioned earlier, which don't seem to have the issue.

talldan commented 5 days ago

From a quick debug, it seems like there might be two issues at play. Firstly if you insert a non-self-closing shortcode (like [fn]test[/fn]) as completely plain text, then it'll be run through a markdown converter first, which has the effect of wrapping the shortcode in <p> tags. That leads to the second thing that's happening.

When copying from the web, often there's inadvertently some html copied with the shortcode. The block editor seems to try to preserve the html as best as possible. When there are non-inline tags, it results in a new block being added.

In the case of the first behavior I mentioned (markdown converter), it triggers the second behavior because of the added <p> tags.

The second behavior I mentioned can happen completely separately to the first. If you copy a self-closing shortcode (like [gallery] from some html (like a code block), it can trigger the adding of the shortcode block, while copying it from normal text won't. That explains why I was unable to reproduce the issue until now.

soivigol commented 5 days ago

Hi @talldan. I think that my issue is a little different. See here a short video explaining my problem https://video.soivigol.dev/conversations/c01463e3-04f7-5248-a8c8-59c49aec8c44. Environment to test: WordPress playground with Nightly version. PHP 8.0. I tried with different versions and the issue is the same

In my case, I copy the shortcode from another plugin that I need to be rendered inline because it renders a link. I did the example with Adavanced Ads, but I have the problem with a custom plugin that make the same functionality that I explain in the video. This issue happens with many plugins that need to be inserted inline.

I will be happy to give more feedback or help to find the issue with a little support!

Sandra-headscape commented 2 days ago

@soivigol i imagine your shortcode is seen as pasted "plain text", thus running into the first conversion (markdown) @talldan mentions.

I tested with [bracket]some text here[/bracket] as well, to rule out any specific functionality related to the [fn] shortcode, but I'm now thinking the non-plain text conversion only applies to non-self-closing shortcodes (both gallery and acf are self-closing)

@soivigol if it's a self-closing shortcode, you should be able to add it via the code editor, and it'll work as expected

I think I'm going to create a work-around using a self-closing shortcode, eg

some text [fn content="Placeholder <em>text</em> is pretty generic"] with an inline shortcode

as this won't generate a shortcode block with "Convert to blocks"

an example of a non-self-closing core shortcode is [caption] [caption id="attachment_6" align="alignright" width="300"]<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/The_Great_Wave_off_Kanagawa.jpg/1600px-The_Great_Wave_off_Kanagawa.jpg" alt="Kanagawa" title="The Great Wave" width="300" height="205" class="size-medium wp-image-6" /> The <em>Great</em> Wave[/caption] which works as expected, even with html

soivigol commented 2 days ago

@Sandra-headscape Thanks for your clarification. I wrapped the shortcode in a span tag and now, works fine!!! In my case, it's a great solution, because I am using the ClipboardJS to copy with a click. So fine for me. But I think that is not an ideal solution in general why we have a lot of plugins where the user has to copy the shortcode from a list and paste inline, as the Advance Ads. In WordPress 6.4, this functionality worked fine 🤷.

@Sandra-headscape @talldan Thanks for your help. In my case, it's working now!!