← All posts

Swiss Knife for Bricks Builder: Paste HTML, Multi-Edit, Scripts

swiss knife

Building in Bricks Builder often means rebuilding HTML you already have by hand, styling the same elements one at a time, and loading scripts on every page even when only one page uses them. Swiss Knife for Bricks fixes this with a script manager, paste HTML to Bricks elements, multi-select editing, copy/paste classes and Tailwind CSS class autocomplete through Winden. In this walkthrough we show each feature on a real page so you can see where it saves you time.

Turning features on

Not every project needs every tool, so Swiss Knife lets you turn on only what you use. Go to SwissKnife Bricks → Features and look at the Activate Features panel. It has three groups:

  • Right click: Paste HTML and Copy/Paste Classes
  • Scripts & Styles: Enable Scripts Manager and Allow CSS/JS Uploads
  • Additional: Enable Multi-Select, Enable Plain Classes (Winden Classes Autocomplete) and Visual Enhancments

Tick the ones you want and click Save Changes.

Scripts: add JS and CSS from a CDN or your own server

Adding a library like GSAP usually means a separate snippets plugin or editing theme files. The Scripts Manager handles it inside Swiss Knife, and you can choose whether a script loads site-wide or only where you need it.

When you turn on Allow CSS/JS Uploads, you can also upload .js and .css files to the Media Library. By default WordPress only accepts files like images and video there.

To add a script:

  1. Open Scripts Manager and click + Add New Script.
  2. Enter a Script Name (we used GSAP). It must be unique, because you use this name later to load the script on specific pages.
  3. Pick the Script Type: JavaScript or CSS.
  4. Choose the Location: header or Footer.
  5. Set the Include Type: Enqueue to load it on the whole site, or Register to load it only on pages where you call it.
  6. Turn on Frontend Only if you don't want the script running inside the Bricks editor. For animations this keeps the builder calm while you work.
  7. In Upload File or Paste CDN Link, paste the CDN URL (we copied the one from the GreenSock homepage). To self-host, click the upload arrow and pick the file. We uploaded gsap.min.js from the minified folder of the GSAP download.
  8. Click Save.

The list then shows each script with its location, include type and Frontend Only status.

Build a GSAP stagger animation

To test it, we used a "Meet our leadership" page. Every team member card has the class stagger. With the GSAP script set to Enqueue, we:

  1. Added a Bricks Code element and moved it below the content.
  2. Turned on Execute code.
  3. Pasted a short script. It defines an init function that runs gsap.to() on .stagger with an opacity and y offset and stagger: 0.1, and calls it on the window load event.

Save, open the preview, and the cards animate in one after another.

Load a script on one page only

With Enqueue, GSAP loads on every page of the site, even pages that have no animation. If only one page uses it, switch the script's Include Type to Register. Then load it on that page only:

  1. In the script's settings, click Click to copy next to the generated snippet. For our script it is wp_enqueue_script('gsap');
  2. On the page, add it to a Code element as PHP and save.

The animation still works on that page. When you view the page source of the other pages, the GSAP script isn't there. You get the same result with less JavaScript on every other page. In the video, Marko mentions that a future version should add the PHP part for you.

Paste HTML: turn markup into real Bricks elements

If you find a layout you like, for example a Tailwind CSS component, rebuilding it in Bricks element by element takes a while. Paste HTML turns copied markup straight into Bricks elements.

After you turn on Paste HTML, two new icons show up in the Bricks toolbar: Paste HTML and Paste HTML with editor.

  1. Copy the HTML of a component. We used a CTA section from Tailwind UI.
  2. In the Bricks editor, click Paste HTML.

The whole section appears as native elements (Div, Heading, Basic Text and so on) in the Structure panel, with its classes kept. We had Winden on, so the Tailwind classes rendered right away. Inline SVGs are pasted as a Code element containing the full SVG, with Execute code already on. We also pasted a pricing table and a full section the same way. Each one took a couple of clicks.

Paste HTML with editor

If you don't have code to copy but want to mock something up quickly, click Paste HTML with editor, type the markup and click Insert. An h1 becomes a Heading element with the Tag set to h1. A div with the class container and an h2 inside becomes a Div with that class and a nested Heading. For now the editor has basic autocomplete. Emmet support is planned.

Multi-select and multi-edit

If you have several elements that need the same change, editing them one by one is slow and easy to get wrong. With Enable Multi-Select on, hold Shift and click elements in the Structure panel to select several at once.

In the video we selected three Divs and set a background, and all three changed at once. Then we selected the three Headings and set the Font size under Typography to 50 for all of them together.

Multi-select works with classes too. Select several elements, add a class such as m-16, and every selected element gets it. If you work with a utility framework like Tailwind CSS, you can apply spacing and color changes to a group in one step.

Copy and paste classes

When one element has the right set of classes, you shouldn't have to type them again on the next one. Right-click an element in the Structure panel and choose Copy classes, then right-click another element and choose Paste classes. The same right-click menu also has Paste HTML, Copy styles and Paste styles.

Tailwind CSS autocomplete with Winden

Typing Tailwind classes from memory slows you down and leads to typos. With Enable Plain Classes (Winden Classes Autocomplete) on, Bricks suggests Winden's Tailwind classes as you type in the class field.

Setup:

  1. Turn on Enable Plain Classes (Winden Classes Autocomplete) in Swiss Knife Features and save.
  2. In the Winden settings, tick Enable Autocomplete in the Autocomplete section and save.
  3. Generate the autocomplete file and wait until it is marked complete.

The classes are saved to wp-content/uploads/winden/cache/autocomplete.json. This matters for speed. Winden has around 7,000 classes, and loading that many from the database would slow Bricks down. Reading them from a JSON file is much faster.

In the builder, press space in the class field to see the suggestions, or start typing. emerald, for example, lists matching classes like bg-emerald-700. Autocomplete also works together with multi-select. We duplicated a Div a few times, selected them all, and applied bg-emerald-200 m-12 to every one at once.

Visual enhancements

This is the first small change to the builder UI, and it is experimental. With Visual Enhancments on, the elements panel in Bricks shows more items per row on wider screens (four instead of two) when you expand it, instead of just making the items bigger. We plan to add more visual improvements to Bricks Builder in future releases.

Who is this for

  • Bricks Builder users who reuse HTML from Tailwind UI or other component libraries and want native Bricks elements without rebuilding them by hand.
  • Developers adding libraries like GSAP who want to self-host or use a CDN and load scripts only on the pages that need them.
  • Tailwind CSS and Winden users who want class autocomplete in Bricks without slowing down the editor.
  • Anyone styling many similar elements, who can use multi-select and copy/paste classes to make one change instead of many.

FAQ

Can I paste Tailwind UI components into Bricks Builder? Yes. Copy the component's HTML and click Paste HTML in the Bricks toolbar. The markup becomes native Bricks elements with its classes kept, and inline SVGs are pasted into a Code element.

How do I load a script on only one page in Bricks? In the Scripts Manager, set the script's Include Type to Register. Then add the generated wp_enqueue_script() call (for example wp_enqueue_script('gsap');) as PHP in a Code element on that page. The script won't load on any other page.

Can I self-host scripts instead of using a CDN? Yes. Turn on Allow CSS/JS Uploads, then use the upload arrow in the Scripts Manager to add the .js or .css file to your Media Library.

Does Tailwind autocomplete slow down Bricks? The classes are generated once into a JSON cache file in your uploads folder instead of being loaded from the database. With around 7,000 classes, this keeps the editor fast.

Can I edit several Bricks elements at once? Yes. With Enable Multi-Select on, Shift-click elements in the Structure panel and change styles or add classes to all of them together.

Get Swiss Knife for Bricks → dplugins.com

Related posts