Resources

Block-Sets

by Creator

A “Block-Set” is an archive of settings and images used to export and import a block. Each of our blocks has a deep network of options and style settings that allow it to take on nearly any look you might want. While they can be used simply with just a couple of adjustments, their truly dynamic nature equires diving deeper. This would be a horrible grind if you had to do it every time. You could enter “Code Editor” and copy/paste the block HTML from page to page, but this is tedious and limited. We create the Block-Set tech to make it all easier, and open the ability to download them from our API.

  • You may create your own Block-Sets, which are stored in your website’s database. Once created they can be used to import, backup and migrate blocks as needed.
  • You may import Block-Sets with their content, or just import the settings. This allows you to import a block’s styling without affecting your content.
  • You may export and import your Block-Sets between your websites as a ZIP file. The ZIP archive can also serve as a backup file stored on your own device.
  • You may download pre-made Block-Sets from our API. All images used in the block will be imported into your Media Library if they have not been imported previously.

Tutorial – Export

You can save AMP Publisher block data to your site’s database, then import it into other pages or even other sites. After you have created a block and wish to save it, click the Export Block Settings button in the block toolbar (dashicon-upload). When you select a block the toolbar appears directly above the block or at the top of the page depending on your personal setting for “Top Toolbar”.

Export Block Settings

A window will open over the block editor allowing you to interact with our power core and API. At the top of the page you will see a screesnhot of your block, input fields, and some instructions. Below the current block you will see other blocks of the same type you have previously saved (if any). You may create a new Block-Set or update/overwrite an existing Block-Set. Both interfaces allow you to delete an existing Block-Set or change it’s name and description independent of the action you are currently taking.

  • New Block-Set
    • Enter a name for the block into the first text field. This name is used for your reference, it does not have to be unique… though it is also used for the exported ZIP filename if you ever need one, and in that case it shoul be unique to prevent conflicts with other exports.
    • You may enter a description if you wish to help you document what it does , where to use it, or what color the sunset was today.
    • After you do or don’t choose to enter anything at all… click the “Create New Block-Set” button. It is saved and will now show up in this interface whenever you have a bock of the same type selected.
  • Update Existing Set
    • Click the “Overwrite Block-Set” button to save your current block over a set you have already saved. You might do this to update it with changes, or to overwrite one you no longer need.
  • Edit
    • You may edit en existing Block-Set’s name and description. The fields have limited characters because the name is used to create a ZIP file upon export. Click the save button (floppy disc icon) when you are done.
  • Delete
    • You may delete any Block-Set saved to your database from the Block Settings interfaces. You may only delete the Media Library ZIP files from the library.
  • Export
    • Once saved, you may export a Block-Set to a ZIP file. You might do this as a backup, or to use the block on another one of your sites. When you wish to use the file, just drag it into the target site’s Media Library and it will show up in the Block Settings interfaces.
  • Close the window when you are done.

Tutorial – Import

Now you want to use this block on another page, click the Import Block Settings button in the block toolbar (dashicon-download) with the target block selected. A window will open with all Block-Sets of it’s type that you have saved to the database as well as any ZIP file exports you have put into the Media Library. Choose the Block-Set you wish to import and how to import it. Most of the time you’ll just import the whole block and then edit it’s content, but you may import just the block’s settings if you do not wish to overwrite it’s content. This does not import settings from nested blocks, only the root block from the Block-Set you are importing… so it you want to use a more complicated block with nesting (especially DOM blocks) then you will need to import the whole thing.

The import window opens with the Block-Sets available on your local site, both saved to the database and placed into your Media Library. You may also import Block-Sets from the API by clicking the “API” button. Click the “Local” button to go back. You cannot edit, delete or export an API Block-Set until you have imported and saved it to your database.

  • You may update, edit, delete and export existing Block-Sets from either interface, see previous instructions.
  • Import Block-Set : Click this button import the entire block (settings and content) into the target block. Any content or settings it had previouslt will be lost.
  • Import Settings : Click ths button to import the settings from the root block of the Block-Set. Your target block’s content will be intact, but nested block settings from the Block-Set will not be applied to the children of the target block.

Accelerate Color Palette

Another bonus feature of using Block-Sets comes from the color palette capabilities built into our blocks. If you are running our Accelerate theme, you can link the colors in your blocks to the Accelerate theme Color Palette settings (customizer). This allows your site to change the colors in your blocks to match your theme, even if you decide to change them. This also allow you to migrate blocks across sites running Accelerate, and the blocks will adapt to their new site’s theme. Most of the colors used in the blocks in our API use these color links. If Accelerate is not active, they will just use the color that was set when they were created.

Block-Set Sources

The Import Block Settings window (accessed from the block toolbar) opens with your local Block-Sets. This includes the archives you have created as well as any ZIP archives you have uploaded to your Media Library. The database files are denoted with a book icon, the ZIP files are denoted with the WP Media Library icon (camera over musical note). You may also download Block-Sets from the API by clicking the API button at the top of the window. The API will return any blocks it has available to you.

Getting Started

A good place to get started is to import a block. This lets you use them without knowing anything about them. Just download, edit and go. The following example is one of the Block-Sets available from the API for the”Media Split” block. We will walk you through importing it, or it’s settings into your own site.

Title
Subtitle ~ Fusce dignissim lacus erat, gravida lobortis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique tincidunt augue ullamcorper ultricies. Curabitur lectus felis, dapibus non vulputate id, imperdiet a tellus. Sed id cursus ex, quis aliquam tellus. Aenean imperdiet, dolor nec tincidunt sagittis, nisl lectus elementum velit, in molestie lacus nibh et neque. Integer sollicitudin dolor dolor. Duis ultricies a orci non feugiat. Vivamus tempus tempor euismod. Suspendisse potenti. Sed ac augue quis arcu mattis rutrum.

Step 1 – Import a block

If you haven’t done so already, insert a Media Split block into the page. Our blocks are available from the WP sidebar block inserter in the AMP Publisher Blocks section. Or you can search for them by name from the insert button pop-up window. While a block is selected you will see its toolbar open above it. In the section labeled Block-Sets, click the Import Block Settings button (download icon). This will open a window which is probably empty because you haven’t yet created any of your own Block-Sets… we’ll get to that later. Click the API button at the top to view the blocks available from the API.

You will see the block above (or something similar) as well as others examples of how the Media Split block can be used. You may import any of them you like, but this tutorial will deal with the above example. Click the “import Block-Set” button for the example block. The block settings and images will be imported, and you are ready to edit. If using the Accelerate theme, the colors will change to match your theme’s Color Palette, but you may edit them if you wish.

Step 2 – Edit the block

In this example you have an image on the right side of a content box, all within a styled block. The Media Split is a side-by-side block, which means it has two objects beside each other in browsers, but then switches to over/under in mobile mode (viewports 900px in width or less). To make things clearer, we’ll walk you through altering the block using a nested list to match the nested nature of the block’s objects.

  • Block – We’ll change the background color and padding. Open the Block Settings panel in the right sidebar.
    • Scroll down until you find the Background section. Choose a new color either from the palette buttons or click the Custom color link to open the WP color picker.
    • Now scroll down again until you find the Padding section and change the Padding setting to whatever you wish, this wil change the distance between the block edges and it’s content.
  • Media Object – We’ll change the image, border color and width, as well as swapping the image and content to left/right respectively. Open the Media Settings panel.
    • Click on the image to open the Media Library window, choose an image and click the Select button to replace the demo image with one of your own.
    • Scroll down untit you find the Border section. Choose a new Border Color for the image. Then set a new Border Width using theslidebar or by entering a number manually.
    • The image is on the left by default, so we’re just going to turn off the right alignment. In the block toolbar Obj Align section you’ll see a button with a green icon (Align Media Right, far right), click this button to toggle it off. We felt there was no need for a redundant left align button.
  • Content Wrapper – We’ll make the content box look inset. Open the Content Wrapper panel. Scroll down the the Box Shadow section. Turn on the Shadow Inset setting.
    • Title – We’ll change the font size and weight. Open the Title panel. Both settings are found in the first section labeled Text – Font.
      • Scroll down and change the Font Size setting by using the slidebar or entering a number manually.
      • Select Normal from the Font Weight selector.
    • Subtitle – We’ll adjust the border to only underling the subtitle. Open the Subtitle panel.
      • Scroll down to the Border section. Find the Border Sides setting, and turn off the Top border.
    • Nested Content – We’ll center align the text and add a paragraph. Open the Nested Content panel.
      • Scroll down to the Text – Font section. Under Text Alignment click the center align button. The core paragraph block does have it’s own alignment setting, this one covers all nested content and is inherited per text-align CSS rules. This means you may assign an alignment to the parent, then change the children individually.
      • You may change the paragraph text if you wish by hilighting it and either typing new text or pressing the Delete key. To insert a new paragraph it is easiest to just click your cursor at the end of the first paragraph and pressing the Enter key to create a new line in a new paragraph block.

Step 3 – Save/export the block

Once you have a block you want to use again, you must save it. In the block toolbar section labeled Block-Sets, click the Export Block Settings button (upload icon). This will open a window and pause while taking a screen capture of the block. When it’s done you’ll see your block’s screenshot and a couple of fields. Enter a Name and optional description for the block then click the Create New Block-Set button. The window will refresh with your new Block-Set available with options for editing, deleting or downloading the ZIP archive.

  • You may update an old Block-Set with a new version by opening this window from the new version and clicking the Overwrite Block-Set button for the old archive you wish to replace.
  • You may delete any Block-Set in your database. Zip files found in the Media Library must be deleted from the Library, not from this interface.
  • You may edit a Block-Set’s Name or Description in this window, be sure to click the Save button (floppy disc icon).
  • You may download the Block-Set data as a ZIP file as a backup for use on another site. To import a ZIP file you must upload it to the Media Library on the target site, the Block-Set will then be available when you open the Import Block Settings window from a block of matching type.