New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Gutenberg Classic block - buttons insert shortcodes at start of post #100

Open
bobbingwide opened this Issue Feb 4, 2018 · 6 comments

Comments

Projects
None yet
1 participant
@bobbingwide
Owner

bobbingwide commented Feb 4, 2018

With the Gutenberg plugin, the Classic block editor can be used to create content as if you were in the TinyMCE editor.

The three different buttons that oik provides work unchanged, except for the last bit where the generated shortcode is pasted into the editor at the cursor position.

Expected result

The shortcode is pasted at the cursor position

Actual result

The shortcode is pasted at the start of the block

Explanation

The logic needs to cater for the fact that there could be multiple blocks.
It's currently using

tinyMCE.activeEditor.execCommand('mceInsertContent', 0, shortcode);

Changing this one line to

editor.execCommand('mceInsertContent', 0, shortcode);

seemed to fix the problem for the button creator dialog and it appeared to work for both the new editor and the Classic editor ( which was nice ).

BUT... It doesn't work and I have very little idea what I need to do to fix it.

Problem determination

  • If I go to the console and type the command directly then it does what I expect.
  • The dialogues are displayed using ThickBox.
  • If you simply escape from the dialog box then the cursor position is lost.
  • I can only imagine that the editor loses track of the cursor position.

Whatever I seem to do it works fine in the Classic Editor but fails in the Classic block.

@bobbingwide

This comment has been minimized.

Owner

bobbingwide commented Oct 24, 2018

In v4.0.0 the buttons do appear to work on some devices but not at all on others.
This applies to all three TinyMCE buttons.

Device Browser Works
iPad Safari No - dialog not displayed.
iPad Chrome No - dialog not displayed
iPad Firefox No - dialog not displayed
iPhone SE ? Don’t even bother trying to use Gutenberg.

On the iPad, the only evidence that something was attempted is a scrolling barbershop pole which appears if you scroll the page down and the admin bar appears to have dropped down a bit as well.

@bobbingwide

This comment has been minimized.

Owner

bobbingwide commented Oct 24, 2018

Screen capture on iPad showing 3 visible barbershops poles. I’d pressed each of the icons which invoke the dialog twice; PayPal, button, shortcode. Scrolling down shows 6 in all, but I couldn’t capture them. I suspect some polyfilling is necessary.
f0b5775c-9bc2-4159-826e-aee465d40eb8

@bobbingwide

This comment has been minimized.

Owner

bobbingwide commented Oct 24, 2018

The Add media button does work. So there’s some hope.

@bobbingwide

This comment has been minimized.

Owner

bobbingwide commented Nov 16, 2018

With WordPress 5.0-beta5, Gutenberg 4.4, Classic Editor 0.5 the buttons no longer do anything on my new laptop running Edge. oik v3.2.5

@bobbingwide

This comment has been minimized.

Owner

bobbingwide commented Nov 18, 2018

In v4.0.0 the buttons do appear to work on some devices but not at all on others.
This applies to all three TinyMCE buttons.

On the iPad, the only evidence that something was attempted is a scrolling barbershop pole which appears if you scroll the page down and the admin bar appears to have dropped down a bit as well.

The barbershop pole is created by the thick box Javascript code. We should retest with Gutenberg 4.0.0 to attempt to rediscover a version that ‘worked’ on laptops. Then, perhaps, update this comment.
#100 (comment)

@bobbingwide

This comment has been minimized.

Owner

bobbingwide commented Nov 18, 2018

I ran parallel Javascript debugging tests of the working version on q.w/hm and the non-working version on s.b/wp498. On s.b, at the call to jQuery( '#TB_load' ).show(); the barbershop pole did not appear. This was because thickbox.js had not been enqueued. In q.w, thickbox was being enqueued by the Genesis framework.
Changing s.b to use Genesis or a Genesis child theme, resolved the non-display problem. Adding the following line of code to oik resolved the non-display problem for other themes.

add_action( 'admin_enqueue_scripts', 'add_thickbox' );

The buttons now work, but insertion where the cursor is located is still iffy.
Sometimes the shortcode is inserted in the right place, other times it's inserted at the beginning.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment