Welcome to these Sample Pages which are created using Drupal Gutenberg as the 'text' editor.
You will notice that some images are shown several times. These have only been uploaded once! That is because Drupal now offers the Media Manager through which we can upload (or link to) media items (images, videos, audio and documents) AND search the library and re-use any media item.
The above block is a single paragraph with text and background colour applied and a 'new line' inserted (twice in the same place) using shift/enter.
This block: a paragraph, centred with background colour 'Hint of Salmon', and CSS class 'border'.
Gutenberg Cover Block
Above: a 'Cover Block' with fixed background, cover height 130px, overlay colour 'Mid Grey' and opacity 20%. The image is 'DSCF9522.JPG' - original (full size) which is too big! The Cover Block does not allow you to select a Drupal image style.
Gutenberg is a modern, extremely powerful, and flexible web page editor.
The authors of Drupal Gutenberg have tried to make this tool as user-friendly and useful for content creators as possible. All the website's elements that Gutenberg supports are supported through 'Gutenberg blocks'.
The module itself provides the most useful blocks. Other are provided through additional Drupal modules. Gutenberg is well-integrated with Drupal so you can use any of Drupal's own blocks ('Drupal Blocks'). For example the "Upcoming Events" panel on the Front Page is a Drupal block created by a Drupal View which display a list of future events.
Above: three paragraph blocks, with some inline text colour applied.
"Initially, Gutenberg was written as a plugin for WordPress, to which it owes its popularity. As of writing this, over 300 thousand websites are using this plugin.
Gutenberg has been available in Drupal since May 2019 so it is a relatively new solution. Currently 3,762 sites report using it. However, integration with Drupal gives much more room for manoeuvre, both to content editors and developers. Such an amazing tool, combined with the unlimited possibilities of Drupal, is truly something wonderful."
( from droptica.com )
Above: a columns block with a three column (25/50/25) layout with all columns set to Align Middle'. Left Column: Image P1080154.JPG (Media Library name 'Robin close by' , style 'Wide (1090)'', aligned 'centre'; Centre Column: three paragraphs; Right Column: Image 'Robin close by', style 'Medium (220x220)', aligned 'centre'. Hint: right click on each image and select 'Open image in new tab' (or similar) to see the difference.
Painted Lady
Spotted in RHS
Bridgewater, in it's first
year of opening!
Peacock
Spotted in
Clumber Park
near Worksop
Gatekeeper
Spotted in
Holmebrook Valley
Park, Chesterfield
Above: a Columns block set up to replicate the USDWS card in columns example. In each column has been placed a standard image, heading (H3), description (paragraph) and buttons containing one button!
The Peacock butterfly image has been cropped within Gutenberg. This is really easy to do, but Gutenberg just creates a new file and not a media item. This means the cropped images can not immediately be re-used using Media Manager, and is not easily deleted.
However, we do have Drupal's File To Media module installed and available here (look in the column on the right) but the file does not immediately appear in this view.