Elevate your Bricks Builder experience with this powerful plugin designed to seamlessly integrate with Bricks. Packed with custom elements, editor enhancements, custom conditions, custom dynamic tags, native elements enhancements, etc. This plugin extends the functionality of Bricks while adhering to WordPress best practices.
- Download brickscodes.zip from lateset Releases.
- From your WordPress dashboard, choose Plugins > Add New.
- Click Upload Plugin at the top of the page.
- Click Choose File, locate the plugin .zip file, then click Install Now.
- After the installation is complete, click Activate Plugin.
- Any new update release, you will get the same automatic update notice from your plugin dashboard.
- Expand/Collapse element category groups.
- Compact elements list.
- When you click the 'Edit with Bricks' link or button on a Post, Page, or Template, disabled elements will be automatically applied based on the template type.
- Note: If disabled elements are used in the current Template/Content, the Builder will display a warning in the console with the error: generateCss: controls for element not found. The elements and their controls will not be rendered in the Builder. However, everything will continue to function normally in both the Builder and the Frontend.
- A favorite button is available on all remote templates.
- All templates marked as favorites will be added to your custom favorite remote template library.
- Remove favorite templates using either the favorite or remove button.
- First load automatically pulling all query settings from element across entire site and save as first query records in query manager modal.
- Save new query record - Set your query settings on element as usual, once finalized, click save, give a query name/tag/description and save.
- Apply existing query records - Open query manager modal, select from the record, click apply, query settings will populate to the element query control.
- Edit exisiting query records - Open query manager modal, modal will display current applied query record, change your element query settings as normal, once finalized, click edit, give a new name and description or make no changes, click Apply and Update. Query record with the same edited query id will get updated across entire site.
- If plugin deactivated or feature disabled, your elements query settings will continue to work. Saved query records will be reset.
- New shortcut bar at Structure Panel to quickly add predefined common elements and auto set active to the newly added element.
- Apply Global Class 'bc-hide-in-canvas' to element, element will render in Frontend but hide in Builder.
- Apply Global Class 'bc-hide-in-frontend' to element, element will not render in Frontend, element with red border render in Canvas.
- New action shortcut bar at Structure Panel to quickly toggle to check elements in 'bc-hide-in-canvas' and 'bc-hide-in-frontend.
- New action shortcut bar at Structure Panel to quickly toggle to expand/collapse current active element at Structure Panel.
- New control allow you to use dynamic data from custom field, compare the value you defined and add the score 10 to template.
- {bc_user_ip}
- {bc_user_last_login} - Display Date.
- {bc_user_last_login:30} - Display human_time_diff format if less than the argument value.
- {bc_user_register_date}
- {bc_post_type_taxonomy_terms:post_type_slug:taxonomy_slug} - This will return terms id and name for select/checkbox/radio options. Replace post_type_slug and taxonomy_slug to your target slug.
Core Framework Free Integration (reference: https://docs.coreframework.com/development/coreframework-helper )
- Auto sync changes that made on Core Framework settings page to Builder.
- All Core Framework classes and variable are auto import to Builder.
- Separate modal for Core Framework Variables.
- When deactivate plugin, you may choose to keep Core Framework.
- Core Framework dark/light mode toggle in Builder.
- Upload any stylesheet, let Brickscodes automatically extract and import Variables in to Builder.
- Support glb/gltf, model animation, lazy load, camera control, etc. More info here https://modelviewer.dev/docs/
- Convert the library from https://image-compare-viewer.netlify.app/ into Bricks Builder element.
- Support the new DotLottie format (.lottie) alongside traditional .json files. Files can be added via media uploads, dynamic data sources, or custom URLs. Leverage the DotLottieWorker for optimized animation rendering. Provide support for configurable options such as speed, mode, autoplay, loop, and start-end frames. More information here https://developers.lottiefiles.com/docs/dotlottie-player/dotlottie-web/
- Support Dynamic tag as copy content.
- Specify class/id to copy its text content, option to specfiy tags to exlude.
- Specify element bricks id and automatically pull element json as copy content. (require user log in to copy)
- Select Template to export in frontend. (require user log in to export)
- Select User Roles allow to view.
- option to excludes form fields.
- Limit total entries return.
- Support filter by date.
- Support pagination for default table.
- Supports advanced tables with features like export, pagination, column reordering, and responsiveness. Assets are loaded only when these features are enabled. (https://datatables.net/manual/index)
- Support Splide Extension UrlHashNavigation, AutoScroll, Intersection. Extension assets only load if enabled.
- Support sync sliders.
- Number/fraction pagination.
- Progress Bar for overall progress and slide duration progress.
- Play/Pause button for autoplay and autoscroll.
- Disable Slider at selected breakpoint.
- Enhance Tabs Nested with Controls such as Tab Menu Horizontol Scroll, Vertical Tab Menu, Convert to Accordion by selected breakpoint.
- The rest can be handle by Bricks Interactions for content animation with target .brx-open
- Add scroll progress to Back to Top Element.
- When enabled, adding a Back to Top element will automatically include a scroll progress indicator. Customize its style as desired.
-
Icon Radio/Checkbox
-
Extra HTML5 pattern attribute for Password and Email field type. Validate in frontend with pure HTML5 validation and backend with form validation hook.
-
International telephone support seamlessly integrates with the Bricks form's Tel field type. Automatically detects the user's country using multiple free lookup services, ensuring reliability even if some services fail. Provides real-time telephone number validation and saves the number in full, including the country code. (https://github.com/jackocnr/intl-tel-input)
-
Password visibility toggle integrate to Bricks form's password field.
-
Signature Pad with File Preview. Seamlessly integrates with the Bricks Form element. Support viewport resize and redraw signed signature. Use form field type 'text' as Signature Pad input. Once enabled, it will automatically create field type 'file' for preview and upload. Assets only loaded if enabled. (https://github.com/szimek/signature_pad)
-
File uploads thumbnail preview. Auto filter out duplication. Seemless integrate with Bricks Form File type.
-
Offline Brickscodes Remote Templates are accessible only if you activate the Form Abandonment or Confirmation Popup Modal Before Submission module. Save the sample popup template as a popup template type and style it according to your preferences. However, it is essential not to alter the JavaScript event interactions for the popup button.
-
Advance User Registration (Module)
- Seamlessly integrates with Bricks' Form default User Registration action.
- Supports ACF fields.
- Offers an option to validate user email addresses using a secure, time-based activation link before creating the user account.
- When enabled, all form fields except the email field are removed (not rendered) on the frontend.
- Validates the user's email address before sending the activation link.
- Once the user receives the activation link and clicks it, they are redirected back to the form page. The link and email address are validated. If validation is successful, all form fields become available, with the email address pre-filled.
- The user can then continue the registration process.
- Supports ACF fields:
- Create an ACF User field group and assign its location to the user form.
- Add form fields as usual, including fields for your custom ACF User fields.
- Choose the default Bricks User Registration form action.
- A new set of controls in the Registration group allows you to select an ACF User field group.
- Once the ACF User field group is selected, the corresponding custom fields are automatically populated in the mapping repeater fields. Simply map the ACF fields to the form fields as needed.
- Upon submission, all ACF User custom fields will be automatically populated and saved to the user profile. Manual publishing or saving of the user post is not required.
-
Form Abandonment (Module)
- Seamlessly integrates with the Bricks Form element.
- Utilizes the form's 'save-submission' and 'email' actions to store records in the database and send an email to users regarding form abandonment.
- Forms can be submitted normally or saved as a draft by providing an email address.
- Form data is sanitized through Bricks form’s 'save-submission' action when creating a record.
- Records can be viewed in the backend via Bricks Form Submission, with the form's status. (Planned support for 'View Form Submission in Frontend' in the Custom Element.)
- If the form is submitted normally, it follows the default behavior.
- If submitted as a draft (incomplete form), all filled-in data is saved. The user will receive an email containing a secure, time-based token URL.
- If submitted as a draft, you may choose to exclude fields from saving.
- Upon clicking the link, the user is automatically returned to the form page, where the token is validated, and the form is pre-filled with the saved data.
- Subsequent submissions, whether normal or draft, will update the existing record in the database (no new entries), with proper data sanitization.
-
Confirmation Popup Modal Before Submission (Module)
- Set form custom action 'Confirm Before Submit', Select your popup template.
- When the user clicks send/submit on the form, a confirmation popup will automatically appear, but only if all validations are successfully passed. No actions will proceed until the user confirms the submission.
In-Progress
- Webhook
- Frontend Update User Profile Form ( Support ACF Custom Fields)
- Frontend Create Post Form ( Support ACF Custom Fields)
- Frontend Edit Post Form ( Support ACF Custom Fields)
Form Passowrd Field Pattern Validation & Visibility Toggle. Form Tel Fields International Tel Support
