All blocks

Basic blocks

Add and edit blocks within your content

GitBook is a block-based editor, meaning you can add different kinds of blocks to your content — from standard text and images to interactive blocks. Your pages can include any combination of blocks you want, and there’s no limit to the number of blocks you can have on a page.

Many blocks can be nested! Try dragging a heading or paragraph into here 👀

Gimme lists

done
finito
klaar
afgerond?

no order here
still none

Numero uno
Dos
Tres

Something philosophical 💭

Chonky blocks

Improved

We’ve tweaked the prompt used for GitBook Assistant to improve the page context and reduce the number of repeated searches. We’re constantly improving this, so there’ll be more fine tuning in the coming weeks and months.
Part improvement, part fix: We’ve added another filter to all the charts in the Traffic page in your site’s Insights panel. Before, the page only filtered the first chart to show page events — other charts didn’t have this filter, which resulted in some inconsistencies.

Fixed

Fixed a bug that would occur when some blocks (e.g. stepper, quote) only had a single block inside and you tried to open the Block options palette for that single block. Rather than the child block being selected, it would select the parent block. Now it will select the child block as expected.
Fixed the padding that appeared around the image options toolbar with a recent update.
Added aliases to the code block syntax selection menu, and fixed an issue that meant the text was too light.
Fixed the Share modal not showing members who have read access to a space due to the space being published to a site.
Fixed an issue that meant repos with multiple project directories could sometimes have their assets deduplicated in a strange way after our recent deduplication update. Now imports can happen from outside the project directory, and on export any files imported from outside the project directory will be copied into the project directory to correct its path.
Fixed a bug in the editor that meant you couldn’t edit a page slug on long, nested paths. Now the slug text entry box will be split equally and you can view the full nested slug in a tooltip when hovering over that section of the box.
Fixed an issue that meant it could be difficult to see menu items in Firefox due to the browser’s CSS scroll fade appearing incorrectly.
Fixed the position of the sidebar’s Drag to resize trigger area. It’s now aligned with the edge of the sidebar, making it easier to grab.
Fixed a bug that meant the inline formatting palette could overflow off the side of the screen. It now stays neatly in bounds, and flips to below your selected text if there isn’t room above it.

    // In readonly we do not want to show the controls.
    if (readOnly) {
        return (
            <BlockLayout
                renderMode={layout.renderMode}
                className={blockLayoutWidthClassName}
                {...containerProps}
            >
                <EditorWidthLayout>
                    <CompTag
                        {...attributes}
                        ref={domRef}
                        className={clsx(
                            'relative flex w-full',
                            layout.blockStyle.className,
                            props.className
                        )}
                        style={{ ...layout.blockStyle.style, ...blockAlignmentStyle }}
                    >
                        {/* Right gutter button */}
                        {RightGutterComponent && layout.rightGutterComponent ? (
                            <div
                                className={clsx(
                                    'flex',
                                    layout.rightGutterComponent.hitArea.className
                                )}
                                style={layout.rightGutterComponent.hitArea.style}
                            >
                                <RightGutterComponent
                                    nodeKey={node.key}
                                    visible={isHovered}
                                    shortcutsActive={isFocused}
                                    buttonSize={layout.rightGutterComponent.size}
                                    style={layout.rightGutterComponent.style}
                                    readOnly={readOnly}
                                />
                            </div>
                        ) : null}
                        {innerContent}
                    </CompTag>
                </EditorWidthLayout>
            </BlockLayout>
        );
    }