RichTextcomponent has a
customFieldPlainTextprop (true by default). If set to false, values are not transformed to plain text when saving to a custom field.
v3.11.0 v3.11.1 v3.11.2
Imagecomponent can be set as
source: in this way you can use the Image component also for images that should not be visually editable (for example the images of a posts list component that gets images from the posts' pages).
placeholderprops are not required any more (by default a simple paragraph is rendered and the placeholder is "Type a text...").
TextValuetype is exported to allow correct typing of (rich)text props
v3.9.1 and v3.9.2
fetchPagefunction, to pass arguments to the
getExternalDatafunction (useful if you have data that depend on path params and not on the page - like variants of a product in an e-commerce)
seoNameintroduced in 3.9.0
For enterprise plans, ability to set fine-grained permissions on a user/page/language/brick level providing the
canUseBrick in the
permission object of the React Bricks configuration.
See the Permissions documentation.
Ability to create custom roles from the Dashboard and to assign them to users for use in the permissions functions.
It is now possible to have a story created in the bricks code appear as a brick in the "Add new" menu, using the
See the Stories documentation.
Bricks can be specified as a structured array (themes > categories > bricks), so that the order of categories can be preserved and it is not necessary to specify the
category for every brick. The config structure overrides the theme and category of the single bricks.
It is now possible to specify the
getDefaultProps function for each
repeaterItem to override the defaults of the item for a repeater.
Ability to set a
custom placeholder for each
See the Image documentation.
getOptionfunction now receives all the props as an argument.
Linkability to specify the
simpleAnchorattribute to avoid the local link renderer (SPA router) even for local paths.
hideFromAddMenu= true are hidden
When we have important announcements to share, it will be possible to see them in Admin.
Now it's possible to prevent content edit (inline and via sidebar controls) for locked blocks (enterprise feature). Of course it's possible to prevent it also on default content blocks using the
canEditContent flag on the the block default content.
imageClassNameintroduced in v3.8.7.
aspectRatio(if set), respecting the
keywarning for Repeaters
Ability to have a
theme on the bricks, with theme selection in the "Add new" interface
enablePreviewIconconfiguration key (if there is an icon, it is shown)
Fixed blocking bug (missing dependency in production bundle)
You can now lock single blocks in a page, instead of an entire page.
See Locked structure
For a pageType, you can now specify the default content in multiple ways.
The array of blocks can contain, for each block:
IContentBlock(block content with every prop and lock status)
See Page Types
You can now add stories for a brick in code, adding a
stories array to the brick's schema. This is useful when you want to document stories that are part of your design system style guide. The editors will see both the schema stories and the ones created by them. While user-created stories can be deleted, stories that are part of the brick's schema in code cannot be deleted, as they are part of the design system definition.
See Brick's schema
ReactBricksContext, that you can reach via the
useReactBricksContexthook. See useReactBricksContext.
You can now embed pages/entities inside of another page, so that it is a single source of truth: anytime the embedded page is changed, the change is reflected in all the pages embedding it. See Page / Entity embed
helpTextthat is rendered below the control.
clickToEditSideto "NONE", or having a
showClickToEditset to false.
You can now search for images on Unsplash. See Unsplash integration.
You can configure your own Unsplash API Key using the
unsplashApiKey configuration parameter, otherwise you will have just 20 searches per hour per app.
Of course, you can disable the feature via the
enableUnsplash configuration flag.
shouldRefreshStylesflag on a
sideEditProp, when the value change for this prop could cause an injection of new CSS styles by a CSS-in-JS library. This ensures the new styles are correctly loaded.
You can have any level of nesting using the
See Nested blocks
<Repeater> can have multiple types of repeated blocks. See Repeater Items
You can set an image and an icon for each brick, so that users can select them visually from the "add new" menu. See Bricks schema
cssInJsflag on the configuration)
...restspread on the main element of a repeated item
It is really suggested that you don't spread
...rest any more on repeated items and that you remove those spreads from your codebase: leaving them could cause browser warnings for unknown attributes on DOM elements (because now on the
rest you have all the props of the block, not just the sidebar props, which probably you already extract before the rest).
If you are destructuring props that have the same name as a prop that now comes from a visual editing component (for example an image), the prop on the
...rest could override the other props.
Big milestone: now you have real-time presence of all the users connected to an App and page-level lock, with possibility to force the unlock of a page.
If you set the new
blockIconsPosition property on the React Bricks configuration to
types.BlockIconsPosition.OutsideBlock, the small icons for "add new block", "delete block", "duplicate block", "move up", "move down" will be rendered outside of the block (useful for example when you have a short block)
softLineBreakattribute was not available for the RichText even if implemented. Now it is in the TypeScript interface and it works as expected
imageOptionsfor a sideEditProp or a custom field:
relationshipOptionsfor a sideEditProp or a custom field:
filterByin fetchPages or usePages: better typings
sizesfor size art direction.
trueby default). You may also provide the
loadingprop to override the default
lazyand set it to
eager(not recommended, generally it would hurt performance).
noWrapperare deprecated. Now by default no wrapper is rendered (it is still rendered only if you are applying the old containerClassName and containerStyle).
renderWrapperfunction instead of the props above. The
renderWrapperfunction receives width and height as arguments, so that you can calulate the image aspect ratio.
getAdminMenufunction, which receives the
isAdminargument and should return an array of objects with
path. If path is external, it will render an anchor tag, while if it is a local path, it will use the router navigation.
This features make easier to work with React Bricks as a sort of headless CMS, but where you can still edit the entity data in a visual way.
Imagecomponents can now be bound to page meta fields (like title, description, language, image) or custom fields, using the
customFieldName(instead of the usual
propName). The fields from the sidebar and the one edited visually have 2-way data bounding.
pageType: if you create page type with
true, you will see a new tab menu on the left to choose between Pages and Entities. Entities are just pages for React Bricks, but they could not correspond to real pages in your frontend. In this way you don't confuse your editors. For example you could have in Entities things like Categories or Menu Items.
relationshipOptions(to specify the referenced
pageType, the label and a
multipleflag to have a many-to-many relationship).
filteroption to fetch pages based on custom fields' value.
pageTypeyou can define an array of categories
IImageSource: width and height are no more mandatory
v3.2.21 - v3.2.23
PageViewerfor React 18 compatiblity.
v3.2.19 - v3.2.20
v3.2.17 - v3.2.18
enablePreviewtrue by default in ReactBricksConfig.
v3.2.12 - v3.2.13
noWrapperprop to the Image component to avoid the wrapping
RichTexttoolbar always inside the brick space.
aspectRatioto the Image control in Side Edit Props.
getDefaultPropsno more mandatory in the
RichTexttoolbar always inside the rich text space.
v3.2.8 - v3.2.9
v3.2.6 - v3.2.7
useVisualEditto frontend bundle.
markPluginConstructorand plugins to frontend bundle.
Repeater(in order to conditionally render based on index)
v3.2.1 - v3.2.3
v3.1.2 - v3.1.9
Filecomponent that allows editors to upload files that may be downloaded by users on the frontend.
Imagecomponent, so that the crop will be limited to that aspect ratio.
categoryto each brick and an array of
tags. Bricks are organized by category and searchable by name or tag. You can also add a link to external documentation for each Brick, which is shown in the Playground.
RichTextcomponent now by default supports also Heading H1..H6 and Quote.
RichTextExtcomponent, which is an extensible RichText with a plugins system. Underneath the RichText component (kept for compatibility) uses the new RichTextExt.
shouldRefreshTextisn't needed any more on sideEditProps which affect the style of (Rich)Texts.
<div></div>around the renderBlock.
translationsarray isn't an array of language strings anymore, but an array of objects with
If you need to migrate from v2 to v3, please read Upgrade v2 > v3.
Be the first to discover our latest news. No spam, promise.