NOTE: If you are using the ryuboxlink and ryubox shortcodes and the old format Ryuzine “lightbox” add-on there is a separate post about using the shortcodes in Gutenberg.

The Gutenberg “block” editor is one of the biggest changes in the newer versions of WordPress.  If you’ve only ever used the TinyMCE “WYSIWYG” editor it can be a bit confusing.  Here is how to use the newer lightbox format in Ryuzine Press running the “ryulightbox” add-on.

In a Classic Block

Go to the (+) to add a new block and select “Classic.”  If it’s not in your “Most Used” yet it will be in the “Formatting” sub-section.  Once you have the Classic Block it’s just like using the old TinyMCE editor:

If you click on the image you’ll get the old Image Edit toolbar above it.  Select the “Pencil” icon and it will open the old Image Options dialog box.  If you need to you can adjust the size of the image from thumbnail, medium, large, full-size, or custom-size from there.  But to make it work with the “ryulightbox” add-on you need to click on the “Advanced” to expand the section (if it’s not already expanded):

Rather importantly the thumbnail has to LINK to something!  When the “ryulightbox” add-on isn’t loaded (as it won’t be when viewing the post elsewhere on your WordPress blog) the thumbnail will just be a regular link, that either opens the target content in a new tab (if you checked the “Open link in a new tab” box) or in the same window.

Then, in the “Advanced” section you need the Link Rel to be “lightbox” and (optionally) the Link CSS Class to be one of the ryulightbox types.

It can also be an anchor link to something embedded in the Ryuzine Press Edition, but then the link will be broken if the post is read elsewhere on your WordPress blog.  If you prefer to embed the target content in the Ryuzine Press Edition you should consider using the ryuboxlink and ryubox shortcodes instead, because the links and the content can be conditionally hidden elsewhere on your blog where they don’t work.

In an Image Block

Click the (+) and select “Image” block.  That will give you an empty one where you choose the Image Source:

Once you’ve place your image you need to look in Gutenberg’s right sidebar area, under the “Block” tab scroll down to the “Link Settings” sub-section:

For the Lighbox to work the image MUST link to something!  Typically the “Media File” (aka, the larger version of the image) will be the target.  The Link Rel to be “lightbox” and (optionally) the Link CSS Class to be one of the ryulightbox types. When the “ryulightbox” add-on isn’t loaded (as it won’t be when viewing the post elsewhere on your WordPress blog) the thumbnail will just be a regular link, that either opens the target content in a new tab (if you turned on the “Open link in a new tab” switch) or in the same window.

The valid content types are:

lb_3d, lb_document, lb_info, lb_larger, lb_magnify, lb_minus, lb_movie, lb_photo, lb_plus, lb_video, lb_website, or lightboxbutton.  If you leave it blank the generic “lightboxbutton” will be inserted by the “ryulightbox” add-on.  This only changes the style of the lightbox link icon in the lower corner of the thumbnail, it doesn’t set the type of content, which can be anything.

Note: This post is only relevant if you are using the Ryuzine “lightbox” (old format) add-on.  If you are using the newer “ryulightbox” add-on details for that are in another post.

One of the biggest recent changes in WordPress has been the change from the TinyMCE “WYSIWYG” editor to the Gutenberg “Block” editor.

If you have existing Ryuzine Press Editions and associated posts there’s nothing you should need to do.  Gutenberg automatically ports the content of old posts (the ones written with the TinyMCE editor) into a single “Classic” block.  That should preserve any shortcodes you used in those posts.  And your done!

For new posts you have three options for using the Ryuzine shortcodes (focusing on the “lightbox” shortcodes, ryuboxlink and ryubox which are the most likely ones you’d be using):

1. Create a “Classic” block and type them inline just like you always have.
2. Create a “Paragraph” block and type them inline just like you always have.
3. Create a “Shortcode” block (for Ryuzine’s shortcodes you’d need one before and after the content block).

IMPORTANT: The thumbnail image or text inside a “ryubox” or “ryuboxlink” cannot have a link applied to it!  It gets the link URL from the shortcode.  If you also make the image/text into a regular link when it is converted to a lightbox link it will try to next a link inside a link.

Classic Block

Click on the (+) to select a new block.  If it’s not in your “Most Used” it will be under the “Formatting” sub-section.  This should be a no-brainer as it works just like the old editor, except smaller:

If you click on the image you get the old editing toolbar.  Select the “Pencil” icon:

..and you get the old image options screen where you can select thumbnail, medium, large, full-size, or custom size options.

Paragraph Block

The Paragraph block is most likely already in your “Most Used” blocks.  It’s also the default block Gutenberg creates.  You have the option to place inline images in Paragraph Blocks:

Currently Gutenberg automatically forces the inline images to 150 pixels wide with automatic height.  There are no options to select a thumbnail, medium, large, full-size.  Maybe the 150 pixel wide inline image is what you want, but if it isn’t use one of the other methods outlined here.

Shortcode Blocks

Click the (+) to add a new block and select “Shortcode.”  Initially you’ll probably have to find it under the “Widgets” sub-section.  That will add a shortcode block in which you enter the opening part for the Ryuzine shortcode.  Then you have to create another block for the content inside that shortcode, in this case an Image Block, and then another Shortcode Block to close:

To change the image size you can either manually resize it by clicking on it and dragging the handles around or you can select “Block > Image Settings” in the sidebar:

DEPRECATION NOTICE

The old format “lightbox” add-on and the shortcodes are going to be phased out!  Ryuzine 1.1 will still support using them but after that the the “lightbox” add-on will no longer be updated and the shortcodes information will be removed from Ryuzine Press (the shortcodes will still be processed, but the information page on how to use them will be removed and publishers should stop using them now).  Ryuzine now has code to automatically convert old format embedded content to display in a generic Ryuzine dialog box if no lightbox add-on is loaded.  The better solution, though, is to switch to the “ryulightbox” add-on, which is backwards-compatible and automatically converts old format lighbox links and embedded content to the new format.

When Ryuzine Writer 1.0 was released the “Maximize/Minimize Editor” button was removed from the toolbar.  This was like the “Fullscreen” or “Distraction Free” modes in various word processors.  It was removed because there were some reflow errors when you’d pop out of that mode that require you to resize the browser window or hide/unhide the sidebars.  Rather than requires people to do this (and know this) the problematic button was removed.

We didn’t actually remove it from the program entirely, just disabled it.  So if you liked it and want it back it’s fairly easy to re-enable it.  It’s actually a Xinha module and you can re-enable it by finding the file in:

ryuzine –> ryuzinewriter –> js –> editor.config.js

Change line 280 to:

[“htmlmode”],[“undo”,”redo”],[“popupeditor”],

That “popupeditor” will add back the  Fullscreen button.  It will be available in both WYSIWYG and HTML Editor modes.  To return from Fullscreen mode press the  Restore button.  However, the Editor workspace may be squished into a narrow band across the center of the window.  If that happens  Toggle Sidebars off/on or resize the browser window.

Note that the Sidebars no longer automatically toggle off/on when you (respectively) enter/exit Fullscreen mode as they did in earlier versions of Ryuzine Writer.