This is not a block built for this theme, but shows how the theme styles some of the core WordPress blocks that can be produced in the CMS.
For a list of core WordPress blocks visit the following URL https://wordpress.org/support/article/blocks/ some of which have been added below.
The below is in a grey section, set with padding small.
H2
H3
H4
- List with link
- List
- list 1 with link
- list 2
Left aligned, plain, bold, underline, strike through, link
Center aligned, Plain, bold, underline, strike through, link
Right aligned, plain, bold, underline, strike through, link
Hey
Blockquote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt risus eu est consectetur, et tempus arcu eleifend. Nam ut diam rhoncus, ornare elit nec, finibus mauris. Aliquam hendrerit dolor ac tortor tempus ornare. Cras lacinia interdum dui in sodales. Pellentesque porta, purus ac aliquam ornare, velit magna viverra ipsum, sed laoreet dolor nisi eget justo. Aliquam tempor elit nec blandit auctor. Phasellus ultricies, lectus at porttitor tristique, augue augue aliquet tellus, in ultrices diam eros ac urna. Integer auctor a diam in fermentum. Vestibulum consequat tempor est, ut pellentesque purus congue at. Nam congue dolor a elit sollicitudin, at rutrum est dictum. Phasellus id nisi hendrerit, tristique libero eu, elementum leo. In metus lacus, bibendum vitae facilisis sed, sollicitudin sed purus. Quisque facilisis lacinia ex a suscipit. Nullam blandit est nisl, in pharetra orci pulvinar id. Nam a sollicitudin sem. Proin a odio in sapien tempus tempor ac non lacus.
Vivamus eleifend maximus metus vitae egestas. Mauris id euismod mauris. Ut gravida sit amet augue ac fermentum. Cras viverra justo in sem luctus posuere. In id ipsum vitae libero accumsan posuere. Vivamus sit amet dui eget mi dictum sagittis et ut dolor. Praesent diam ex, fermentum in aliquet nec, gravida sit amet odio. Praesent congue enim ac mi sodales congue. Sed convallis neque eget iaculis posuere. Aenean ut imperdiet nunc, a gravida eros. Vivamus fringilla leo quis justo tincidunt ullamcorper id id sem.
Maecenas at pretium felis. Ut vitae nunc et odio vulputate pharetra eget eu lacus. Sed nec lacus id erat ultricies porttitor eu ac velit. Nunc velit sapien, fringilla vel sollicitudin vitae, molestie quis odio. Cras quis commodo diam. Curabitur at orci iaculis, varius lacus ac, vestibulum nisi. Maecenas fringilla eleifend mauris, sed vulputate leo pellentesque id.
Duis ac nisi eu velit mattis aliquet eu malesuada justo. Praesent congue felis sit amet leo scelerisque tempor. Maecenas convallis sem et congue scelerisque. Aliquam sed augue tempor, luctus est sit amet, venenatis ex. Quisque ultricies vulputate fringilla. Aenean leo massa, accumsan sit amet libero vitae, tristique aliquam justo. Donec elementum sapien eu nulla vulputate dictum eget at orci. Aenean rutrum odio massa, quis hendrerit elit pellentesque at. Nam at ullamcorper lorem, non bibendum ipsum. Morbi at efficitur quam, quis pellentesque odio. Pellentesque vel egestas dui. Curabitur a libero eget erat imperdiet vestibulum. Donec sed arcu at augue ultricies convallis ut ac turpis. Phasellus vitae eros nec diam convallis dignissim a eu metus. In vulputate elit sed finibus varius.
The below is a white section, padding normal.
Table below pasted in as HTML.
| Title Column2 | Title Column2 |
|---|---|
| Row1 Column 1 | Row1 Column 2 |
| Row2 Column 1 | Row2 Column 2 |
| 1 L | 2 R |
| 3 L | 4 R |
Responsive tables are a tricky business, especially when it comes to accessibility.However, I think I’ve found a better solution than we initially had.
I’ve added a new style to the table gutenblock, called ‘responsive table’.This isn’t default, because it wouldn’t play nice with tables that don’t have headers, such as on the contacts page.However, for a table similar to the example attached, it should work well even on mobile.The first screenshot shows the desktop view, and the second the mobile view.The rows convert into columns and, when there are too many rows to fit within the screen, they scroll across instead, whilst the table headers remain in place.My screenshot shows the table partially scrolled.
As mentioned, this will only work for tables with a <thead>, which the gutenblock doesn’t support creating yet.However, if you convert a table from HTML to the table block, it will import a thead correctly. They can also be manually added via the code view for the block.
In addition, because screen readers would ordinarily not be able to read a table whose layout has been modified, I’ve added a11y labelling to tables, so that the semantics are maintained.