{"id":13519042,"url":"https://github.com/liip/bootstrap-blocks-wordpress-plugin","last_synced_at":"2025-04-06T04:10:54.024Z","repository":{"id":34400650,"uuid":"175382222","full_name":"liip/bootstrap-blocks-wordpress-plugin","owner":"liip","description":"Bootstrap Gutenberg Blocks for WordPress","archived":false,"fork":false,"pushed_at":"2024-04-11T20:49:36.000Z","size":9426,"stargazers_count":279,"open_issues_count":21,"forks_count":60,"subscribers_count":20,"default_branch":"master","last_synced_at":"2025-03-30T02:09:27.919Z","etag":null,"topics":["bootstrap","bootstrap4","bootstrap5","gutenberg","gutenberg-blocks","wordpress","wordpress-editor","wordpress-plugin"],"latest_commit_sha":null,"homepage":"https://wordpress.org/plugins/wp-bootstrap-blocks/","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/liip.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-03-13T08:53:32.000Z","updated_at":"2025-03-13T08:29:35.000Z","dependencies_parsed_at":"2024-01-19T02:54:21.803Z","dependency_job_id":"6f00518b-0eb5-45b8-9cd1-50de82801a21","html_url":"https://github.com/liip/bootstrap-blocks-wordpress-plugin","commit_stats":null,"previous_names":[],"tags_count":35,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liip%2Fbootstrap-blocks-wordpress-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liip%2Fbootstrap-blocks-wordpress-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liip%2Fbootstrap-blocks-wordpress-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liip%2Fbootstrap-blocks-wordpress-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/liip","download_url":"https://codeload.github.com/liip/bootstrap-blocks-wordpress-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247430870,"owners_count":20937874,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","bootstrap4","bootstrap5","gutenberg","gutenberg-blocks","wordpress","wordpress-editor","wordpress-plugin"],"created_at":"2024-08-01T05:01:52.882Z","updated_at":"2025-04-06T04:10:54.004Z","avatar_url":"https://github.com/liip.png","language":"PHP","funding_links":[],"categories":["PHP","JavaScript"],"sub_categories":[],"readme":"# Bootstrap Gutenberg Blocks for WordPress\n\n[![Build Status](https://github.com/liip/bootstrap-blocks-wordpress-plugin/workflows/Lint%20Test%20Deploy/badge.svg?branch=master)](https://github.com/liip/bootstrap-blocks-wordpress-plugin/actions?query=workflow%3A%22Lint+Test+Deploy%22+branch%3Amaster)\n\nBootstrap Gutenberg Blocks for WordPress. This plugin adds Bootstrap components and layout options as Gutenberg blocks.\n\n## Features\n\n* Supports Bootstrap v5 and v4\n* Support for CSS grid (experimental)\n* Fully customizable with filters\n* Configuration via option page or programmatically with constants\n* Block templates can be overwritten in your theme\n\n## Available blocks\n\n### Container\n\n#### Options\n\n* Fluid: If enabled the container will use the full available width, spanning the entire width of the viewport.\n* Fluid Breakpoint: Used to enable [responsive containers](https://getbootstrap.com/docs/4.4/layout/overview/#responsive). This feature only works with Bootstrap v4.4+. The container will use 100% of the width until the specified breakpoint is reached, after which the defined max-widths will apply for each of the higher breakpoints.\n* Margin After: Define a margin which should be added after the container.\n\n### Row\n\n#### Options\n\n* Template: Choose from a predefined template for the inner `column` blocks.\n* No Gutters: Disable gutters between columns.\n* Alignment: Horizontal alignment of inner `column` blocks.\n* Vertical Alignment: Vertical alignment of inner `column` blocks.\n* Editor stack columns: Displays stacked columns in the editor to enhance readability of block content.\n* Horizontal Gutters: Size of horizontal gutters.\n* Vertical Gutters: Size of vertical gutters.\n* CSS Grid Gutters: Size of gutters when CSS grid is used.\n\n### Column\n\n#### Options\n\n* Sizes for all breakpoints (xxl, xl, lg, md, sm, xs): How much space the column should use for the given breakpoint.\n* Equal width for all breakpoints (xxl, xl, lg, md, sm, xs): If enabled column will spread width evenly with other columns.\n* Background Color: Set background color to column.\n* Content vertical alignment: Align content vertically in column. This option is only needed if a background color is set. Otherwise use the **Alignment** option of the outer `row` block.\n* Padding: Define padding inside the column.\n\n### Button\n\n#### Options\n\n* Style: Choose the styling of the button.\n* Open in new tab: Choose if link should be opened in a new tab.\n* Rel: Set rel attribute of the link.\n* Alignment: Horizontal alignment of the button.\n\n## Further Information\n\n* Documentation: [https://github.com/liip/bootstrap-blocks-wordpress-plugin](https://github.com/liip/bootstrap-blocks-wordpress-plugin)\n* WordPress Plugin: [https://wordpress.org/plugins/wp-bootstrap-blocks](https://wordpress.org/plugins/wp-bootstrap-blocks)\n* Changelog: [https://github.com/liip/bootstrap-blocks-wordpress-plugin/releases](https://github.com/liip/bootstrap-blocks-wordpress-plugin/releases)\n* Issue tracker: [https://github.com/liip/bootstrap-blocks-wordpress-plugin/issues](https://github.com/liip/bootstrap-blocks-wordpress-plugin/issues)\n\n## Supported Bootstrap versions\n\nThis plugin supports Bootstrap v4 and v5.\n\nThe version can be selected in the plugin settings (Settings \u003e Bootstrap Blocks) or by defining the `WP_BOOTSTRAP_BLOCKS_BOOTSTRAP_VERSION` constant in the `wp-config.php` file:\n\n* Bootstrap 4: `define( 'WP_BOOTSTRAP_BLOCKS_BOOTSTRAP_VERSION', '4' );`\n* Bootstrap 5 (default): `define( 'WP_BOOTSTRAP_BLOCKS_BOOTSTRAP_VERSION', '5' );`\n\nPossible values right now are `'4'` or `'5'`. By default Bootstrap version **5** is selected.\n\n## CSS Grid\n\nThe [CSS grid](https://getbootstrap.com/docs/5.1/layout/css-grid/) (supported with Bootstrap \u003e= 5.1.0) can be enabled in the plugin settings (Settings \u003e Bootstrap Blocks) or by defining the `WP_BOOTSTRAP_BLOCKS_ENABLE_CSS_GRID` constant in the `wp-config.php` file:\n\neg. `define( 'WP_BOOTSTRAP_BLOCKS_ENABLE_CSS_GRID', true );`\n\nWhen the CSS grid is enabled the `row` and the `column` blocks will use custom templates for the rendering process:\n\n* Row: `row-css.grid.php`\n* Column: `column-css-grid.php`\n\nThe support is still experimental since it's also marked as experimental in the Bootstarp library. Please read the official [Bootstrap documentation](https://getbootstrap.com/docs/5.1/layout/css-grid/) to get more information on how to use it.\n\n## Bootstrap library\n\nPlease be aware that this plugin does not include the Bootstrap library in your website. You need to do this by yourself.\nWe decided not to include the library so that you can modify Bootstrap to your own needs before loading it.\n\nThe easiest way to do this is to add the following to your theme's `functions.php`:\n\n```php\nfunction mytheme_load_bootstrap() {\n    if ( is_admin() ) {\n        return;\n    }\n\n    wp_enqueue_style( 'bootstrap', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css', array(), '4.3.1' );\n    wp_deregister_script( 'jquery' ); // Remove WP jQuery version\n    wp_enqueue_script( 'jquery', 'https://code.jquery.com/jquery-3.3.1.slim.min.js', array(), '3.3.1', true );\n    wp_enqueue_script( 'popper.js', 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js', array(), '1.14.7', true );\n    wp_enqueue_script( 'bootstrap', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js', array(), '4.3.1', true );\n}\nadd_action( 'wp_enqueue_scripts', 'mytheme_load_bootstrap' );\n```\n\n## Templates\n\nAll blocks are implemented as [dynamic blocks](https://wordpress.org/gutenberg/handbook/designers-developers/developers/tutorials/block-tutorial/creating-dynamic-blocks/).\nThis makes it possible to overwrite the template of a block in your theme.\n\nTo overwrite a block template create a folder called `wp-bootstrap-blocks/` in your theme directory.\nYou can copy the original template from `wp-bootstrap-blocks/src/templates/\u003cblockname\u003e.php` as a starting point and adjust it to your needs.\n\n## PHP Filters\n\nThe plugin provides the following PHP filters.\nPlease visit the following page to get more information about PHP filters: \u003chttps://developer.wordpress.org/reference/functions/add_filter/\u003e.\n\n### wp_bootstrap_blocks_template_path\n\nChanges the default theme directory name (`wp-bootstrap-blocks/`).\n\n#### Usage\n\n```php\nadd_filter( 'wp_bootstrap_blocks_template_path', 'my_template_path', 10, 1 );\n\nfunction my_template_path( $template_path ) {\n    return 'block-templates/';\n}\n```\n\n#### Parameters\n\n* `$template_path` (`string`) Template directory name in theme. (Default: `'wp-bootstrap-blocks/'`)\n\n### wp_bootstrap_blocks_get_template\n\nPossibility to overwrite the located template path before it gets loaded.\n\n#### Parameters\n\n* `$located` (`string`) located file path.\n* `$template_name` (`string`) template name which was requested.\n* `$template_path` (`string`) path to template directory.\n* `$default_path` (`string`) default template directory path.\n\n#### Usage\n\n```php\nadd_filter( 'wp_bootstrap_blocks_get_template', 'my_located_template', 10, 4 );\n\nfunction my_located_template( $located, $template_name, $template_path, $default_path ) {\n    return 'mytheme/special-templates/block.php';\n}\n```\n\n### wp_bootstrap_blocks_locate_template\n\nPossibility to overwrite the located template path.\n\n#### Parameters\n\n* `$template` (`string`) located file path.\n* `$template_name` (`string`) template name which was requested.\n* `$template_path` (`string`) path to template directory.\n\n#### Usage\n\n```php\nadd_filter( 'wp_bootstrap_blocks_locate_template', 'my_template_locater', 10, 3 );\n\nfunction my_template_locater( $template, $template_name, $template_path ) {\n    return 'mytheme/special-templates/block.php';\n}\n```\n\n### wp_bootstrap_blocks_row_classes\n\nChange classes of row block.\n\n#### Parameters\n\n* `$classes` (`array`) Classes which are added to the block template.\n* `$attributes` (`array`) Attributes of the block.\n\n#### Usage\n\n```php\nadd_filter( 'wp_bootstrap_blocks_row_classes', 'my_custom_row_classes', 10, 2 );\n\nfunction my_custom_row_classes( $classes, $attributes ) {\n    return [ 'my', 'custom', 'classes' ];\n}\n```\n\n### wp_bootstrap_blocks_row_css_grid_classes\n\nChange classes of row block when CSS grid is enabled.\n\n#### Parameters\n\n* `$classes` (`array`) Classes which are added to the block template.\n* `$attributes` (`array`) Attributes of the block.\n\n#### Usage\n\n```php\nadd_filter( 'wp_bootstrap_blocks_row_css_grid_classes', 'my_custom_row_css_grid_classes', 10, 2 );\n\nfunction my_custom_row_css_grid_classes( $classes, $attributes ) {\n    return [ 'my', 'custom', 'classes' ];\n}\n```\n\n### wp_bootstrap_blocks_row_css_grid_styles\n\nChange inline styles of row block when CSS grid is enabled.\n\n#### Parameters\n\n* `$styles` (`string`) Inline styles which are added to the block template.\n* `$attributes` (`array`) Attributes of the block.\n\n#### Usage\n\n```php\nadd_filter( 'wp_bootstrap_blocks_row_css_grid_styles', 'my_custom_row_css_grid_styles', 10, 2 );\n\nfunction my_custom_row_css_grid_styles( $styles, $attributes ) {\n    return '--bs-gap: 3rem;';\n}\n```\n\n### wp_bootstrap_blocks_column_classes\n\nChange classes of column block.\n\n#### Parameters\n\n* `$classes` (`array`) Classes which are added to the block template.\n* `$attributes` (`array`) Attributes of the block.\n\n#### Usage\n\n```php\nadd_filter( 'wp_bootstrap_blocks_column_classes', 'my_custom_column_classes', 10, 2 );\n\nfunction my_custom_column_classes( $classes, $attributes ) {\n    return [ 'my', 'custom', 'classes' ];\n}\n```\n\n### wp_bootstrap_blocks_column_css_grid_classes\n\nChange classes of column block when CSS grid is enabled.\n\n#### Parameters\n\n* `$classes` (`array`) Classes which are added to the block template.\n* `$attributes` (`array`) Attributes of the block.\n\n#### Usage\n\n```php\nadd_filter( 'wp_bootstrap_blocks_column_css_grid_classes', 'my_custom_column_css_grid_classes', 10, 2 );\n\nfunction my_custom_column_css_grid_classes( $classes, $attributes ) {\n    return [ 'my', 'custom', 'classes' ];\n}\n```\n\n### wp_bootstrap_blocks_column_content_classes\n\nChange classes of the inner content of the column block.\n\n#### Parameters\n\n* `$classes` (`array`) Classes which are added to the block template.\n* `$attributes` (`array`) Attributes of the block.\n\n#### Usage\n\n```php\nadd_filter( 'wp_bootstrap_blocks_column_content_classes', 'my_custom_column_content_classes', 10, 2 );\n\nfunction my_custom_column_content_classes( $classes, $attributes ) {\n    return [ 'my', 'custom', 'classes' ];\n}\n```\n\n### wp_bootstrap_blocks_column_css_grid_content_classes\n\nChange classes of the inner content of the column block when CSS grid is enabled.\n\n#### Parameters\n\n* `$classes` (`array`) Classes which are added to the block template.\n* `$attributes` (`array`) Attributes of the block.\n\n#### Usage\n\n```php\nadd_filter( 'wp_bootstrap_blocks_column_css_grid_content_classes', 'my_custom_column_css_grid_content_classes', 10, 2 );\n\nfunction my_custom_column_css_grid_content_classes( $classes, $attributes ) {\n    return [ 'my', 'custom', 'classes' ];\n}\n```\n\n### wp_bootstrap_blocks_container_classes\n\nChange classes of container block.\n\n#### Parameters\n\n* `$classes` (`array`) Classes which are added to the block template.\n* `$attributes` (`array`) Attributes of the block.\n\n#### Usage\n\n```php\nadd_filter( 'wp_bootstrap_blocks_container_classes', 'my_custom_container_classes', 10, 2 );\n\nfunction my_custom_container_classes( $classes, $attributes ) {\n    return [ 'my', 'custom', 'classes' ];\n}\n```\n\n### wp_bootstrap_blocks_button_classes\n\nChange classes of button block.\n\n#### Parameters\n\n* `$classes` (`array`) Classes which are added to the block template.\n* `$attributes` (`array`) Attributes of the block.\n\n#### Usage\n\n```php\nadd_filter( 'wp_bootstrap_blocks_button_classes', 'my_custom_button_classes', 10, 2 );\n\nfunction my_custom_button_classes( $classes, $attributes ) {\n    return [ 'my', 'custom', 'classes' ];\n}\n```\n\n### wp_bootstrap_blocks_button_wrapper_classes\n\nChange classes of button block wrapper.\n\n#### Parameters\n\n* `$classes` (`array`) Classes which are added to the block template.\n* `$attributes` (`array`) Attributes of the block.\n\n#### Usage\n\n```php\nadd_filter( 'wp_bootstrap_blocks_button_wrapper_classes', 'my_custom_button_wrapper_classes', 10, 2 );\n\nfunction my_custom_button_wrapper_classes( $classes, $attributes ) {\n    return [ 'my', 'custom', 'classes' ];\n}\n```\n\n### wp_bootstrap_blocks_row_default_attributes\n\nModify default attributes of the row block.\n\n#### Parameters\n\n* `$default_attributes` (`array`) Default attributes of row block.\n    * `template` (`string`) Name of default template of row block (Default: `'1-1'`)\n    * `noGutters` (`boolean`) Defines if noGutters option should be selected or not (Default: `false`)\n    * `alignment` (`'left'` | `'center'` | `'right'`) Default horizontal alignment of inner columns (Default: `''`)\n    * `verticalAlignment` (`'top'` | `'center'` | `'bottom'`) Default vertical alignment of inner columns (Default: `''`)\n    * `editorStackColumns` (`boolean`) Defines if editorStackColumns option should be selected by default or not (Default: `false`)\n    * `horizontalGutters` (`string`) Default horizontal gutters size (Default: `''`)\n    * `verticalGutters` (`string`) Default vertical gutters size (Default: `''`)\n    * `cssGridGutters` (`string`) Default gutters size when CSS grid is enabled (Default: `''`)\n\n#### Usage\n\n```php\nadd_filter( 'wp_bootstrap_blocks_row_default_attributes', 'my_row_default_attributes', 10, 1 );\n\nfunction my_row_default_attributes( $default_attributes ) {\n    $default_attributes['template'] = '1-2';\n    $default_attributes['noGutters'] = true;\n    $default_attributes['alignment'] = 'right';\n    $default_attributes['verticalAlignment'] = 'bottom';\n    $default_attributes['editorStackColumns'] = true;\n    $default_attributes['horizontalGutters'] = 'gx-5';\n    $default_attributes['verticalGutters'] = 'gy-3';\n    return $default_attributes;\n}\n```\n\n### wp_bootstrap_blocks_column_default_attributes\n\nModify default attributes of the column block.\n\n#### Parameters\n\n* `$default_attributes` (`array`) Default attributes of column block.\n    * `sizeXxl` (`int`) Default xxl column size (Default: `0`)\n    * `sizeXl` (`int`) Default xl column size (Default: `0`)\n    * `sizeLg` (`int`) Default lg column size (Default: `0`)\n    * `sizeMd` (`int`) Default md column size (Default: `0`)\n    * `sizeSm` (`int`) Default sm column size (Default: `0`)\n    * `sizeXs` (`int`) Default xs column size (Default: `12`))\n    * `equalWidthXxl` (`boolean`) Defines if equal-width xxl option should be selected or not (Default: `false`)\n    * `equalWidthXl` (`boolean`) Defines if equal-width xl option should be selected or not (Default: `false`)\n    * `equalWidthLg` (`boolean`) Defines if equal-width lg option should be selected or not (Default: `false`)\n    * `equalWidthMd` (`boolean`) Defines if equal-width md option should be selected or not (Default: `false`)\n    * `equalWidthSm` (`boolean`) Defines if equal-width sm option should be selected or not (Default: `false`)\n    * `equalWidthXs` (`boolean`) Defines if equal-width xs option should be selected or not (Default: `false`)\n    * `bgColor` (`string`) Background color of column (Default: `''`)\n    * `contentVerticalAlignment` (`'top'` | `'center'` | `'bottom'`) Default vertical alignment of content (Default: `''`)\n    * `padding` (`string`) Padding inside column (Default: `''`)\n\n#### Usage\n\n```php\nadd_filter( 'wp_bootstrap_blocks_column_default_attributes', 'my_column_default_attributes', 10, 1 );\n\nfunction my_column_default_attributes( $default_attributes ) {\n    $default_attributes['sizeLg'] = 4;\n    $default_attributes['sizeMd'] = 6;\n    $default_attributes['equalWidthXl'] = true;\n    $default_attributes['bgColor'] = 'primary';\n    $default_attributes['padding'] = 'p-3';\n    $default_attributes['contentVerticalAlignment'] = 'bottom';\n    return $default_attributes;\n}\n```\n\n### wp_bootstrap_blocks_container_default_attributes\n\nModify default attributes of the container block.\n\n#### Parameters\n\n* `$default_attributes` (`array`) Default attributes of container block.\n    * `isFluid` (`boolean`) Defines if container should be fluid or not (Default: `false`)\n    * `marginAfter` (`string`) Default margin after container block (Default: `'mb-2'`)\n\n#### Usage\n\n```php\nadd_filter( 'wp_bootstrap_blocks_container_default_attributes', 'my_container_default_attributes', 10, 1 );\n\nfunction my_container_default_attributes( $default_attributes ) {\n    $default_attributes['isFluid'] = true;\n    $default_attributes['fluidBreakpoint'] = 'md';\n    $default_attributes['marginAfter'] = 'mb-3';\n    return $default_attributes;\n}\n```\n\n### wp_bootstrap_blocks_button_default_attributes\n\nModify default attributes of the button block.\n\n#### Parameters\n\n* `$default_attributes` (`array`) Default attributes of button block.\n    * `url` (`string`) Default url of the button (Default: `''`)\n    * `linkTarget` (`string`) Default link target (Default: `''`). Possible values:\n        * `''`: Target attribute empty\n        * `_blank`: Target attribute is set to `_blank`\n    * `rel` (`string`) Default rel attribute of the link (Default: `''`)\n    * `text` (`string`) Default text of the button (Default: `''`)\n    * `style` (`string`) Default style of the button (Default: `'primary'`)\n    * `alignment` (`string`) Default alignment of the button (Default: `''`)\n\n#### Usage\n\n```php\nadd_filter( 'wp_bootstrap_blocks_button_default_attributes', 'my_button_default_attributes', 10, 1 );\n\nfunction my_button_default_attributes( $default_attributes ) {\n    $default_attributes['url'] = 'https://getbootstrap.com/';\n    $default_attributes['linkTarget'] = '_blank';\n    $default_attributes['rel'] = 'noreferrer noopener';\n    $default_attributes['text'] = 'Bootstrap';\n    $default_attributes['style'] = 'secondary';\n    $default_attributes['alignment'] = 'right';\n    return $default_attributes;\n}\n```\n\n### wp_bootstrap_blocks_enqueue_block_assets\n\nPossibility to disable enqueuing block assets.\n\n#### Parameters\n\n* `$enqueue_block_assets` (`boolean`) Defines if block assets should be enqueued. (Default: `true`)\n\n#### Usage\n\n```php\nadd_filter( 'wp_bootstrap_blocks_enqueue_block_assets', 'disable_enqueue_block_assets', 10, 1 );\n\nfunction disable_enqueue_block_assets( $enqueue_block_assets ) {\n    // Disable enqueuing block assets\n    return false;\n}\n```\n\n## PHP Actions\n\n### wp-bootstrap-blocks_updated\n\nFires when a new version of the plugin is used for the first time.\n\n#### Parameters\n\n* `$new_version` (`string`) New version number.\n* `$old_version` (`string`) Old version number.\n\n#### Usage\n\n```php\nadd_action( 'wp-bootstrap-blocks_updated', 'my_after_plugin_update', 10, 2 );\n\nfunction my_after_plugin_update( $new_version, $old_version ) {\n    echo \"wp-bootstrap-blocks got updated from v\" . $old_version . \" to v\" . $new_version;\n}\n```\n\n## JavaScript Filters\n\nThe plugin provides the following JavaScript filters.\nThey can be used by enqueuing a custom JavaScript file which implements those filters.\n\nExample:\n\nIf you have a script called `block-filters.js` inside your theme root you can enqueue it by adding the following code to your `functions.php` file.\n\n```php\nfunction mytheme_enqueue_block_editor_assets() {\n\twp_enqueue_script( 'block-filters', get_stylesheet_directory_uri() . '/block-filters.js', array( 'wp-hooks' ), '1.0.0', true );\n}\nadd_action( 'enqueue_block_editor_assets', 'mytheme_enqueue_block_editor_assets' );\n```\n\nPlease visit the following page to get further instructions on how to use JavaScript filters: \u003chttps://developer.wordpress.org/block-editor/developers/filters/block-filters/\u003e.\n\n### wpBootstrapBlocks.button.styleOptions\n\nModify available button styles.\n\n#### Usage\n\n```javascript\nfunction myButtonStyleOptions( styleOptions ) {\n\tstyleOptions.push( {\n\t\tlabel: 'My Option',\n\t\tvalue: 'my-option',\n\t\tbgColor: '#ff0000',\n\t\ttextColor: '#ffffff',\n\t} );\n\treturn styleOptions;\n}\nwp.hooks.addFilter(\n\t'wpBootstrapBlocks.button.styleOptions',\n\t'myplugin/wp-bootstrap-blocks/button/styleOptions',\n\tmyButtonStyleOptions\n);\n```\n\n#### Parameters\n\n* `styleOptions` (`Array`) Array with button style options.\n\nEach `styleOption` object should have the following attributes:\n\n* `label` (`string`) Label displayed in the select box.\n* `value` (`string`) Value of the chosen option.\n* `bgColor` (`string`) Background color of button shown in the editor.\n* `textColor` (`string`) Text color of button shown in the editor.\n\n### wpBootstrapBlocks.container.marginAfterOptions\n\nModify margin after options.\n\n#### Usage\n\n```javascript\nfunction myMarginAfterOptions( marginAfterOptions ) {\n\tmarginAfterOptions.push( { label: 'Huge', value: 'mb-8' } );\n\treturn marginAfterOptions;\n}\nwp.hooks.addFilter(\n\t'wpBootstrapBlocks.container.marginAfterOptions',\n\t'myplugin/wp-bootstrap-blocks/container/marginAfterOptions',\n\tmyMarginAfterOptions\n);\n```\n\n#### Parameters\n\n* `marginAfterOptions` (`Array`) Array margin options.\n\nEach `marginAfterOption` object should have the following attributes:\n\n* `label` (`string`) Label displayed in the select box.\n* `value` (`string`) Value of the chosen option.\n\n### wpBootstrapBlocks.row.templates\n\nDefine block templates.\n\n#### Usage\n\n```javascript\nfunction myRowTemplates( templates ) {\n\ttemplates.push( {\n\t\tname: '1-3',\n\t\ttitle: '2 Columns (1:3)',\n\t\ticon: 'layout',\n\t\ttemplateLock: 'all',\n\t\ttemplate: [\n\t\t\t[\n\t\t\t\t'wp-bootstrap-blocks/column',\n\t\t\t\t{\n\t\t\t\t\tsizeMd: 3,\n\t\t\t\t},\n\t\t\t],\n\t\t\t[\n\t\t\t\t'wp-bootstrap-blocks/column',\n\t\t\t\t{\n\t\t\t\t\tsizeMd: 9,\n\t\t\t\t},\n\t\t\t],\n\t\t],\n\t} );\n\treturn templates;\n}\nwp.hooks.addFilter(\n\t'wpBootstrapBlocks.row.templates',\n\t'myplugin/wp-bootstrap-blocks/row/templates',\n\tmyRowTemplates\n);\n```\n\n#### Parameters\n\n* `templates` (`array`) List of template objects.\n\nEach `template` object should have the following attributes:\n\n* `name` (`string`) Unique identifier of the template\n* `title` (`string`) Name of template\n* `icon` (`WPElement|string`) An element or [Dashicon](https://developer.wordpress.org/resource/dashicons/) slug to show as a visual approximation of the template.\n* `templateLock` (`string|false`)\n    * `false`: Columns can be added and removed\n    * `all`: Columns can't be changed\n* `template` (`Array\u003cArray\u003e`) see [template documentation](https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-templates/#api)\n    * Name of block. (Only `wp-bootstrap-blocks/column` supported!)\n    * Attributes of column\n\n### wpBootstrapBlocks.row.enableCustomTemplate\n\nEnable/Disable custom option in row templates.\n\n#### Usage\n\n```javascript\n// Disable custom row template\nwp.hooks.addFilter(\n\t'wpBootstrapBlocks.row.enableCustomTemplate',\n\t'myplugin/wp-bootstrap-blocks/row/enableCustomTemplate',\n\t() =\u003e false\n);\n```\n\n#### Parameters\n\n* `enableCustomTemplate` (`boolean`) Return true if custom row template should be enabled. (Default: `true`)\n\n### wpBootstrapBlocks.row.horizontalGuttersOptions\n\nModify available horizontal gutters options for row block.\n\n#### Usage\n\n```javascript\nfunction myRowHorizontalGuttersOptions( horizontalGuttersOptions ) {\n\thorizontalGuttersOptions.push( { label: 'Medium', value: 'gx-4' } );\n\treturn horizontalGuttersOptions;\n}\nwp.hooks.addFilter(\n\t'wpBootstrapBlocks.row.horizontalGuttersOptions',\n\t'myplugin/wp-bootstrap-blocks/row/horizontalGuttersOptions',\n\tmyRowHorizontalGuttersOptions\n);\n```\n\n#### Parameters\n\n* `horizontalGuttersOptions` (`Array`) Array of horizontal gutters options.\n\n### wpBootstrapBlocks.row.verticalGuttersOptions\n\nModify available vertical gutters options for row block.\n\n#### Usage\n\n```javascript\nfunction myRowVerticalGuttersOptions( verticalGuttersOptions ) {\n\tverticalGuttersOptions.push( { label: 'Medium', value: 'gy-4' } );\n\treturn verticalGuttersOptions;\n}\nwp.hooks.addFilter(\n\t'wpBootstrapBlocks.row.verticalGuttersOptions',\n\t'myplugin/wp-bootstrap-blocks/row/verticalGuttersOptions',\n\tmyRowVerticalGuttersOptions\n);\n```\n\n#### Parameters\n\n* `verticalGuttersOptions` (`Array`) Array of vertical gutters options.\n\n### wpBootstrapBlocks.row.cssGridGuttersOptions\n\nModify available CSS grid gutters options for row block.\n\n#### Usage\n\n```javascript\nfunction myRowCssGridGuttersOptions( cssGridGuttersOptions ) {\n\tcssGridGuttersOptions.push( { label: 'Medium', value: '1.5rem' } );\n\treturn cssGridGuttersOptions;\n}\nwp.hooks.addFilter(\n\t'wpBootstrapBlocks.row.cssGridGuttersOptions',\n\t'myplugin/wp-bootstrap-blocks/row/cssGridGuttersOptions',\n\tmyRowCssGridGuttersOptions\n);\n```\n\n#### Parameters\n\n* `cssGridGuttersOptions` (`Array`) Array of CSS grid gutters options.\n\n### wpBootstrapBlocks.column.bgColors\n\nModify available background colors for column block.\n\n#### Usage\n\n```javascript\nfunction myColumnBgColorOptions( bgColorOptions ) {\n\tbgColorOptions.push( {\n\t\tname: 'brand',\n\t\tcolor: '#6EA644',\n\t} );\n\treturn bgColorOptions;\n}\nwp.hooks.addFilter(\n\t'wpBootstrapBlocks.column.bgColorOptions',\n\t'myplugin/wp-bootstrap-blocks/column/bgColorOptions',\n\tmyColumnBgColorOptions\n);\n```\n\n#### Parameters\n\n* `bgColorOptions` (`Array`) Array of available background colors. Each element should be an object containing the `name` of the color and the `color` itself (see: \u003chttps://github.com/WordPress/gutenberg/tree/master/packages/components/src/color-palette\u003e).\n\n### wpBootstrapBlocks.column.paddingOptions\n\nModify available padding options for column block.\n\n#### Usage\n\n```javascript\nfunction myColumnPaddingOptions( paddingOptions ) {\n\tpaddingOptions.push( { label: 'Huge', value: 'p-8' } );\n\treturn paddingOptions;\n}\nwp.hooks.addFilter(\n\t'wpBootstrapBlocks.column.paddingOptions',\n\t'myplugin/wp-bootstrap-blocks/column/paddingOptions',\n\tmyColumnPaddingOptions\n);\n```\n\n#### Parameters\n\n* `paddingOptions` (`Array`) Array of padding options.\n\n## Developer information\n\n### Requirements\n\n* Node.js \u003e= 16.x\n* Docker\n\n### Installation\n\n1. Clone this repository\n\n1. Install composer dependencies\n\n    ```bash\n    curl -s https://getcomposer.org/installer | php\n    php composer.phar install\n    ```\n\n1. Install Node dependencies\n\n    ```bash\n    npm install\n    ```\n\n### Compile assets\n\nThe build process is based on the official [`@wordpress/scripts`](https://developer.wordpress.org/block-editor/packages/packages-scripts/) package.\n\n* `npm start`: Compiles the block in development mode. Watches for any changes and reports back any errors in your code.\n* `npm run lint`: Lints JavaScript, CSS and package.json files.\n* `npm run build`: Build production code of your blocks inside `build` folder.\n\n### Generate translation files\n\n1. To extract the labels and generate the `languages/wp-bootstrap-blocks.pot` file run the following command:\n\n    ```bash\n    ./scripts/translations/extract-messages.sh\n    ```\n\n1. To update the translation files (`*.po`) run the following command:\n\n    ```bash\n    ./scripts/translations/update-translation-files.sh\n    ```\n\n1. To generate the `*.mo` and `*.json` translation files run the following command:\n\n    ```bash\n    ./scripts/translations/compile-translation-files.sh\n    ```\n\n### Setup local dev environment\n\nThe following commands can be used to set up a local dev environment. See the official [documentation of `@wordpress/env`](https://developer.wordpress.org/block-editor/packages/packages-env/#command-reference) for a complete list of commands.\n\n* `npm run wp-env start`: Starts the Docker containers.\n* `npm run wp-env stop`: Stops the Docker containers.\n\n### Testing\n\nThere are two types of tests for this plugin:\n\n* PHPUnit Tests: Used to validate generated block output. Since this plugin uses dynamic blocks which are rendered on the server side we need to test them with PHPUnit tests.\n* Playwright E2E Tests: Used to validate block behaviour in the editor.\n\n#### PHPUnitTests\n\nThe PHPUnit tests are stored in the `phpunit/` directory.\nThey use fixtures to validate the block output.\nEach block variant which should be tested needs a manually created file called `blockname__variant.html`.\nThis file contains the block presentation in the editor (a.k.a. the HTML comment presentation) and needs to be stored in the following folder:\n\n`phpunit/blockname/fixtures/blockname_variant.html`\n\nThe second fixture of each variant is the `blockname_variant.output.html` file.\nThis file gets automatically generated if the test runs for the first time and the environment variable `WP_BOOTSTRAP_BLOCKS_RECORD` in the `phpunit.xml.dist` file is set to `true`.\n\nTo run the tests use the following command:\n\n```bash\nnpm run test:unit:php\n```\n\nor the following command to run a specific test:\n\n```bash\nnpm run test:unit:php -- --filter 'my_test'\n```\n\n#### Playwright E2E Tests\n\nThe Playwright E2E Tests are stored in the `playwright` directory.\n\nTo run the tests use the following command:\n\n```bash\nnpm run test:e2e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliip%2Fbootstrap-blocks-wordpress-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fliip%2Fbootstrap-blocks-wordpress-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliip%2Fbootstrap-blocks-wordpress-plugin/lists"}