Guide 5

Guide 5 is here with support for its number-one requested feature: putting guides in Craft CMS slideouts! This release also brings a lot of quality-of-life features that have been suggested by the Craft CMS community. It has been re-structured to make it easier to manage guides and then distribute them around the Craft CMS CP (Control Panel).

Now when you are on an element edit page—for entries, assets, globals, categories, and users—you’ll see a new Guide button next to the Live Preview button. When clicked, this button will open up a slideout with all of the guides relevant for that element. This could contain how-tos, important authoring workflow steps, stats, a changelog, and other content-aware information—whatever you can think of writing in your guides. When you are done you can close the slideout panel and get right back to editing the element on the page.

Guide also comes with a new guide-button Twig component so you can put your own slideout button in any of your guides.

In previous versions of Guide you could wrap text in a markdown Twig filter to render a few lines of text in Markdown at a time. In Guide 5 there is an option on every guide that lets you render the whole guide in Markdown. This can be great for pages of documentation and for content written by authors who prefer not to mess with HTML markup and Twig tags.

If you did want to drop in some HTML, Markdown leaves HTML tags as-is when rendering. Twig tags are also welcomed and they’ll be rendered on the page before Markdown processes the content—letting you do things like use {% for %} loops to fill out Markdown lists.

The Guide home page is now called CMS Guide—for those who want all of their guides to appear in one place.

The new Guides page lets you manage the guides in your Craft CMS project. From here you can edit and delete guides, as well as preview guides to see what they'll look like in a slideout. Clicking on a guide title takes you into a standalone page in the CP with your guide content on it.

The re-designed Guide Organizer lets you enabled guides for Widgets, UI Elements, and lets you distribute guides on element edit pages or a specific URI (you could create a guide with some documentation around how you had set up your favorite SEO plugin and put it right on the plugin’s settings page).

Guide’s Twig components have all been modernized with a few additions and quality-of-life improvements:

• Images can now be zoomed in by clicking on the image and showing the full-size image in a lightbox.
• A new Details component lets you simplify your guides by hiding detailed instructions and documentation until your reader needs to see them.
• The Table component is now a Twig component that lets you programmatically fill in table cells. Combining it with Twig’s {% set %} block lets you fill in tables with HTML so you can add image previews, links, and styles to your data.

New fields can appear—based on your settings—in the Guide Editor that let you add custom CSS and JavaScript to your guides.

With all of the powerful tools CSS has to offer you can use things like :has() and Container Queries to make your guides fit—wherever they are added. Guide makes use of the CSS Custom Properties built into the Craft CMS and provides several CSS Custom Properties of its own—allowing you more customization in your guides.

The JavaScript field adds a callback onto the page that is fired whenever the guide is displayed. Using the Craft Code Editor field by nystudio107, you can author JavaScript in a code editor that has JavaScript-specific code highlighting, autocomplete, and multi-cursor editing.

This release makes Guide a better plugin citizen. All static text can be translated into other languages, the source code has more-detailed documentation, and many issues and features requests have been incorporated.

Guide 5 is now available and can be installed via composer or from the Craft CMS Plugin Store. The features above are available in the paid PRO edition, and a LITE edition is available for folks who just need a simple CMS Guide.