Blocks

Testimonial Block

by Creator

The Testimonial Block puts an image object beside a content object with Title, Subtitle and Testimonial object using a nested content area and styleable quotation mark icons.

Settings Overview

  • Media Settings
    • Image : Choose an image from your Media Library. [tutorial] An image equal in width and height is usually optimal, though you can resize the object to suit your image.
    • Image Alignment : Choose where to display the image in respect to the Content Wrapper.
      • This setting is ignored in mobile mode unless you turn on the Side-by-Side in Mobile setting found below, along with other options for how to display the object in mobile.
    • Vertical Alignment : Vertical alignment of the content wrapper and object when displayed side-by-side.
      • When the object is taller than the content wrapper, the content will be aligned to the top, center or bottom of the object.
      • When the object is shorter than the content wrapper, the object will be aligned to the top, center or bottom of the content.
      • This setting uses CSS Flexbox tech to responsively retain this alignment across browser, object and content sizes.
    • Image Max-Width by % : The maximum width of the image as a percentage of the available area, set to 0 to use pixels.
      • Using percentage % rather than pixels allows for responsive display across browser sizes. Images will only fill the available width up to their actual width to prevent pixelation.
      • Set both Max-Width settings and Max-Height to 0 to display the image in it’s full original size.
    • Image Max-Width by Pixels : Maximum width in pixels for the image, set to 0 to preserve the original aspect ratio with respect to the Max-Height setting.
    • Image Max-Height by Pixels : Maximum height in pixels for the image with vertical cropping to suit the available space, set to 0 to preserve the original aspect ratio with respect to the Max-Width setting.
    • Object Separation : Distance in pixels between the main object and the Content Wrapper.
    • Center Object in Mobile : By default the object will be centered in mobile mode. Turning this setting off allows it to be aligned left or right instead. Object alignment can be affected by text and object alignment rules inherited from parents.
    • Side-by-Side in Mobile : Ignore the other mobile options and force the object and content wrapper to stay side-by-side in mobile mode. Be sure to use a width that is small enough to allow the contents of your content wrapper to be readable. This may still have odd looking results on the smallest of devices.
    • Border : Border color, style and corner rounding options to frame the image object. [tutorial]
    • Box Shadow : Shadow color and options applied to the iamge object can create a hover or ineset effect. [tutorial]
  • Testimonial : What makes it a testimonial block is the large quotation marks surrounding the testimonial text (or quotation) with author/source info around it.
    • Testimonial Position : By default the image is displayed inline with the content wrapper. You may display it above or below the content instead.
    • Quotation Marks
      • Hide Mark(s) : Remove the left and/or right side quotation mark individually to create a unique look.
      • Mark Separation Margin : Distance in pixels between the quotation mark icon and the testimonial text. Choosing “Default” uses a margin of 15px.
      • Break In-line Marks : Put the quotation marks on their own lines above and below the testimonial text. The marks are displayed in-line by default, to the left and right ides of the text.
      • Size : Vertical height (font size) of the quotation marks in pixels. The quotation marks are created using FontAwesome glyphs, they behave and style as a font character using font color and size.
      • Color : You may specify a custom color for the quotation marks, they inherit font color by default. [tutorial]
    • Text – Font : Styling option for the testimnonial text to override any inherited from the block and parent nodes. [tutorial]
  • Styled Nodes : Object nodes within the block DOM with styling settings. [tutorial]
    • root object : Block Settings panel
      • media object : Media Settings panel
      • content wrapper : not styled
        • title : Title panel
        • subtitle : Subtitle panel
        • testimonial : Testimonial panel

Object Map (DOM)

  • root object (div) targeted node from Block Settings panel : You may assign style settings that apply to this entire block.
    • internal wrapper (div) untargeted node : Used to support advanced layout options. Most of our blocks have one of these wrappers. It has no styling of it’s own, it’s children are considered the block’s children.
      • media object (div) targeted node from Media Settings panel : This is a wrapper node to which we apply styles and media object specific rules. In this block the image is displayed as a background image for this object node, this allows it to be responsive by cropping the image to fit the display area as well as using an inset shadow.
      • content wrapper (div) untargeted node : This node contains the block title, subtitle and content area so it can be set side-by-side with the media object. Styles applied to this node will be inherited by all children, including nested children and will override the same style applied to the block at root level.
        • title (div) targeted node from Title panel : Single text field, text is edited in the block not in the panel. Styles targeting this node only apply to the title, and will override the same style applied to the block and/or content wrapper.
        • subtitle (div) targeted node from Subtitle panel : same as title
        • testimonial wrapper (div) untargeted node : This node conatins the quotation marks and testimonial text objects.
          • left quotation mark (div) untargeted node : Fontawesome icon gets it’s styling from specific settings in the Testimonial panel.
          • text area wrapper (div) untargeted node : Used to position the testimonial content between the marks.
            • wp nested wrapper (div) untargeted node : This node is generated by Gutenberg around nested content, we sometimes use it when layout rules need to be applied. Follow suit with the internal wrapper.
              • nested blocks (?) untargeted nodes : Only paragraph blocks are allowed in the testimonial.
          • right quotation mark (div) untargeted node : Fontawesome icon gets it’s styling from specific settings in the Testimonial panel.

We will give an example of a CTA box with a button that opens a PopUp.

This example (incuding image) is available from our API as a Block-Set download, we will show you how to recreate it yourself.

Example

In this example we will add some colors, borders and shadows to take advantage of some CSS tricks and make a very simple yet interesting looking block.

Who are you?
AMP Publisher Testimonial block

This block has quotation marks (icons) than can be sized and colored, an image location that can be rounded from sqaure to circle, and a full set of styling settings for each node. This block can only be nested with the Core Paragraph blocks to create the testimonial text that falls between the quotation marks.

  • Insert a Testimonial block into your page/post.
  • Choosing a subject photo is optional, this example uses a stock receptionist photo.
    • You may choose an image from the block toolbar or from the bock inspector (sidebar).
    • To choose an image from the toolbar, click the Choose / Upload Image button (photo icon) in the Image section, the Media Library interface will open allowing you to choose an image from your library, or upload one to it.
    • To choose an image from the inspector, open the Media Settings panel and click the Choose / Upload Image button, or if an image was already assigned click the image to replace.
  • Now we’ll add a shadow to give the photo an inset effect.
    • Choose a Box Shadow Color. This example uses a medium blue as it is linked to our site’s Medium Base Color in the Accelerate Color Palette. Black is always a solid choice for shadow color. Once a color is set the other shadow options will appear.
    • Now turn on the Inset Shadow setting to give it that recessed look as opposed to the standard hover effect. This example does not use it, but you may wish to also turn on the Double Shadow setting to increase the shadow impact.
  • By default the image uses a border radius of 20% to create rounded corners. You may adjust this to anything between 0 (perfect square) to 50% (circle). Change the Border Radius by % setting by using the slidebar or entering a value in the number field.
  • You can enter any text you wish into the content.
    • In the block editor, click in the Title field and enter some text. The click in the Subtitle field and enter some more text.
    • Below these fields is the nested content area. By default the text you type here becomes a WP core paragraph block just like in the base editor. When you press Enter it will create a new line as a new paragraph block. You may insert any blocks you like into this nested area (like the base), and they will be treated as a child objects of this Nested Content object.
  • Finally let’s style the block to give it a distinct look using a couple of simple CSS tricks. Open the Block Settings panel.
    • Choose a Background Color. This example uses a light blue background and dark blue text because the block colors are linked to our color palette. Choose any color you wish, but be sure your text is readable against it. The content text uses your site’s text color by default, you can change it in the Content Wrapper panel, or directly in each content node (Title, Subtitle & Nested Content).
    • Choose a Border Color, this example uses a medium blue (linked). Once you have chosen a color the other border sttings will appear.
      • Select “Double” from the Border Style selector. The double border style requires a minimum border width of 3px to create the double border.
      • Set the Border Width 4 pixels. This will create a border with two 1px lines separated by a 2px space.
      • Under the Border Sides setting, turn off the Right and Left borders.
      • Finally set the Rounded Corners to use 20 pixels of rounding.
      • This is one of those simple CSS tricks. When you round the corners of an object the border rounds with it. Then if you remove one or two sides you can create rounded points that terminate into their adjacent side.The double border style creates a distinct look when rounded and limited to one or two sides. This example uses top and bottom, but you can play with any combination of sides to create something new.
    • Choose a Box Shadow Color, this example uses the same linked medium blue as the border.
      • Once the other settings appear, turn on the Inset Shadow setting. This example uses the default offset and blur settings, but you may wish to play with them a bit to adjust the “lighting” effect.
  • This example also has it’s block top and bottom margins set to 20px to create some separation. You have many choices for how to put space between blocks and text, adding margins is an easy way to do it without spacing blocks. Open the Block Settings panel.
    • Select “20px” from the Top Margin selector, then do the same for the Bottom Margin field.