TYPO3 Content Blocks

https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/
Admin
TYPO3 Content Blocks is a structured approach to define content elements in TYPO3 using YAML...
Tokens:98,198
Snippets:1,737
Trust Score:10
Update:2 months ago
Show doc for...
Tokens:
Raw
### Run command on non-composer installations

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/Commands/Make/Index.html

Use the direct path to the binary for non-composer TYPO3 setups.

```bash
typo3/sysext/core/bin/typo3 make:content-block
```

--------------------------------

### Install Migration Extension

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/Migrations/Mask/Index.html

Install the migration tool via composer to begin the automated conversion process.

```bash
composer req nhovratov/mask-to-content-blocks
```

--------------------------------

### Install Content Blocks via Composer

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/Installation/Index.html

Use this command to install the extension in a Composer-based TYPO3 project.

```bash
composer require friendsoftypo3/content-blocks
```

--------------------------------

### Example labels.xlf output

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/Commands/LanguageGenerate/Index.html

Sample structure of a generated labels.xlf file.

```xml
<?xml version="1.0"?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
    <file datatype="plaintext" original="labels.xlf" source-language="en" date="2023-12-03T08:37:53+00:00" product-name="demo/demo">
        <header/>
        <body>
            <trans-unit id="title">
                <source>My demo title</source>
            </trans-unit>
            <trans-unit id="description">
                <source>This is just a demo/demo</source>
            </trans-unit>
            <trans-unit id="header.label">
                <source>Existing field override</source>
            </trans-unit>
            <trans-unit id="slug.label">
                <source>My Slug</source>
            </trans-unit>
            <trans-unit id="slug.description">
                <source>My Slug Description</source>
            </trans-unit>
            <trans-unit id="my_collection.label">
                <source>my_collection</source>
            </trans-unit>
            <trans-unit id="my_collection.text.label">
                <source>text</source>
            </trans-unit>
            <trans-unit id="my_collection.my_collection.label">
                <source>my_collection</source>
            </trans-unit>
            <trans-unit id="my_collection.my_collection.text.label">
                <source>text</source>
            </trans-unit>
            <trans-unit id="external_table.label">
                <source>external_table</source>
            </trans-unit>
            <trans-unit id="external_table_2.label">
                <source>external_table_2</source>
            </trans-unit>
            <trans-unit id="related_content.label">
                <source>related_content</source>
            </trans-unit>
            <trans-unit id="my-custom-key">
                <source>My translation</source>
            </trans-unit>
        </body>
    </file>
</xliff>
```

--------------------------------

### TypoScript Setup

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/Guides/CreateExtbasePlugin/Index.html

Configure the EXTBASEPLUGIN in TypoScript to map the plugin to the controller and template paths.

```typoscript
tt_content.vendor_artistslist.20 = EXTBASEPLUGIN
tt_content.vendor_artistslist.20 {
    extensionName = MyExtension
    pluginName = MyPlugin
    # If your controller returns a HTML response, set the template path like this:
    view {
        templateRootPaths.0 = EXT:site_package/ContentBlocks/ContentElements/artists/templates
    }
}
```

--------------------------------

### Install Content Blocks

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/Migrations/Mask/Index.html

Ensure the Content Blocks extension is installed in your project.

```bash
composer req friendsoftypo3/content-blocks
```

--------------------------------

### Example Controller

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/Guides/CreateExtbasePlugin/Index.html

A sample controller that retrieves data from the current content object and assigns it to the view.

```php
<?php

declare(strict_types=1);

namespace Vendor\MyVendor\Controller;

use Psr\Http\Message\ResponseInterface;
use TYPO3\CMS\Extbase\Mvc\Controller\ActionController;

class ArtistController extends ActionController
{
    public function listAction(): ResponseInterface
    {
        /** @var ContentObjectRenderer $contentObject */
        $contentObject = $this->request->getAttribute('currentContentObject');
        $dataFromTypoScript = $contentObject->data;

        $this->view->assign('data', $dataFromTypoScript);

        return $this->htmlResponse();
    }
}
```

--------------------------------

### Example content-blocks.yaml Configuration

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/Commands/Make/Index.html

Define default values for command options such as vendor, extension, and skeleton paths.

```yaml
vendor: nh
extension: content_blocks_examples
content-type: record-type
skeleton-path: folder1/content-block-skeletons
```

--------------------------------

### Example Output of List Command

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/_sources/Commands/List/Index.rst.txt

This is an example of the tabular output generated by the `content-blocks:list` command, showing details like vendor, name, extension, content-type, and table.

```bash
+-----------+-------------------+-------------------------+-----------------+-----------------------------+
| vendor    | name              | extension               | content-type    | table                       |
+-----------+-------------------+-------------------------+-----------------+-----------------------------+
| example   | tabs              | content_blocks_examples | Content Element | tt_content                  |
| example   | accordion         | content_blocks_examples | Content Element | tt_content                  |
| example   | card-group        | content_blocks_examples | Content Element | tt_content                  |
| example   | cta               | content_blocks_examples | Content Element | tt_content                  |
| example   | icon-group        | content_blocks_examples | Content Element | tt_content                  |
| example   | imageslider       | content_blocks_examples | Content Element | tt_content                  |
| example   | example-page-type | content_blocks_examples | Page Type       | pages                       |
| hov       | record1           | content_blocks_examples | Record Type     | tx_hov_domain_model_record1 |
| hov       | record2           | content_blocks_examples | Record Type     | tx_hov_domain_model_record1 |
| hov       | notype            | content_blocks_examples | Record Type     | tx_hov_domain_model_notype  |
+-----------+-------------------+-------------------------+-----------------+-----------------------------+
```

--------------------------------

### Lint Command Output Example

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/Commands/Lint/Index.html

Displays the output format when configuration errors are detected.

```text
+-----------------------------+---------------------------------------------------+
| Path                        | example/card-group | EXT:content_blocks_examples  |
+-----------------------------+---------------------------------------------------+
| /fields/3/fields/3/fields/0 | Additional object properties are not allowed: max |
+-----------------------------+---------------------------------------------------+


 [ERROR] Found 1 errors
```

--------------------------------

### Example interactive session

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/Commands/Make/Index.html

A sample flow of the interactive prompt when creating a Content Block.

```text
Choose the content type of your content block [Content Element]:
[content-element] Content Element
[page-type      ] Page Type
[record-type    ] Record Type
> content-element

Enter your vendor name:
> my-vendor

Enter your content block name:
> my-content-block-name

Choose an extension in which the content block should be stored:
[sitepackage] Test Package for content blocks
> sitepackage
```

--------------------------------

### Define Color Fields

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/singlehtml/Index.html

Examples for implementing the Color field type, including minimal setup and advanced usage with default values and pickers.

```yaml
name: example/color
fields:
  - identifier: color
    type: Color
```

```yaml
name: example/color
fields:
  - identifier: color
    type: Color
    autocomplete: true
    default: '#0000FF'
    valuePicker:
      items:
        - label: 'Red'
          value: #FF0000
        - label: 'Green'
          value: #008000
        - label: 'Blue'
          value: #0000FF
```

--------------------------------

### FSC Wrapper Example

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/Guides/FluidStyledContent/Index.html

Example of the HTML wrapper structure provided by fluid_styled_content.

```html
<div id="c32" class="frame frame-default frame-type-textpic frame-layout-0">
```

--------------------------------

### Define a Folder field

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/singlehtml/Index.html

Examples showing minimal and advanced configuration for a Folder field.

```yaml
name: example/folder
fields:
  - identifier: folder
    type: Folder
```

```yaml
name: example/folder
fields:
  - identifier: folder
    type: Folder
    elementBrowserEntryPoints:
      _default: '1:/styleguide/'
    minitems: 1
```

--------------------------------

### Advanced Checkbox Configurations

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/YamlReference/FieldTypes/Checkbox/Index.html

Examples demonstrating multiple checkboxes, toggle switches, and labeled toggle variants.

```yaml
name: example/checkbox
fields:
  - identifier: checkbox
    type: Checkbox
    items:
      - label: 'The first'
      - label: 'The second'
      - label: 'The third'
    default: 2
    cols: 3
```

```yaml
name: example/checkbox
fields:
  - identifier: toggle
    type: Checkbox
    renderType: checkboxToggle
    default: 1
```

```yaml
name: example/checkbox
fields:
  - identifier: toggle
    type: Checkbox
    renderType: checkboxLabeledToggle
    items:
      - label: 'Your label'
        labelChecked: 'Label checked'
        labelUnchecked: 'Label unchecked'
        invertStateDisplay: true
```

--------------------------------

### Example Command Output

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/Commands/List/Index.html

Displays the tabular format of the command output showing vendor, name, extension, content-type, and table.

```text
+-----------+-------------------+-------------------------+-----------------+-----------------------------+
| vendor    | name              | extension               | content-type    | table                       |
+-----------+-------------------+-------------------------+-----------------+-----------------------------+
| example   | tabs              | content_blocks_examples | Content Element | tt_content                  |
| example   | accordion         | content_blocks_examples | Content Element | tt_content                  |
| example   | card-group        | content_blocks_examples | Content Element | tt_content                  |
| example   | cta               | content_blocks_examples | Content Element | tt_content                  |
| example   | icon-group        | content_blocks_examples | Content Element | tt_content                  |
| example   | imageslider       | content_blocks_examples | Content Element | tt_content                  |
| example   | example-page-type | content_blocks_examples | Page Type       | pages                       |
| hov       | record1           | content_blocks_examples | Record Type     | tx_hov_domain_model_record1 |
| hov       | record2           | content_blocks_examples | Record Type     | tx_hov_domain_model_record1 |
| hov       | notype            | content_blocks_examples | Record Type     | tx_hov_domain_model_notype  |
+-----------+-------------------+-------------------------+-----------------+-----------------------------+
```

--------------------------------

### Define Relation Fields

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/singlehtml/Index.html

Examples for configuring Relation fields, ranging from minimal setups to advanced configurations with search and filtering.

```yaml
name: example/relation
fields:
  - identifier: record_select
    type: Relation
    allowed: 'some_table'
```

```yaml
name: example/relation
fields:
  - identifier: page_select
    type: Relation
    allowed: 'pages'
    maxitems: 1
    suggestOptions:
      default:
        additionalSearchFields: 'nav_title, url'
        addWhere: 'AND pages.doktype = 1'
```

--------------------------------

### Minimal DateTime configuration

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/YamlReference/FieldTypes/DateTime/Index.html

Basic examples showing how to define a DateTime field with different format settings.

```yaml
name: example/datetime
fields:
  - identifier: datetime
    type: DateTime
    format: date
```

```yaml
name: example/datetime
fields:
  - identifier: datetime
    type: DateTime
    format: datetime
    dbType: datetime
```

--------------------------------

### Advanced DateTime configuration

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/YamlReference/FieldTypes/DateTime/Index.html

A comprehensive example including default values, range constraints, and validation settings.

```yaml
name: example/datetime
fields:
  - identifier: datetime
    type: DateTime
    format: datetime
    default: '2023-02-11 12:00:00'
    disableAgeDisplay: true
    size: 20
    range:
      lower: '2019-01-31 12:00:00'
      upper: '2040-01-31 12:00:00'
    required: true
```

--------------------------------

### Advanced SelectNumber configuration

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/YamlReference/FieldTypes/SelectNumber/Index.html

An advanced example including field wizards for icons and a default value.

```yaml
name: example/select-number
fields:
 - identifier: select_number_icons
   type: SelectNumber
   fieldWizard:
     selectIcons:
       disabled: false
   default: 2
   items:
     - label: 'Image beside text (left)'
       value: 1
       icon: content-beside-text-img-left
     - label: 'Image beside text (right)'
       value: 2
       icon: content-beside-text-img-right
     - label: 'Image above text (center)'
       value: 3
       icon: content-beside-text-img-above-cent
```

--------------------------------

### Textarea field configurations

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/singlehtml/Index.html

Examples for defining basic, rich text, and advanced textarea fields.

```yaml
name: example/textarea
fields:
  - identifier: textarea
    type: Textarea
```

```yaml
name: example/richtext
fields:
  - identifier: textarea
    type: Textarea
    enableRichtext: true
    richtextConfiguration: full
```

```yaml
name: example/textarea
fields:
  - identifier: textarea
    type: Textarea
    default: "Default value"
    placeholder: "Placeholder text"
    required: true
    rows: 15
```

--------------------------------

### Minimal Select Field Configurations

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/YamlReference/FieldTypes/Select/Index.html

Basic examples for single and multiple selection fields using static items.

```yaml
name: example/select
fields:
  - identifier: select
    type: Select
    renderType: selectSingle
    items:
      - label: 'The first'
        value: one
      - label: 'The second'
        value: two
```

```yaml
name: example/select
fields:
  - identifier: select_side_by_side
    type: Select
    renderType: selectMultipleSideBySide
    items:
      - label: 'The first'
        value: one
      - label: 'The second'
        value: two
```

--------------------------------

### Define header thumbnail dimensions

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/YamlReference/FieldTypes/File/Index.html

Example of setting the width and height for the preview thumbnail in the inline header.

```yaml
appearance:
  headerThumbnail:
    width: 64
    height: 64
```

--------------------------------

### Uuid field configurations

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/singlehtml/Index.html

Examples for defining minimal and advanced Uuid input fields.

```yaml
name: example/uuid
fields:
  - identifier: uuid
    type: Uuid
```

```yaml
name: example/uuid
fields:
  - identifier: uuid
    type: Uuid
    size: 50
    version: 7
    enableCopyToClipboard: false
```

--------------------------------

### Configure elementBrowserEntryPoints

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/YamlReference/FieldTypes/Relation/Index.html

Sets the default starting page UID for the element browser.

```yaml
elementBrowserEntryPoints:
  _default: 42
```

--------------------------------

### Advanced Email field configuration

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/YamlReference/FieldTypes/Email/Index.html

An example demonstrating various settings including autocomplete, default values, placeholders, and required status.

```yaml
name: example/email
fields:
  - identifier: email
    type: Email
    autocomplete: true
    default: 'developer@localhost.de'
    placeholder: 'Enter your email address'
    required: true
```

--------------------------------

### Define Content Block Configuration

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/Guides/FluidStyledContent/Index.html

Example configuration for a Content Block including standard FSC fields via the basics property.

```yaml
name: vendor/fsc-test
title: FSC Element
basics:
  - TYPO3/Appearance
fields:
  - identifier: TYPO3/Header
    type: Basic
```

--------------------------------

### Minimal Tab Configuration

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/YamlReference/FieldTypes/Tab/Index.html

A basic example showing how to insert a Tab field between other fields in a Content Block definition.

```yaml
name: example/tab
fields:
  - identifier: text
    type: Text
  - identifier: tab_1
    type: Tab
  - identifier: text2
    type: Textarea
```

--------------------------------

### Advanced Collection Configuration

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/_sources/YamlReference/FieldTypes/Collection/Index.rst.txt

Examples showing advanced usage including appearance settings, item constraints, and external foreign table references.

```yaml
name: example/collection
fields:
  - identifier: slides
    type: Collection
    labelField: title
    maxitems: 5
    minitems: 1
    appearance:
      collapseAll: true
      levelLinksPosition: both
    fields:
      - identifier: image
        type: File
        minitems: 1
        maxitems: 1
      - identifier: title
        type: Text
```

```yaml
name: example/slide
table: my_slide
labelField: title
fields:
  - identifier: title
    type: Text
  - identifier: image
    type: File
```

```yaml
name: example/collection
fields:
  - identifier: slides
    type: Collection
    foreign_table: my_slide
    shareAcrossTables: true
    shareAcrossFields: true
```

--------------------------------

### Minimal FlexForm Configuration

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/YamlReference/FieldTypes/FlexForm/Index.html

A basic example showing the structure of a FlexForm field containing a Text and a Checkbox field.

```yaml
name: example/flex
fields:
  - identifier: my_flexform
    type: FlexForm
    fields:
      - identifier: header
        type: Text
      - identifier: check
        type: Checkbox
```

--------------------------------

### Advanced Color Field Configuration

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/YamlReference/FieldTypes/Color/Index.html

An example demonstrating the use of default values, autocomplete, and a value picker for a Color field.

```yaml
name: example/color
fields:
  - identifier: color
    type: Color
    autocomplete: true
    default: '#0000FF'
    valuePicker:
      items:
        - label: 'Red'
          value: #FF0000
        - label: 'Green'
          value: #008000
        - label: 'Blue'
          value: #0000FF
```

--------------------------------

### Define Sheets in FlexForm

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/singlehtml/Index.html

Example configuration showing how to define multiple sheets within a FlexForm field.

```yaml
name: example/flex
fields:
  - identifier: my_flexform
    type: FlexForm
    fields:
      - identifier: sheet1
        type: Sheet
        label: Sheet 1
        description: Description for Sheet 1
        linkTitle: Link title for Sheet 1
        fields:
          - identifier: header
            type: Text
      - identifier: sheet2
        type: Sheet
        label: Sheet 2
        fields:
          - identifier: link
            type: Link
```

--------------------------------

### Define Collection Fields

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/singlehtml/Index.html

Examples for defining collection fields, ranging from minimal structures to advanced configurations with validation and foreign table support.

```yaml
name: example/collection
fields:
  - identifier: collection
    type: Collection
    labelField: text
    fields:
      - identifier: text
        type: Text
```

```yaml
name: example/collection
fields:
  - identifier: slides
    type: Collection
    labelField: title
    maxitems: 5
    minitems: 1
    appearance:
      collapseAll: true
      levelLinksPosition: both
    fields:
      - identifier: image
        type: File
        minitems: 1
        maxitems: 1
      - identifier: title
        type: Text
```

```yaml
name: example/slide
table: my_slide
labelField: title
fields:
  - identifier: title
    type: Text
  - identifier: image
    type: File
```

```yaml
name: example/collection
fields:
  - identifier: slides
    type: Collection
    foreign_table: my_slide
    shareAcrossTables: true
    shareAcrossFields: true
```

--------------------------------

### Display help for make:content-block

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/Commands/Make/Index.html

View all available options for the command.

```bash
vendor/bin/typo3 make:content-block --help
```

--------------------------------

### Include Extension Partials for a Specific Content Block

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/_sources/Guides/SharedPartials/Index.rst.txt

Define 'partialRootPaths' for a specific content block type in your TypoScript setup to include custom partials. This example targets 'tt_content.myvendor_mycontentblockname'.

```typoscript
tt_content.myvendor_mycontentblockname {
    partialRootPaths {
        100 = EXT:my_site_package/Resources/Private/Partials/ContentElements/
    }
}
```

--------------------------------

### Generate preview templates via CLI

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/ChangeLog/2.4/Index.html

Use these commands to generate starter Fluid templates for frontend or backend previews. The --force option is required to overwrite existing files.

```bash
vendor/bin/typo3 content-blocks:generate:frontend example/my-block
vendor/bin/typo3 content-blocks:generate:backend-preview example/my-block
```

--------------------------------

### Generate a backend preview template

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/Commands/GenerateEditorPreviewTemplate/Index.html

Creates a backend preview template for the specified Content Block.

```bash
vendor/bin/typo3 content-blocks:generate:backend-preview example/my-block
```

--------------------------------

### Color Value Picker Items Example

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/_sources/YamlReference/FieldTypes/Color/Index.rst.txt

Example of defining static color items for the value picker in a Color field type. Each item has a label and a corresponding color value.

```yaml
valuePicker:
  items:
    - label: 'Red'
      value: #FF0000
    - label: 'Green'
      value: #008000
    - label: 'Blue'
      value: #0000FF
```

--------------------------------

### Run Migration Command

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/Migrations/Mask/Index.html

Execute the migration command to convert Mask elements into Content Blocks within the existing extension.

```bash
vendor/bin/typo3 mask-to-content-blocks:migrate
```

--------------------------------

### Extend an Existing Table

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/API/RecordTypes/Index.html

Example configuration for extending the tx_news_domain_model_news table with a custom record type.

```yaml
name: example/my-news-record
table: tx_news_domain_model_news
typeName: my_news_record
fields:
  - identifier: title
    useExistingField: true
```

--------------------------------

### Advanced SelectText with icons

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/YamlReference/FieldTypes/SelectText/Index.html

A complete example showing a SelectText field with icons enabled via fieldWizard.

```yaml
name: example/select-text
fields:
 - identifier: select_text_icons
   type: SelectText
   fieldWizard:
     selectIcons:
       disabled: false
   default: 'text-left'
   items:
     - label: 'Image beside text (left)'
       value: 'text-left'
       icon: content-beside-text-img-left
     - label: 'Image beside text (right)'
       value: 'text-right'
       icon: content-beside-text-img-right
     - label: 'Image above text (center)'
       value: 'text-center'
       icon: content-beside-text-img-above-cent
```

--------------------------------

### Run folder structure migration

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/Migrations/ContentBlocks12/Index.html

Execute the migration wizard to update Content Blocks folders and files to the new structure.

```bash
typo3 upgrade:run contentBlocksFolderStructureMigration
```

--------------------------------

### Create a Content Block via CLI

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/Commands/Make/Index.html

Generate a Content Block skeleton using command-line arguments.

```bash
vendor/bin/typo3 make:content-block --content-type="content-element" --vendor="my-vendor" --name="my-name" --title="My shiny new Content Element" --extension="my_sitepackage"
```

--------------------------------

### Configure enabled controls

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/YamlReference/FieldTypes/File/Index.html

Example of enabling sort arrows and disabling the delete control for file records.

```yaml
appearance:
  enabledControls:
    sort: true
    delete: false
```

--------------------------------

### Define a Section in FlexForm

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/YamlReference/FieldTypes/FlexForm/Section/Index.html

Example configuration for a Section field containing multiple containers with distinct fields.

```yaml
- identifier: pi_flexform
  useExistingField: true
  fields:
    - identifier: section1
      type: Section
      label: Section 1
      container:
        - identifier: container1
          label: Container 1
          fields:
            - identifier: container_field
              type: Text
              label: Container field
        - identifier: container2
          label: Container 2
          fields:
            - identifier: container_field2
              type: Textarea
              label: Container field 2
```

--------------------------------

### Advanced Number field configuration

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/YamlReference/FieldTypes/Number/Index.html

A comprehensive example utilizing range, slider, and value picker settings.

```yaml
name: example/number
fields:
  - identifier: number
    type: Number
    format: integer
    default: 10
    size: 20
    range:
      lower: 10
      upper: 999
    slider:
      step: 1
      width: 100
    valuePicker:
      items:
        - label: '100'
          value: 100
        - label: '250'
          value: 250
        - label: '500'
          value: 500
```

--------------------------------

### Configure Page Creation Wizard Steps

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/ChangeLog/2.2/Index.html

Defines the dynamic structure and fields displayed in the page creation wizard steps.

```yaml
wizardSteps:
  setup:
    title: Setup
    fields:
      - title
      - slug
      - nav_title
      - hidden
      - nav_hide
  special:
    title: Special
    fields:
      - additional_field
    after:
      - setup
```

--------------------------------

### Directory Structure for Custom Icons

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/_sources/API/PageTypes/Index.rst.txt

Illustrates the directory structure for placing custom icons for Page Type states, such as 'hide in menu' and 'is site root'.

```none
â”œâ”€â”€ assets
â”‚   â”‚â”€â”€ icon.svg
â”‚   â”‚â”€â”€ icon-hide-in-menu.svg
â”‚   â””â”€â”€ icon-root.svg
â””â”€â”€ config.yaml
```

--------------------------------

### Configure Make Command Defaults

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/ChangeLog/1.1/Index.html

Define default options for the make command via a YAML configuration file.

```bash
vendor/bin/typo3 make:content-block --config-path="some-folder/my-config.yaml"
```

```yaml
vendor: nh
extension: content_blocks_examples
content-type: record-type
skeleton-path: folder1/content-block-skeletons
```

--------------------------------

### Define a custom Basic

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/API/Basics/Index.html

Create a new Basic by placing a YAML file in the ContentBlocks/Basics directory with a unique identifier and field definitions.

```yaml
identifier: Vendor/YourBasic
fields:
  - identifier: a_basic_field
    type: Text
    label: LLL:EXT:sitepackage/Resources/Private/Language/locallang.xlf:a_basic_field
```

--------------------------------

### Advanced Select Field Example

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/_sources/YamlReference/FieldTypes/Select/Index.rst.txt

Configuration for a single select field with a default value and foreign table constraints.

```yaml
name: example/select
fields:
  - identifier: select
    type: Select
    renderType: selectSingle
    default: 'one'
    items:
      - label: 'The first'
        value: one
      - label: 'The second'
        value: two
      - label: 'The third'
        value: three
    foreign_table: pages
    foreign_table_where: 'AND {#pages}.{#pid} = 123 ORDER BY uid'
```

--------------------------------

### Synchronize Database After Content Block Creation

Source: https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/Commands/Make/Index.html

Clear system caches and run the database analyzer to apply changes after adding new Content Blocks.

```bash
vendor/bin/typo3 cache:flush -g system
vendor/bin/typo3 extension:setup --extension=my_sitepackage
```
Tokens:
Raw