BentoBox

The BentoBox2 Developer Hub

Welcome to the BentoBox2 developer hub. You'll find comprehensive guides and documentation to help you start working with BentoBox2 as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    Developer Documentation

Wireframe Configuration

Each of the following are valid key formats:

section-{section-slug}

A section allows you to reference a group of custom fields wrapped in a section defined on this page template.

Example:

{
  fields: {
   	"header": {items: "header_text"},
   	"body": {items: { "body_content":"wysiwyg" }},
  },
  wireframe: [
    "section-header",
    "section-body"
  ]
}

boxes-{box-type}

This will render a Wireframe Block for each Box of the specified Box type. The width setting when applied to this key will be used by each Box it renders. To specify the width used by the entire listing, wrap this in a container (described below.)

Example:

{
  fields: {
		...
  },
  wireframe: [
 		"section-header",
    {
    	"boxes-locations": {
    		width: "columns-4"
    	}
    }
  ]
}

box-{box-type}-{box slug}

This will render a Wireframe Block for a specific Box based on its type and slug. (You can find the slug by browsing through the accessible Boxes on the site through the interface that is available by appending "/?help" to the site URL.)

Example:

{
  fields: {
		...
  },
  wireframe: [
  	"section-header",
    {
    	"box-menus-dinner": {
    		width: "columns-12"
    	}
    }
  ]
}

link-{box-type}

This will render a Wireframe Block which links to the page in the administrator's panel for the specified Box type.

Example:

{
  fields: {
		...
  },
  wireframe: [
		"section-header",
    {
    	"link-locations": {
    		width: "columns-6"
    	}
    }
  ]
}

placeholder

The renders a Wireframe Block which does not provide a link. This is used to signify areas of a page which do not have editable content.

Example:

{
  fields: {
		...
  },
  wireframe: [
    "section-header",
    {
    	"placeholder-description": {
    		width: "columns-12"
    	}
    }
  ]
}

container

A container is used for improved layout control of a Wireframe. It takes two values: contents and width. Contents includes all the previously defined formats of Wireframe keys, while width defines the width of the container in which all the contents will be rendered.

Example: 6 column wide boxes repeating in a 12 column wide container

{
	fields: {
		...
  },
	wireframe: [
 		"section-header",
  	{
      "container": {
        "width": "columns-12",
        "contents": [
          {
            "boxes-locations": {
              "width": "columns-6"
            }
          }
        ]
      }
    }
  ]
}

engine

When defining a Wireframe for a box that uses an engine (in the /config/boxes folder), this will render a wireframe box in which the engine-specific fields may be edited.

Example:

{
  engine: "menu",
	fields: {
		...
  },
	wireframe: [
 		"section-header",
    "engine",
    "section-footer"
  ]
}

Values

The following is the definition of a wireframe box which uses all available settings. All of these settings are optional.

{
  wireframe: [
		"section-header",
    {
      "box-menu-dinner": {
        width: "columns-12",
        /* This specifies the number of columns in a twelve column
           grid which this box should occupy. Valid values are
           "column-1", "columns-2",... "columns-12". If this value
           isn't specificed, Bentobox, will divide the number of
           columns that are not accounted for by other boxes evenly
           among the boxes which have no width specified. */
        
        icon: "text",
        /* This specifies the icon which is rendered on the wireframes
           box. Valid values are "flag" (the default for a 'section'),
           "lock" (the default for a 'placeholder'), "boxes" (the
           default for 'box-' and 'boxes-'), and "text". */
           
        height: "500px"
        /* This specifies the height of the wireframe box. Valid
           values are any number of pixels, in the form '500px' or
           'equalize'. If this value isn't specificed, it will
           default to 240px. If the height is set to 'equalize',
           this box will take the height of the tallest box in this
           row. */
        
      }
    }
  ]
}

Concise Definitions

As with the custom fields and display logic, you may define your wireframes using a more concise syntax. If a Wireframe is not an array, it assumes you've defined a Wireframe with a single row. If any of your rows are defined as strings, it assumes this is meant as a key to be displayed at the full 12 column width. The width can be overridden by using a string rather than full json specification as the value. Other settings default as outlined above.

In other words, Each of the following are valid and equivalent:

"wireframe": "section-main"
"wireframe": ["section-main"]
"wireframe": [{"section-main": "columns-12"}]
"wireframe": [
  {
    "section-main": {
      "width": "columns-12",
      "icon": "section"
    }
  }
]

Wireframe Configuration