Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Fix compatibility with lightBlockWrapper for Code block in Gutenberg 7.9 #73

Merged
merged 10 commits into from
Apr 22, 2020
Merged

Fix compatibility with lightBlockWrapper for Code block in Gutenberg 7.9 #73

merged 10 commits into from
Apr 22, 2020

Conversation

westonruter
Copy link
Owner

Fixes #72.

Before

image

After

image

Without Gutenberg

image

@westonruter westonruter mentioned this pull request Apr 21, 2020
Closed
allejo
allejo reviewed Apr 21, 2020
View reviewed changes
src/index.js Outdated Show resolved Hide resolved
allejo
allejo reviewed Apr 21, 2020
View reviewed changes
src/index.js Outdated Show resolved Hide resolved
@westonruter @allejo
Remove spurious character
be012d7 
Co-Authored-By: Vladimir Jimenez <allejo@me.com>
beaucollins
beaucollins approved these changes Apr 21, 2020
View reviewed changes
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
Collaborator

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

@westonruter
Merge branch 'master' of github.com:westonruter/syntax-highlighting-c…
019ea73 
…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
Merge branch 'fix/gutenberg-compat-light-block-wrapper' of github.com…
9912545 
…: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
Collaborator

allejo commented Apr 22, 2020

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

@allejo
Copy link
Collaborator

allejo commented Apr 22, 2020

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

@westonruter
Apply prettier changes to src/index.js
3fe6fe6
@westonruter
Merge branch 'master' of github.com:westonruter/syntax-highlighting-c…
13493c2 
…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
allejo
allejo reviewed Apr 22, 2020
View reviewed changes
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
Collaborator

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
Collaborator

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
Collaborator

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
Reviewers

@beaucollins beaucollins beaucollins approved these changes

@allejo allejo Awaiting requested review from allejo

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Code blocks broken in Gutenberg 7.9.x
4 participants
@westonruter @mkaz @allejo @beaucollins