Resources

Block Settings

by Creator 21

Block Layout

Block Layout is an expanded version of the WordPress “alignment” control. WordPress encourages the support of the “wide” and “full” alignments among themes. Full alignment pushes the edges of the block to the edges of the browsers, “wide” pushes them half-way between the content margin (edge) and the browser edge. The Accelerate theme supports these alignments as well as adding one called “Full Content Aligned” that allows the block to go full-width while keeping the block’s content aligned with the page content.

  • Block Layout : WordPress calls them “alignments”, we call them “Layouts”.
    • When no layout is chosen the edges of the block edges are aligned with the edges of the page content.
    • Wide : Push the block edges to 50% of the distance between the content edge and the viewport edge.
    • Full : Push the block edges to the viewport edges.
    • Full Content Aligned : This is the same as Full, while the block content left and right edges are aligned with the page content. This allows you to create a browser edge banner with text and content matched to other content on the page.
  • Full Width in Mobile : Remove the left and right margins in mobile mode, expanding the block sides to the the browser edges. This setting only affects Wide and normal block layouts. Block contents will still respect padding settings regardless of layout.
  • 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.
  • Center Content in Mobile : Force center alignment on all text and content within this object node when viewed on smaller screens. This alignment is inherited by this object’s child nodes and nested blocks, but may be overrided by styles applied to them directly.

Buttons and link fields in AMP Publisher blocks allow you to link to any URL on or offsite as well as opening a PopUp Block on the page.

  • Link URL or PopUp ID : Enter a link URL or the PopUp ID for a PopUp block on this page. You must turn on the Target PopUp setting to use a PopUp ID.
  • Target PopUp : You must turn this on if you wish to target a PopUp block on the page rather than a URL link.
  • Open in New Tab : Open the link in a new browser tab when clicked rather than navigating away from the current page. This is done using the target=”_blank” attribute in the link tag.

Image / Embed

Some block only support an image, some support both image and embed funcitonality. Images must be hosted from your website in the Media Library to maintain AMP compatibility, media embeds are generated from a URL supplied by the supported provider.

Image – WordPress media library image file

  • You may choose an image from the block toolbar or from the block 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.
    • You may enable viewing of the image full-screen by turning on the Use AMP-Image-Lightbox setting. AMP uses their “lightbox” tech to resize and layer the image to fit the browser as an overlay, allowing the user to see the image in it’s largest possible viewing area.
    • In some blocks you may display a caption above, below or overlay the image.
      • Open the Caption panel in the block inspector.
      • Turn on the Display Caption setting, this will open up a variety of settings you canuse to layout and style the caption.
      • Enter a caption directly in the block editor, or leave blank to use the caption assigned to the image in the Media Library. The caption area is actually a nested content area, you may insert blocks into it as you see fit, but results may vary.
      • Choose a Caption Position. If this block is a “flex item” you are limited to choices for overlaying the caption over the image. If it is not a flex item then you also have options for putting the caption above or below the image.
      • You may style the font and caption box using a variety of advanced styling options including margins, padding, color, background, border and shadow.

Embed – Video or social media embed URL

  • In the Embed section, enter a URL into the Video/Social Embed URL field for the video or social emebed from one of the supported providers. Results may vary across embed providers as each comes with it’s own inherent styles and potential display issues.
  • AMP supports embeds from: YouTube, Vimeo, Dailymotion, Facebook, Instagram and Twitter.

Color

Color is used across a variety of setting types such as fonts, backgrounds, borders and shadows. Font color is inherited by children, object color is not. AMP Publisher blocks support colors linked to the Accelerate Color Palette. Using “linked” colors from your Accelerate theme allows you to change the color assignment in all blocks sitewide when you change the color palette setting in the WordPress Customizer.

  • Color Picker : Open the color picker by clicking the “Custom color” link. You may choose a color by clicking in the color map or by entering a color hex code.
  • Accelerate Color Palette (rectangle buttons) : The Accelerate theme has a base “Color Palette” that it uses for many apects of the site (dark, medium, light… etc). You may link the color setting to the Accelerate theme’s Color Palette. The palette “linked” color will change when the customizer’s palette changes.
  • Common Palette (circle buttons) : A common palette is populated from all colors you have chosen using the Accelerate Customizer Settings. These button are circles, and their color is not linked, it will keep the exact color you have assigned even if the color palette changes.

Border

Border rules can be applied to objects, they are not inherited. they can be amnipulated using the various settings to create a variety of effects and looks.

  • Border Color : Color must be chosen to access the advanced border settings.
  • Border Width : The border width (thickness) in pixels. The higher the value the thicker the border. Border styles use this differently, for example the “double” border requires at least 3px of width to allow a 1px separation.
  • Border Style : The border style is affected by the border thickness, some more than others. There are several border styles available in CSS, some more useful than others. This setting can be used to create a variety of visual effects when combined with other border and shadow settings.
  • Border Sides : Toggle on/off the border for edge of this object individually. This can be used to create a variety of interesting visual effects when combined with other settings like Border Style, Rounded Corners and Box Shadow.
  • Rounded Corners by Pixels : The border-radius CSS rule in pixels. This effect is applied to all four corners of this object. This is a border setting, but does not require a border to be used. It will round the corners of an object, if that object has a shadow it will create a softer edge for the object and the rounded corners will be visible depending on the shadow settings and intensity.
  • Border Radius by % : The border-radius CSS rule using percentage %. This setting overrides the Rounded Corners setting unless it is set to a value of 0. A value of 50% (max) allows you to create circles from squares and ovals from rectangles.

Shadow

Shadows can be applied to objects and text, with slight differences between them. Text-shadow rules are inherited by children, box-shadow rules are not. By default the shadow will use 0 offsets and a blur radius of 5px, this creates a basic shadow or glow depending on your color choices. You may tinker with the options to create interesting inset and lighting effects.

  • Shadow Color : Color must be chosen to allow acces to the advanced shadow settings.
  • Inset Shadow : Apply the box-shadow on the inside of this object’s edges rather than the outside. This can be used to create an indented effect rather than a hover or glow. This setting does not apply to text shadows, and is only available to some settings as it cannot be supported in some objects.
  • Double Shadow : Double the intensity of the Box Shadow by applying the CSS rule twice.
  • Shadow Offset (horizontal & vertical) : The offset is set by adjusting the X-axis and Y-axis using positive or negative values (left/right and up/down). This determines how it is displayed in relation to the object’s borders. This can be used to create the illusion of a light source location applied to a hovering object.
  • Shadow Blur : The blur radius in pixels. The higher the number, the more blurred the shadow will be. This can be used to soften the shadow effect.
  • Shadow Spread : The spread radius in pixels. A positive value increases the size of the shadow, a negative value decreases the size of the shadow. Negative values can be used to limit the shadow to only two edges. It can also create the illusion of a light source’s distance from a hovering object.

Text – Font

Almost all font CSS rules are inherited from parent to child. Results may vary across fonts. Certain color combinations are nto recommended as it can b very easy to create text that is difficult to read or bothersome to the user’s eyes. High contrast between text and background is always best for readability.

  • Text Alignment : Basic text alignment to left, right or center. This rule is inherited by children and overrides inherited rules at the assigned node. The Center Text in Mobile setting will override this setting and center the text on smaller devices.
  • Center Text in Mobile : Force center alignment in mobile mode. This will override the Text Alignment setting for this object and any it has inherited. CSS text-align may also affect objects found in this object and it’s children.
  • Font Color : (see color section for usage)
  • Ignore CSS Link (href) Colors : Themes usually give the links (href) a different color than the text, which might affect how they are seen in your block depending on how its color conflicts with the block/node background color. CSS link styling is inherited by links in this object regardless of the color settings applied to it. You must turn this setting on to ignore those rules and match the link color to the surrounding text color.
  • Text Shadow Color : Text shadows are useful for offsetting the ext against a background if you have a light color against a light background (or vice-versa). The can also be used to highlight some text. (see Shadow section for usage)
  • Font Size : Font size in pixels. This setting overrides font-size rules inherited from parent objects and global tag rules. Set it 0 to inherit the size from above.
  • Font Family : Family is a term used for a list of fonts in CSS, this setting lets you choose a supported font from the selector, or let it inherit from above. The fonts we support are the most common, so they are likely to be supported by every device.
  • Font Weight : Inherit, bold or normal, this setting is inherited. Basically bold or not? The “black” option is only supported by the Arial font.
  • Font Style : Inherit, italic or normal, this setting is inherited. Basically italic or not? We only support these two options because most fonts only support these two options.
  • Line Height Multiplier : Line height as as a decimal multiplier to the font-size for this object. This setting adjusts the spacing between lines of text. Using a multiplier allows the line height to grow with the font size.

Background

The background of an object can be a solid color or an image that is cropped to fill the object for responsivity. It stands behind all text and children. Be sure to set your text colors and shadows to offset the background for readability. This setting is not inherited.

  • Background Color : Choose a background color for the block. [tutorial]
  • Background Image : Choose an image from your Media Library. The image will be cropped to suit the space, so it is best to choose an image that will look decent across all browser/object size. AMP requires you to use images hosted on your local site for security purposes. We utilize the data provided by WordPress to render them and to support import of images from our API.
  • Background Image Size : Choose how much horizontal space the background image is allowed. You can choose a percentage, pixel value, or one of the standard CSS commands (auto, contain, cover). When you adjust this setting you will gain access to a setting for adjusting the image alignment. This can be useful for creating a block that looks as if it has an image next to an object, or to create an open visual space in your block.
  • Background Image Alignment : Left, center or right. Choose how to align the background image. Block text and contents are completely unaffected by the background image, so be conscious of how this placement will look across browser sizes.
  • Treat Image as “Hero” : Include a preload tag for this image in the page head, and add the “hero” schema markup for this image. This is only recommmended for blocks that are visible in the browser during the initial page load.

Margin

The margin is the space outside of an object. It is not inherited and is difficult to manage in a responsive environment. All AMP Publisher blocks have Top Margin and Bottom Margin settings, allowing you to create space without having to insert a spacing block. They are also used in nested (child) nodes of the blocks allowing you to space the objects within them.

  • Top & Bottom : Distance in pixels used for the top or bottom margin.
  • Side Margins : Only a few blocks/settings allow for side margins as they greatly complicate responsivity and they require programmatic handling to adjust object width.

Padding

Padding is the space inside of the object, between its borders and its content, it is not inherited.

  • Padding : Padding in pixels applied to all four inner edges of this object.
  • Left, Right, Top & Bottom : Padding in pixels applied to the associated edge of the object. This setting overrides the main Padding value allowing you to fine tune your object spacing.

Comments are closed.