Skip to content

Conversation

@westonruter
Copy link
Owner

Fixes #72.

Before

image

After

image

Without Gutenberg

image

Co-Authored-By: Vladimir Jimenez <[email protected]>
Copy link

@beaucollins beaucollins left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixes the problem I'm seeing. This is with gutenberg 7.9.1

image

I also downgraded to gutenberg 7.8.1 and this build works.

@mkaz
Copy link

mkaz commented Apr 21, 2020

I've confirmed it works for my code block, too. 👍

I ended up using the hasBlockSupport function from blocks package for the check, something like so, but don't think it makes much difference.

import { hasBlockSupport } from '@wordpress/blocks';

	const useLightBlockWrapper = hasBlockSupport(
		'core/code',
		'lightBlockWrapper',
		false
	);

@allejo
Copy link
Contributor

allejo commented Apr 21, 2020

Hey @mkaz or @beaucollins,

I don't know if I'm going crazy here, but could see if you can replicate the follow behavior in a code block? I'm running Chrome + Gutenberg 7.9.1 and this plugin is disabled and this is the behavior I get:

Imgur

Uploaded Gif to imgur since github was yelling at me...

To replicate:

  1. Put cursor on a line with text preceded by a blank line
  2. Enter following keystrokes:
    1. Left Arrow
    2. Down Arrow
  3. Result: it skips you down a few lines

…ode-block into fix/gutenberg-compat-light-block-wrapper

* 'master' of github.com:westonruter/syntax-highlighting-code-block: (31 commits)
  Consistently have inclusive selected line syntax
  Fix new lines being selectable in code blocks
  Fix weird gap in line highlight CSS
  Fix stylesheet file reference
  Include inline style consistently
  [Security] Bump acorn from 5.7.3 to 5.7.4
  Render explicit new lines when line features  are used
  Remove redundant variables
  Improve storage of transient and usage of attributes
  Ensure highlight styles are added when line numbers are not shown
  Don't recreate `parseSelectedLines` on each edit
  Bump @wordpress/components from 8.0.0 to 9.4.1
  Bump @wordpress/i18n from 3.5.0 to 3.11.0
  Create a new component for highlighting lines
  Bump eslint from 5.10.0 to 6.8.0
  Partial fix for improving selected line placement
  Ensure the selected_line_bg_color changes in Customizer preview based on selected theme_name
  Defer registering stylesheet until customizer has initialized
  Improve formatting of uninstall.php
  Add uninstall process to remove options
  ...
…:westonruter/syntax-highlighting-code-block into fix/gutenberg-compat-light-block-wrapper

* 'fix/gutenberg-compat-light-block-wrapper' of github.com:westonruter/syntax-highlighting-code-block:
  Remove spurious character
@westonruter
Copy link
Owner Author

@allejo I've merged #20 into this branch and tried to resolve conflicts, but I'm getting an error now when Gutenberg is active:

image

We need to adjust the usage of plainTextRef.

@allejo
Copy link
Contributor

allejo commented Apr 22, 2020

Yea I'm getting the same error, let me take a look

@allejo
Copy link
Contributor

allejo commented Apr 22, 2020

Alright @westonruter, 6aa9eb2 should fix things in a BC way for Gutenberg 7.9.

…ode-block into fix/gutenberg-compat-light-block-wrapper

* 'master' of github.com:westonruter/syntax-highlighting-code-block:
  Apply prettier fixes
  Fix npmpackagejsonlint config
  Bump @wordpress/scripts from 3.3.0 to 8.0.1
  DisallowLongArraySyntax and exclude DisallowShortArraySyntax
  Bump @wordpress/editor from 9.4.0 to 9.14.1
  Bump @wordpress/hooks from 2.4.0 to 2.8.0
  Bump phpcompatibility/php-compatibility from 9.2.0 to 9.3.5
  Bump xwp/wp-dev-lib from 1.2.2 to 1.5.0
  Bump wp-coding-standards/wpcs from 2.1.1 to 2.2.1
  Bump dealerdirect/phpcodesniffer-composer-installer from 0.5.0 to 0.6.2
  Bump @wordpress/element from 2.5.0 to 2.13.1
  [Security] Bump eslint-utils from 1.3.1 to 1.4.3
  [Security] Bump https-proxy-agent from 2.2.2 to 2.2.4
src/index.js Outdated
Comment on lines 146 to 172
placeholder: __( 'Write code…', 'syntax-highlighting-code-block' ),
'aria-label': __( 'Code', 'syntax-highlighting-code-block' ),
placeholder: __( 'Write code…' ),
'aria-label': __( 'Code' ),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't know the WP API very well, but are these changes intended?

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good question. I think actually yes because then they'll re-use the core translation strings rather than having to translate new duplicate ones.

@westonruter
Copy link
Owner Author

@allejo One more thing… In the console I'm getting a warning when Gutenberg is deactivated:

Warning: React does not recognize the highlightedLines prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase highlightedlines instead. If you accidentally passed it from a parent component, remove it from the DOM element.

@westonruter westonruter requested a review from allejo April 22, 2020 03:49
@allejo
Copy link
Contributor

allejo commented Apr 22, 2020

Destructuring the incoming props should resolve that warning, f5eca87. I couldn't think of a different name other than props_ though, so you're welcome to change that.

@westonruter
Copy link
Owner Author

That works well!

@westonruter westonruter merged commit 0290644 into master Apr 22, 2020
@westonruter westonruter deleted the fix/gutenberg-compat-light-block-wrapper branch April 22, 2020 03:51
@mkaz
Copy link

mkaz commented Apr 22, 2020

@allejo I do not see the same behavior using Gutenberg 7.9.1 and code block, it all seems to work as expected for me Firefox + Chrome.

@allejo
Copy link
Contributor

allejo commented Apr 22, 2020

Thanks for checking @mkaz, I'll take a look to see if I can figure out what's going on on my end!

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Code blocks broken in Gutenberg 7.9.x

5 participants