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.

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

WP 5.0 (Gutenberg) Support? Or recommended updated fork?? #452

Open
willstocks opened this issue Dec 10, 2018 · 36 comments
Open

WP 5.0 (Gutenberg) Support? Or recommended updated fork?? #452

willstocks opened this issue Dec 10, 2018 · 36 comments

Comments

@willstocks
Copy link

@willstocks willstocks commented Dec 10, 2018

Hi @aramk
I've been using Crayon for some time now, but with 5.0 being released it's not usable with the Gutenberg editor.
I love Crayon, but if it's no longer supported then I need to look for a drop-in replacement or a simple fix/update.
Alternatively, is there a supported fork of this that I can look to use instead?
It's sad to see such a great plug-in killed off!

@dingo-d

This comment has been minimized.

Copy link

@dingo-d dingo-d commented Dec 10, 2018

You'll need to add blocks that have the ability to highlight syntax. Like these two:

https://github.com/mkaz/code-syntax-block
https://github.com/cedaro/shiny-code

@willstocks

This comment has been minimized.

Copy link
Author

@willstocks willstocks commented Dec 10, 2018

@dingo-d

This comment has been minimized.

Copy link

@dingo-d dingo-d commented Dec 10, 2018

Yeah, I'll have to do the same for my site 😞

@willstocks

This comment has been minimized.

Copy link
Author

@willstocks willstocks commented Dec 11, 2018

Fingers crossed @aramk see's this issue/set of emails!! If not, I'm liking the look of https://wordpress.org/plugins/prismatic/ so far!

@willstocks

This comment has been minimized.

Copy link
Author

@willstocks willstocks commented Dec 11, 2018

@dingo-d Alternatively, I'm hoping that someone out there has forked the repo and has a Gutenberg compatible version!!

@urvanov-ru

This comment has been minimized.

Copy link

@urvanov-ru urvanov-ru commented Dec 15, 2018

I think, I can fork it...
My blog is 3 years old and extremelly using this plugin. @aramk do you really want to stop supporting it? Maybe you can make me a contributor? My profile in wordpress.org is https://profiles.wordpress.org/urvanov If you give me the rights I will make it alive again.
Otherwise, I will fork it...

@willstocks

This comment has been minimized.

Copy link
Author

@willstocks willstocks commented Dec 17, 2018

The thing is, Crayon "kind of" works on a super basic level. If configured right, it seems to be converting <code></code> blocks to Crayon's, however you can't assign titles etc. and formatting can end up a little.... funky.

https://wste.ch/PHPDOM as an example of a post I've just published where I used <code> blocks and Crayon appears to have handled them. But I can't declare the snippet title, language etc.

Ideally, Crayon would have up-to-date support as I'm sure there's various changes that could've been made in the last 2 or 3 years to optimize performance, compatibity, new WP Hooks/Functions and new languages etc?

Sad times! 😞

@FlorianWalther

This comment has been minimized.

Copy link

@FlorianWalther FlorianWalther commented Dec 27, 2018

Can't someone just adopt it? I would be willing to pay a one-time fee for this plugin and a lot of others would probably too

@urvanov-ru

This comment has been minimized.

Copy link

@urvanov-ru urvanov-ru commented Jan 23, 2019

I am trying to adopt it for Gutenberg. It looks like the plugin works. The problem is that we don't see the dialog button in Gutenberg paragraph block formatting toolbar. I am still investigating the problem but my knowledge is bad. So, it looks like I will have a lot of time learning Gutenberg, Format API and investigating Crayon Syntax Highlighter code. Maybe we can somehow collaborate to share the knowledge?

@aramk Maybe you will help us. I think it will be easier for you to adopt the plugin or to give us a tip how we can do it.

@willstocks

This comment has been minimized.

Copy link
Author

@willstocks willstocks commented Jan 23, 2019

@urvanov-ru - yes, it kind of works at a basic level. You can add a code block, however there's no way to title that block, or declare the language that is being used within that block, choose a style etc.

I tried to start looking, but my knowledge is far too limited and there's a lot going on in Crayon. It'd be ideal if @aramk could have a little input on the matter - even if it's just confirmation that the plugin is no longer supported so that someone can pick it up formally 😞

@mipon

This comment has been minimized.

Copy link

@mipon mipon commented Feb 5, 2019

If your code is no longer highlighted, try this plugin.

If your code is highlighted but you don't know how to apply options, try these steps:

  1. Make sure you have the option Capture the <pre> tags as Crayons enabled.

image

  1. In the Gutenberg editor screen, select the Code block and type your code.

image

  1. Click on the gear icon at the top right corner of the screen.
  2. Open the Advanced section.
  3. Add your options in the Additional CSS Class option. When you set the title option, you need to use the &nbsp; character for a white space.

image

image

@willstocks

This comment has been minimized.

Copy link
Author

@willstocks willstocks commented Feb 5, 2019

@mipon - you are my new favourite person!!! I couldn't get the title and lang values to work for the life of me!
Fortunately, I haven't needed the extra plugin (for REST API support) as it seems to just work for me in terms of code highlighting (per https://wste.ch/PHPDOM), but I was unable to control certain things.
I wonder how long Crayon will be usable without "formal" support 😞😢
What is mark:2 for in your screenshot?

@FlorianWalther

This comment has been minimized.

Copy link

@FlorianWalther FlorianWalther commented Feb 5, 2019

Are there still plans to adopt the plugin?

@mipon

This comment has been minimized.

Copy link

@mipon mipon commented Feb 6, 2019

@willstocks-tech

Fortunately, I haven't needed the extra plugin (for REST API support)

Can you test whether code syntax still gets highlighted after re-saving the Crayon option (Dashboard -> Settings ->Crayon -> Save Changes)?

What is mark:2 for in your screenshot?

The Tag Editor generates tags like these. Attributes names are separated from values by either : (default) or _. E.g. <pre class="lang:php theme:twilight mark:1,2-4" title="something">

from readme.md.

@FlorianWalther

Are there still plans to adopt the plugin?

Which Crayon features are missing with Gutenberg and which ones do you need?

@urvanov-ru

This comment has been minimized.

Copy link

@urvanov-ru urvanov-ru commented Feb 6, 2019

@mipon

Which Crayon features are missing with Gutenberg and which ones do you need?

I think we need button in the format toolbar with dialog box. I will try to add it but I need a lot of time:( And I have some problem with PHP code. The first "<" symbol somehow converts to lt; and shows like it. And I have problems with line ending. Multiline code shows in one line for me:)
I am trying to fix it and learning Gutenberg and WordPress Plugin API. I will have my own fork.

@mipon

This comment has been minimized.

Copy link

@mipon mipon commented Feb 6, 2019

@urvanov-ru

I think we need button in the format toolbar with dialog box.

I see. I've never used that <> button and even didn't care if it ever existed. In the dialog box, do you use the Settings section? To me, it gives an impression that is overkill for most users while those options can be configured in the Crayon global settings. To keep it minimal, the following option fields are enough.

  • Title
  • Language
  • Line Range
  • Marked Lines
  • Code
  • URL

What do you think?

The first "<" symbol somehow converts to lt; and shows like it.

Enable the option Decode HTML entities in code via Settings -> Crayon -> Code.

And I have problems with line ending. Multiline code shows in one line for me:)

Post a sample code snippet that shows the problem so that others can reproduce it.

@urvanov-ru

This comment has been minimized.

Copy link

@urvanov-ru urvanov-ru commented Feb 8, 2019

@mipon
Looks like it works now. Thank you for tips.

@RehanSaeed

This comment has been minimized.

Copy link
Contributor

@RehanSaeed RehanSaeed commented Feb 26, 2019

Would love for this to be updated to add support for Gutenberg (which has been out for a while now) or for some migration path.

@willstocks

This comment has been minimized.

Copy link
Author

@willstocks willstocks commented Feb 26, 2019

@urvanov-ru / @mipon / @FlorianWalther / @dingo-d

I am in the process of migrating over to Enlighter (https://github.com/EnlighterJS/Plugin.WordPress) which is really really nice. It's actively maintained, full of features and @AndiDittrich is INCREDIBLY helpful/quick to respond!

I was sticking with Crayon for as long as possible, however I migrated to PHP7.3 the other day and Crayon is completely incompatible (it actually stopped my entire site from working it was that bad!).

I believe there is some degree of Crayon compatibility (you need to uninstall Crayon first, for Enlighter to work) and I believe he is working on even more. The best thing to do, however, is to migrate all Crayon code blocks to Enlighter code blocks.

I'd highly recommend giving Enlighter a go, if you haven't already! 👍

@RehanSaeed

This comment has been minimized.

Copy link
Contributor

@RehanSaeed RehanSaeed commented Feb 26, 2019

It would be nice if Enlighter could port old Crayon based posts. I've got too many to port...

@willstocks

This comment has been minimized.

Copy link
Author

@willstocks willstocks commented Feb 26, 2019

@RehanSaeed - Might be worth taking a look at: EnlighterJS/Plugin.WordPress#136 - however I believe Andi is working on a "Compatibility Mode" that will basically auto-detect Crayon code blocks and will style them (in the correct language where possible - or just generic if it can't detect the right language).

I'm not familiar enough with PHP/MySQL to work out whether there's a way to automatically parse all existing posts and convert Crayon tags to Enlighter... the PHP script that Andi mentioned on EnlighterJS/Plugin.WordPress#136 is worth taking a look at though as it looks like it takes care of it via a fairly simple regex.

Might also be worth asking @AndiDittrich really nicely in his repo whether a "bulk converter" is something he's considering as part of his plugin/an add-on for the plugin (it might even already be part of his roadmap - I know he already has a beta version in the works which sounds impressive!). A bit like a "Search and Replace" for Crayon blocks? the function he has in the link above is a drop-in to functions.php job and does the trick at “auto converting on the fly”.

You can go super janky and actually change the selectors that Enlighter looks for to style. It looks for code blocks that it created, however that can be changed so it looks for simple <pre> and <code> blocks, however there are some caveats I found:

  1. It does this for ALL of those code blocks... INCLUDING inline code like this
  2. You have to load Enlighter assets on every single page, you can dynamically invoke assets only for posts where code blocks exist
  3. It's not really super supported because it adds a fairly significant layer of complexity
  4. You don't get to define the language for all of those pieces of code that weren't generated via Enlighter
  5. Crayon formats things:
<pre>
    <code>
        //super cool code here
    </code>
</pre>

However Enlighter doesn't and you end up with the <code></code> tags showing in your code block (on the front end, after styling!)

Note: I have nothing to do with Enlighter - I just really like it, and Andi has been a great help to me since I started using it 😁 👍

@AndiDittrich

This comment has been minimized.

Copy link

@AndiDittrich AndiDittrich commented Feb 26, 2019

i won't make any advertisement for Enlighter but the regex code mentioned in EnlighterJS/Plugin.WordPress#136 works fine and will convert legacy posts with crayon code on-the-fly to Enlighter codeblocks.

@urvanov-ru

This comment has been minimized.

Copy link

@urvanov-ru urvanov-ru commented Mar 10, 2019

I forked the plugin.
See branch "gutenberg-support". Currently pre-pre-pre-alpha-stage.

  • added Crayon block to Gutenberg blocks
  • added Crayon button to RichText Format Toolbar.

Problems:

  • When using Crayon button from RichText Format Toolbar don't forget to manually check inline checkbox. Otherwise it will not work.
  • It looks ugly in the editor, but in page it will be ok.

I'm testing it now. I will add to wordpress.org my forked plugin after two or more weeks of testing and fixing.

@mipon

This comment has been minimized.

Copy link

@mipon mipon commented Mar 11, 2019

@urvanov-ru Are you aware that block post contents of a plugin specific Gutenberg block becomes unavailable once the plugin is deactivated?

Say, a user finds a security issue, a bug that slows down the site, or incompatibility with future WordPress/PHP/MySQL versions with the plugin, he/she cannot simply deactivate it as the created blocks require the plugin to be activated. This means that it will be really difficult for a user to switch to another code syntax highlighter plugin after creating hundreds of code blocks with your plugin block.

Somebody in this topic pointed out that Crayon has an issue with PHP 7.3. This means you have to maintain any future incompatibility issues by yourself. Otherwise, your users have to stick to PHP 7.2 or below forever.

The best approach would be to use the Additional CSS Class option suggested above.

@FlorianWalther

This comment has been minimized.

Copy link

@FlorianWalther FlorianWalther commented Mar 11, 2019

Do these problems only affect Gutenberg? Because I am using Crayon in pages with the Classic Editor without any problems.

@willstocks

This comment has been minimized.

Copy link
Author

@willstocks willstocks commented Mar 11, 2019

@FlorianWalther - yes, this whole thread relates to Gutenberg compatibility (per the title of the issue) with a dash of PHP 7.3 incompatibility comments. If you don’t plan to ever upgrade PHP beyond 7.2 and are happy with Crayon functionality as-is, you should be all good 😊

@urvanov-ru’s Development looks hopeful in terms of an supported Crayon fork, although still needs a good amount of work (per @mipon’s comments).

@mipon’s suggestions may work with the block editor in its current state, but I’m not confident in the longevity of the workaround, and personally I prefer to use something supported/being developed rather than something that is now, clearly, abandonware and requires significant workaround in order to work. To what lengths will we have to go to “make Crayon work” in a year, on PHP 7.3+ and future iterations of Gutenberg?

I, on the other hand, have sadly given up hope for Crayon and forwards compatibility - I am really happy with Enlighter (as I mentioned above) which has great support!

@FlorianWalther

This comment has been minimized.

Copy link

@FlorianWalther FlorianWalther commented Mar 11, 2019

Of course I don't plan to never update beyond PHP 7.2 This is why I was asking if these problems affect the Classic Editor as well.

@willstocks

This comment has been minimized.

Copy link
Author

@willstocks willstocks commented Mar 11, 2019

@urvanov-ru

This comment has been minimized.

Copy link

@urvanov-ru urvanov-ru commented Mar 11, 2019

I know that there are a lot of work. But, at least, it will work for me...

@FlorianWalther

This comment has been minimized.

Copy link

@FlorianWalther FlorianWalther commented Mar 11, 2019

@willstocks-tech Thank you for the explanation. I guess I should just switch to Enlighter.

@willstocks

This comment has been minimized.

Copy link
Author

@willstocks willstocks commented Mar 11, 2019

@RehanSaeed

This comment has been minimized.

Copy link
Contributor

@RehanSaeed RehanSaeed commented Oct 12, 2019

What's the latest? Anything I'm missing.

  • The author of this plugin @aramk seems to have abandoned the project, although his last comments suggest he wants to maintain it (I work in open source, it's understandable, peoples lives change). It would be good if he could arrange for a handover to someone who is willing to maintain the project.
  • Enlighter hasn't released a 4.0 yet with Crayon support and I don't want to switch to something that will not convert all of my existing posts to Enlighter syntax instead of using a compatibility mode.
  • There seems to be a fork of Crayon but it's early, not sure if it has PHP 7 support and also not sure if the author is really committed to long term support. @urvanov-ru can you comment?
  • I've seen comments from people trying to take over this plugin but that doesn't seem to have led anywhere.
  • What other popular projects are there. Enlighter seems to be the largest in my quick search.

Still undecided where to jump to.

@willstocks

This comment has been minimized.

Copy link
Author

@willstocks willstocks commented Oct 12, 2019

@urvanov-ru

This comment has been minimized.

Copy link

@urvanov-ru urvanov-ru commented Oct 13, 2019

My fork of Crayon is under development. Gutenberg support branch fixes bugs and adds new block for Gutenberg.

Branch rebranding-refactoring-best-practices is under development. Crayon don't follow WordPress standards as it proved. In this branch I am trying to fix it. I sent it two times but they returned it with errors. So, it is still in progress. But my site uses Crayon a lot, so I hope I will finish this work.

@urvanov-ru

This comment has been minimized.

Copy link

@urvanov-ru urvanov-ru commented Oct 15, 2019

Don't worry guys. I will finish my fork and I will publish it to wordpress.org. I promise. You can use branch gutenberg-support even now.

@dingo-d

This comment has been minimized.

Copy link

@dingo-d dingo-d commented Oct 15, 2019

I've switched to this one: https://github.com/westonruter/syntax-highlighting-code-block works perfectly

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
7 participants
You can’t perform that action at this time.