Advanced Bootstrap Blocks

설명

This plugin adds flexible Bootstrap 4 blocks to the WordPress editor for creating custom page layouts using the Bootstrap grid.

Are you using Advanced Bootstrap Blocks? Write a review!

Blocks

Advanced Bootstrap Blocks adds the following Bootstrap 4 blocks to the WordPress editor:

  • Container (fixed-width or fluid, with background image settings)
  • Row
  • Column
  • Button and Button Group
  • Card (with CardHeader, CardBody, CardFooter)

Block Templates

Do you need to create standard templates for pages or posts? The WordPress editor lets you define custom block templates inside your theme.

The example below may get you started. Visit the WordpPress Block Editor Handbook to learn more about supercharging your WordPress themes with blocks templates.

<?php
if(in_array('advanced-bootstrap-blocks/advanced-bootstrap-blocks.php', apply_filters('active_plugins', get_option('active_plugins')))){ 
    // do stuff only if the Advanced Bootstrap Blocks plugin is active              
    add_action( 'init', 'advancedbootstrapblocks_register_page_template' );
    function advancedbootstrapblocks_register_page_template() {
        $post_type_object = get_post_type_object( 'page' );
        $isFluid = get_theme_mod( 'understrap_container_type' ) === 'container-fluid'; 
        $post_type_object->template = [
            [ 'advanced-bootstrap-blocks/container', 
                ['className'=>'py-5', 'isWrapped' => $isFluid, 'isFluid' => false ], 
                [
                    [ 'advanced-bootstrap-blocks/row', 
                        [],
                        [
                            [ 'advanced-bootstrap-blocks/column', 
                                ['className'=>'col-md-8 offset-md-2 text-center'], 
                                [
                                    ['core/heading', 
                                        [ 'className' => 'display-4', 'level' => 1, 'placeholder' => 'Hello, World!', ], 
                                        []
                                ],
                                    [ 'core/paragraph', 
                                        ['className' => 'lead', 'placeholder' => 'Lorem ipsum dolor sit amet.', ], 
                                        []
                                    ],
                                ]
                            ]
                        ]
                    ]
                ]
            ],
        ];
    }
}

스크린샷

블록

이 플러그인은 3(을)를 제공합니다.

advanced-bootstrap-blocks/container
Advanced Bootstrap Blocks
advanced-bootstrap-blocks/row
Row (BS4)
advanced-bootstrap-blocks/column
Column (BS4)

FAQ

This plugin broke my website!

Probably not. Try disabling any other page-builder plugins you have activated.

Does this plugin add Bootstrap styles or scripts to my theme?

This plugin does not add styles or scripts to your website. Necessary Bootstrap 4 will be available in the editor but needs to be added to your theme for these blocks to appear correctly on your public-facing website.

This plugin is giving me trouble. Can you help?

Yes. This plugin is under active development and maintenance–your feedback is important. Please submit issues, feature requests through the support page, or browse the source at https://gitlab.com/helpful.dev/advanced-bootstrap-blocks.

후기

2019년 November 28일
... and that's not saying much because the others were broken or terrible. Even still, this one is on the right track, and I'm happy to see that at least somebody is getting it right. Thanks for your hard work!
2019년 September 6일
Great plugin. But. 1. It is impossible to manage many columns col-12, because column container is placed on the right side of previous column. Next column container witch size 12, should be placed under previous col-12 column. 2. It is impossible to move containers between blocks.
2019년 August 1일
Nice work – with this plugin and the power of Bootstrap I am finally convinced using the new Gutenberg Editor.
모든 5 평가 읽기

기여자 & 개발자

“Advanced Bootstrap Blocks”(은)는 오픈 소스 소프트웨어입니다. 다음의 사람들이 이 플러그인에 기여하였습니다.

기여자

자국어로 “Advanced Bootstrap Blocks”(을)를 번역하십시오.

개발에 관심이 있으십니까?

코드 탐색하기는, SVN 저장소를 확인하시거나, 개발 기록RSS로 구독하십시오.

변경이력

1.3

  • Remove default block classnames
  • Improve editor block outlines
  • Legacy support for wp 5.1+
  • Bugfix: fix issue with inline svg icon

1.2.4-1.2.6

  • Hotfix: Fix and improve missing block outlines in WP 5.4
  • Improve Column block display

1.2.3

  • Feature: Add Offset controls to Column inspector

1.2.2

  • Feature: Add Column class controls
  • Add block template example to README

1.2.1

  • Bugfix: Remove unsupported regex from Padding and Block margin controls

1.2.0

  • Feature: Add Block Padding and Block Margin controls
  • Bugfix: Improve ‘Bootstrap Classes’ filtering
  • Bugfix: Fix bad link in README

1.1.10

  • Bugfix: Remove front-end dependency injection

1.1.9

  • Bugfix: Add outline to Row and Column blocks outside of Container

1.1.8

  • Bugfix: Prevent long words from forcing Column blocks onto next row

1.1.7

  • Bugfix: Add’l fix to save Anchor (ID) when added to Container

1.1.6

  • Bugfix: Save Anchor (ID) when added to Container, Row, Column, and Button blocks

1.1.5

  • Add Anchor (ID) support to Container, Row, Column, and Button blocks
  • Bugfix: allow blocks to be dropped in empty Column blocks

1.1.4

  • Override block outlines with original outline colors
  • Replaced icon on all blocks with Bootstrap-branded icon
  • Updated default state of Card block to match basic Bootstrap 4 example
  • Retitled Container “Background Settings” to “Background Image Settings”
  • Minor changes to block editor UI

1.1.3

  • Added Button Group block
  • Removed colored block outlines (made redundant by WP 5.3 release)
  • Modified initial state of Container block (defaults to 3 columns)
  • Modified initial state of Card block (includes Card Header, Card Body, and Card Footer)

1.1.1-1.1.2

  • Removed vertical margin from blocks in WordPress v5.3

1.1.0

  • Added Card, CardHeader, and CardBody blocks
  • Added Bootstrap Classes inspector utility for toggling BS4 classes

1.0.10

  • Added background size, repeat, and position settings to Container Background Image settings
  • Fixed namespacing and inheritance issues with editor-specific Bootstrap grid styles
  • Removed unneeded wrapping div from around Container in WP editor

1.0.9

  • Fixed bug with Container save markup
  • Fixed bug with Button text state

1.0.8

  • Added background-image selector to Container block (adds style="background-image:url();" to Container markup)

1.0.7

  • Refined Button block (add URL picker, button text is directly editable)
  • General UI improvements

1.0.6

  • Made column .offset-* classes available in editor
  • Updated Button editor UI (per standards in WP editor handbook)
  • Improved block selection w/ CSS pointer-events

1.0.5

  • All Bootstrap styles now included in editor by default (this may change in the future)
  • Fixed bug with omission of custom container classNames in editor
  • Increased padding around main container layout

1.0.4

  • Added basic Button component (with style, block, size, outline, new-window settings)
  • Minor README changes