15+ Key Highlights in TYPO3 v13.1

15+ Key Highlights in TYPO3 v13.1

Welcome to my TYPO3 feature release series blog for TYPO3 v13! In this blog, you'll find detailed insights into significant features, breaking changes, and deprecations in TYPO3 version 13.1. Keep reading to stay updated!

The TYPO3 community is celebrating as the TYPO3 v13 series has released its third sprint feature release. TYPO3 version 13.1 marks the 3rd step towards the highly anticipated LTS release scheduled for October 2024. The release contains powerful features;

  • TYPO3 integrators get powerful Sets, PAGEVIEW, etc.
  • TYPO3 editors get excellent Re-formed Page tree, Save and close, etc.
  • TYPO3 developers get things like new expression methods in ExpressionBuilder, New APIs, etc.
  • TYPO3 administrator gets Request ID information for fatal error, Creates backend user with CLI, etc.

Before we start, I'd like to dedicate this blog to all the techies and non-techie TYPO3 contributors of TYPO3 who heartily worked toward the release of TYPO3 v13.1. #T3Kudos

Did you look at the TYPO3 v13 roadmap and TYPO3 v13.0? I recommend taking a look at my blog below.

Before starting, look at the major goals of TYPO3 v13 LTS (long-term support).

VersionPrimary FocusEstimated Release
13.0Breaking changes and new system requirementsReleased: 2024-01-30
13.1Reusable components for creating new sitesEstimated: 2024-04-23
13.2Content blocks and new APIs for integrationsEstimated: 2024-07-02
13.3Feature freezeEstimated: 2024-09-17
13.4 LTS-releaseEstimated: 2024-10-15

The Mantra of the TYPO3 v13 release series is "Streamlining repetitive tasks and simplifying the day-to-day work of administrators and editors." TYPO3 v13.1 showcases how website building with TYPO3 will be more effortless, quicker, and straightforward in the future.

Following the principle of "build once, use often," you can now bundle and reuse various site and extension configurations. For example, A new TypoScript content object enables you to swiftly build Fluid-based frontend pages by prioritizing conventions over configuration.

… That’s why the TYPO3 v13.1 slogan is “Surfer’s StartKit.” Surfer means TYPO3 integrator, and they get StarkerKit, where they can quickly build and reuse their old configuration and components to create a new TYPO3 site.

Save & Close is Back Again!

Oyeah, you heard correctly. The backend editor's small but favourite feature called “Save and Close” action is back.

  • Press: Ctrl/Cmd + Shift + S
    Press: Ctrl/Cmd + Shift + S
  • Press: Ctrl/Cmd + S
    The backend form will save & keep open the form.

Note for Scheduler:
Like regular content elements, editing “Save Scheduler” tasks via keyboard shortcuts in the Scheduler TYPO3 backend module is now possible.

Create Backend User Groups via CLI-Commands

An alternative to the existing backend module, a new CLI command ./bin/typo3 setup:begroups:default has been introduced. This command automates the creation of backend user groups, allowing the creation of two pre-configured backend user groups with permission presets applied.

Method 1. Guided Questions/Answers TYPO3 CLI Command

# Default command
# Guided interactive questions/answers
./bin/typo3 setup:begroups:default

Method 2. No Interaction TYPO3 CLI Command

# Set --groups|-g option. Allowed values for groups are Both Editor and Advanced Editor:
# Command examples
./bin/typo3 setup:begroups:default --groups Both
./bin/typo3 setup:begroups:default --groups Editor
./bin/typo3 setup:begroups:default --groups “Advanced Editor”

Re-launched TYPO3 Page Tree

Removed the 10-year-old SVG tree, powered by d3js in the TYPO3 page tree. Built on contemporary web standards, the new Tree overcomes the limitations of the SVG tree. With native drag-and-drop APIs, standard HTML markup, and CSS styling, the Modern Reactive Tree promises better maintainability and accessibility.

Workspace & Dark Mode

TYPO3 Page Tree

TYPO3 File Tree

What are the Key Enhancements in the TYPO3 Page Tree?

  • Unified experience: All features are consolidated into the base tree for a seamless user experience, covering data loading, selection, keyboard navigation, drag and drop, and node editing.
  • User preferences: Supports light/dark mode and left-to-right (LTR) or right-to-left (RTL) writing modes.
  • Reactive rendering: Nodes redraw autonomously based on property changes for a smoother interface.
  • Native drag and drop: Opens possibilities for enhancements like dragging content directly onto a page or moving elements between browser windows.
  • Improved API endpoints: Data endpoints follow a defined API for consistency and compatibility.
  • Unified dragging tooltip handling: Ensures synchronization across browser windows.
  • Dynamic tree status storage: Tree status is stored in local browser storage instead of the database, allowing easier transitions between browsers or machines.
  • Enhanced virtual scroll: Renders only visible nodes for smoother navigation and maintains focus on selected nodes when scrolled out of view.

Transitioning to this Modern Reactive Tree brings flexibility, ease of use, and potential for exciting future features.

Search Multiple Pages Using Comma-Separator

This is a small but helpful feature, and The page tree now allows users to search not only for strings and single page IDs but also for comma-separated lists of page IDs.

Labels & Colors in TYPO3 Page Tree

Before the implementation of labels, developers and integrators relied on pageTree.backgroundColor.<pageid> for visual cues, which has been deprecated starting from TYPO3 v13.

Each node can now support multiple labels, sorted by priority, with the highest priority label taking precedence over others. Users can assign a label to a node via user TSconfig, noting that only one label can be set.

Using User TSconfig

# EXT:my_extension/Configuration/user.tsconfig
options.pageTree.label.<pageid> {
  label = My Label
  color = #ff2200
}

Using EventLister

# EXT:my_extension/Classes/Backend/EventListener/ModifyPageTreeItems.php

<?php

declare(strict_types=1);

namespace MyVendor\MyExtension\Backend\EventListener;

use TYPO3\CMS\Backend\Controller\Event\AfterPageTreeItemsPreparedEvent;
use TYPO3\CMS\Backend\Dto\Tree\Label\Label;
use TYPO3\CMS\Core\Attribute\AsEventListener;

#[AsEventListener(
    identifier: 'my-extension/backend/modify-page-tree-items',
)]
final readonly class ModifyPageTreeItems
{
    public function __invoke(AfterPageTreeItemsPreparedEvent $event): void
    {
        $items = $event->getItems();
        foreach ($items as $item) {
            // Add special label for all pages with parent page ID 123
            if ($item['_page']['pid'] === 123) {
                $item['labels'][] = new Label(
                    label: 'My Label',
                    color: '#ff2200’,
                    priority: 1,
                );
            }
        }
        $event->setItems($items);
    }
}

SVG Image Cropping in TYPO3

Yeah, Finally, the SVG Crop feature is natively available in TYPO3 v13. It’s good news for TYPO3 editors and integrators. In previous versions, It was cropped & converted to rasterized PNG/JPG images.

For TYPO3 Editors

For TYPO3 Integrators

You don’t need to do anything, Cropping feature automatically work with Fluid-image tags like. <f:image> <f:uri.image>

To Supprot Old PNG/JPG Conversation

Forced rasterization of cropped SVG assets can still be performed by setting the fileExtension="png" attribute in the Fluid ViewHelper or the TypoScript file.ext property. This forces images to be generated as PNG.

# <f:image> ViewHelper example:
<f:image image="{image}" fileExtension="png" />

# file.ext = png TypoScript example:
page.10 = IMAGE
page.10.file = 2:/myfile.svg
page.10.file.crop = 20,20,500,500
page.10.file.ext = png

If no special hard-coded option for the file extension is set, SVGs are now processed and stored as SVGs again.

More Languages Support (Irish Gaelic, Scottish Gaelic, Maltese)

TYPO3 now support a 50+ languages, and three more come in TYPO3 v13.1.

  • Backend Language Configuration > top right core > user > User Settings > Choose language.
  • Frontend Langauge Settings > Site Management > Sites > Languages > Set language.
Language NameCountryISO 639-1 CodeTranslation File
Irish GaeliIrelandgaga.locallang.xlf
MalteseMaltamtmt.locallang.xlf
Scottish GaelicScotlandgdgd.locallang.xlf

Meet PAGEVIEW - New ContentObject

Wow! Team TYPO3 core is on the way to reduce configuration and save time for the TYPO3 integrators by introducing PAGEVIEW TypoScript ContentObject.

The PAGEVIEW cObject is primarily designed to render a full page in the TYPO3 frontend with fewer configuration options compared to the generic FLUIDTEMPLATE cObject.

Basic usage of the PAGEVIEW cObject is demonstrated below:

# EXT:your_extension/Configuration/Sets/YourSet/setup.typoscript

page = PAGE
page.10 = PAGEVIEW
page.10.paths.100 = EXT:mysite/Resources/Private/Templates/

60 Lines of Code (with FLUIDTEMPLATE)

page = PAGE
page {
    10 = FLUIDTEMPLATE
    10 {
        templateName = TEXT
        templateName {
            stdWrap {
                cObject = TEXT
                cObject {
                    data = levelfield:-2, backend_layout_next_level, slide
                    override {
                        field = backend_layout
                    }
                    split {
                        token = pagets__
                        1 {
                            current = 1
                            wrap = |
                        }
                    }
                }
                ifEmpty = Standard
            }
        }

        templateRootPaths {
            100 = {$plugin.tx_yoursite.paths.templates}
        }

        partialRootPaths {
            100 = {$plugin.tx_yoursite.paths.partials}
        }

        layoutRootPaths {
            100 = {$plugin.tx_yoursite.paths.layouts}
        }

        variables {
            pageUid = TEXT
            pageUid.data = page:uid

            pageTitle = TEXT
            pageTitle.data = page:title

            pageSubtitle = TEXT
            pageSubtitle.data = page:subtitle

            parentPageTitle = TEXT
            parentPageTitle.data = levelfield:-1:title
        }

        dataProcessing {
            10 = menu
            10.as = mainMenu
        }
    }
}

20 Lines of Code (with PAGEVIEW)

page = PAGE
page {
    10 = PAGEVIEW
    10 {
        paths {
            100 = {$plugin.tx_yoursite.paths.templates}
        }
        variables {
            parentPageTitle = TEXT
            parentPageTitle.data = levelfield:-1:title
        }
        dataProcessing {
            10 = menu
            10.as = mainMenu
        }
    }
}

3 Things Automize with PAGEVIEW

1. The name of the page layout (backend layout) is resolved automatically.

2. Fluid features for layouts and partials are wired automatically.

3. Default variables are available in the Fluid template: 

  • settings - contains all TypoScript settings (= constants)
  • site - the current Site object
  • language - the current SiteLanguage object
  • page - the current page record as object

Site Sets in TYPO3 – What’s That?

From TYPO3 v13.1 started to introduced new concepts like “Site Sets”. It’s first-move to fullfill the commitment of “Surfer’s StartKit”.

Site sets deliver parts of site configuration as composable pieces. They provide settings, TypoScript, TSconfig, and reference-enabled content blocks for the scope of a site.

Extensions can offer multiple sets to provide presets for different sites or subsets, resembling frameworks. These sets allow selected features to be exposed as a subset, such as in the case of typo3/seo-xml-sitemap.

Sets via Backend > Site Management

Sets via Site Configuration Extension

Sets are applied to sites via dependencies array in site configuration:

# config/sites/your-site/config.yaml
base: 'http://your-domain.com/'
rootPageId: 1
dependencies:
  - your-vendor/your-set

How to Create TYPO3 Set? (via config.yaml)

You’ll need to create Configuration/Sets folder.

# EXT:your_extension/Configuration/Sets/YourSet/config.yaml
# Define Your Set
name: your-vendor/your-set
label: Your Set
# Load TypoScript, TSconfig and settings from dependencies
dependencies:
  - namespace/teaser
  - namespace/slider
  - namespace/myelement

How to Define of TYPO3 Sets (via settings.definitions.yaml)

Sets can define setting definitions that contain more metadata than just a value. These definitions include UI-relevant options such as label, description, category, tags, and types like int, bool, string, stringlist, text, or color. These definitions are placed in settings.definitions.yaml next to the site set file config.yaml.

# EXT:your_extension/Configuration/Sets/YourSet/settings.definitions.yaml
settings:
  foo.bar.baz:
    label: 'Your example set settings'
    description: 'You need to add description'
    type: int
    default: 5

How to Setings TYPO3 Sub Sets (via settings.yaml)

Settings for subsets (e.g., to configure settings in declared dependencies) can be included in settings.yaml when placed next to the set file config.yaml.

Note: Default values for settings provided by the set are not required here; defaults are provided within settings.definitions.yaml.

Here's an example of configuring the setting styles.content.defaultHeaderType, provided by typo3/fluid-styled-content, via settings.yaml:

# EXT:your_extension/Configuration/Sets/YouSet/settings.yaml
styles:
  content:
    defaultHeaderType: 1

This setting will be exposed as a site setting whenever the set my-vendor/my-set is applied to a site configuration.

Conclusion

Sites can be built using sets, which combine relevant configuration, templates, assets, and setting definitions into a central location and apply them to sites as a single logical unit.

Sets feature dependency management, enabling code sharing between multiple TYPO3 sites and extensions in a flexible manner.

TYPO3 core will optimize and extend the user interface and functionality further in upcoming TYPO3 v13 sprint releases.

No More Static Include TypoScript, @import, Page TSconfig

TypoScript dependencies can now be included via set dependencies, which is more effective than previous methods like static_file_include or manual @import statements. Sets automatically handle ordering and deduplication.

How to Automatically TypoScript into Set?
The files setup.typoscript and constants.typoscript (placed next to the site's config.yaml file) will be loaded as TypoScript setup and constants, if available.

Site dependencies (sets) will be loaded first, meaning setup and constants can be overridden per site.

# EXT:your_extension/Configuration/Sets/YourSet/

# Your Defined Set
config.yaml

# Automatically Load TypoScript
constants.typoscript
setup.typoscript

I highly recommend avoiding the sys_template method of including TypoScript static and @import. Sites and sets can now deliver TypoScript without requiring sys_template records in the database. Dependencies can be expressed through sets, enabling automatic ordering and deduplication.

How to Automatically Page TSconfig into Set?
TYPO3 sites can now provide page TSconfig on a per-site basis. Page TSconfig for a site is loaded from page.tsconfig if placed next to the site configuration file config.yaml and is scoped to pages within that site.

# EXT:your_extension/Configuration/Sets/YourSet/

# Your Defined Set
config.yaml

# Automatically Load Page TSconfig
page.tsconfig

Sites and sets can now include page TSconfig without requiring database entries or cluttering the global scope through registration in ext_localconf.php or Configuration/page.tsconfig. Dependencies can be managed through sets, enabling automatic ordering and deduplication.

Conclusion

In short, TYPO3 core is aiming to provide automatic configuration for TypoScript, Page TSconfig, User TSconfig, and more. This will be a real time-saving feature.

Forget Password Get Full Userdata

Using the {userData} variable in the password recovery FluidEmail now allows access to data from the affected backend user.

# Fluid Object
FluidEmail

# New array variable
{userData}

# Variable contains all the fields of be_users table
{userData.email}
{userData.username}

Delete IRRE Elements via JavaScript API

Extension developers in TYPO3 can now initiate the deletion of IRRE elements through the API.

To delete items in FormEngine's Inline Relation container via API, a new message identifier typo3:foreignRelation:delete has been introduced.

# Example typo3:foreignRelation:delete Code

import { MessageUtility } from '@typo3/backend/utility/message-utility.js';

MessageUtility.send({
    actionName: 'typo3:foreignRelation:delete',
    objectGroup: 'data-<page_id>-<parent_table>-<parent_uid>-<reference_table>',
    uid: '<reference_uid>'
});

10+ Expression Methods to ExpressionBuilder

Good news for the TYPO3 developers! The TYPO3 \TYPO3\CMS\Core\Database\Query\Expression\ExpressionBuilder has provided a relatively basic set of database query expressions for some TYPO3 and Doctrine DBAL versions.

Additional expression methods are now available to construct more advanced database queries, ensuring compatibility across supported database vendors.

TYPO3 Extension developers can utilize the new expression methods to create more advanced queries without handling the correct implementation for all supported database vendors.

# Introduced New Expression Methods

ExpressionBuilder::as()
ExpressionBuilder::concat()
ExpressionBuilder::castVarchar()
ExpressionBuilder::castInt()
ExpressionBuilder::repeat()
ExpressionBuilder::space()
ExpressionBuilder::left()
ExpressionBuilder::right()
ExpressionBuilder::leftPad()
ExpressionBuilder::rightPad()

Updated Fluid 2.11 – More ViewHelpers


Yeah! TYPO3 integrator is always eager to get new ViewHelper to avoid custom ViewHelper.

Fluid Standalone has been upgraded to version 2.11, introducing new ViewHelpers that address common tasks in Fluid templates. Future minor releases will incorporate additional ViewHelpers.

<f:split> ViewHelper:

# The SplitViewHelper splits a string by the specified separator, which results in an array.

<f:split value="1,5,8" separator="," /> <!-- Output: {0: '1', 1: '5', 2: '8'} -->
<f:split separator="-">1-5-8</f:split> <!-- Output: {0: '1', 1: '5', 2: '8'} -->
<f:split value="1,5,8" separator="," limit="2" /> <!-- Output: {0: '1', 1: '5,8'} -->

<f:join> ViewHelper:

# The JoinViewHelper combines elements from an array into a single string.

<f:join value="{0: '1', 1: '2', 2: '3'}" /> <!-- Output: 123 -->
<f:join value="{0: '1', 1: '2', 2: '3'}" separator=", " /> <!-- Output: 1, 2, 3 -->
<f:join value="{0: '1', 1: '2', 2: '3'}" separator=", " separatorLast=" and " /> <!-- Output: 1, 2 and 3 -->

<f:replace> ViewHelper:

# The ReplaceViewHelper replaces one or multiple strings with other strings.

<f:replace value="Hello World" search="World" replace="Fluid" /> <!-- Output: Hello Fluid -->
<f:replace value="Hello World" search="{0: 'World', 1: 'Hello'}" replace="{0: 'Fluid', 1: 'Hi'}" /> <!-- Output: Hi Fluid -->
<f:replace value="Hello World" replace="{'World': 'Fluid', 'Hello': 'Hi'}" /> <!-- Output: Hi Fluid -->

<f:first> and <f:last> ViewHelpers:

# The FirstViewHelper and LastViewHelper return the first or last item of a specified array, respectively.

<f:first value="{0: 'first', 1: 'second', 2: 'third'}" /> <!-- Outputs "first" -->
<f:last value="{0: 'first', 1: 'second', 2: 'third'}" /> <!-- Outputs "third" -->

Fatal Error – Public Visitor Get Request ID

The ProductionExceptionHandler in EXT:frontend outputs "Oops, an error occurred!" followed by a timestamp and a hash, which are part of the log messages. Each error/exception logged contains a request ID.

With this change, the request ID is also displayed as a publicly visible error reference in the web output of error/exception handlers.

Everyone now sees a request ID as traceable error information.

Support ?? operator for TypoScript constants

TypoScript constants expressions now support a null coalescing operator (??) to provide a migration path from a legacy constant name to a newer one while ensuring backward compatibility for the legacy constant name if it's still defined.

# Example Code

plugin.tx_myext.settings.example = {$config.oldThing ?? $myext.thing}

The next release on our roadmap is TYPO3 version 13.2, scheduled for 2 July 2024. This sprint release's primary focus is on content blocks, a brand new way to build, manage, and edit content elements.

  • Deprecate GeneralUtility::hmac()
  • Deprecate pageTree.backgroundColor
  • Deprecate @typo3/backend/wizard.js
  • Deprecate Class SlugEnricher
  • Deprecated DocumentSaveActions module

Great news! Following TYPO3 version 13.0, only new functionalities with a clear migration path will be added to minimize breaking changes as we progress towards the LTS release.

Important: Removal of Database Table cache_treelist
The database table cache_treelist has been removed. The database analyzer will suggest dropping it if it exists.

This cache table has been unused since a TYPO3 v12 patch-level release. In v13, leftover handling throughout the Core and the table itself have been removed.

PHP versionsTYPO3 v13
2023-2027
TYPO3 v12
2011-2026
TYPO3 v11
2020-2024
TYPO3 v10
2019-2023
TYPO3 v9
2017-2011
TYPO3 v8
2015-2020
PHP 7.0nononononoyes
PHP 7.1nononononoyes
PHP 7.2nononoyesyesyes
PHP 7.3nononoyesyesyes
PHP 7.4nononoyesyesyes
PHP 8.0nonoyesnonono
PHP 8.1noyesyesnonono
PHP 8.2yesyesyesnonono
PHP 8.3yesyesyesnonono

TYPO3 version 13.0 has new minimum system requirements, setting the stage for planned enhancements in upcoming sprint releases and ensuring compatibility with modern dependent packages with long-term support.

TYPO3 now requires PHP version 8.2, which will receive security updates until December 2025. It is also a prerequisite for Symfony version 7, another key component of TYPO3 v13. Symfony v7 is slated for support until November 2028.

Support Timeline

Each TYPO3 sprint release (v13.0 to v13.3) will be supported until the next minor version is released. TYPO3 v13 LTS (version 13.4), the long-term support version, will receive bug fixes until April 30, 2026. Security patches for TYPO3 v13 LTS will be provided until October 31, 2027.

Further Details

Additional information about requirements and dependencies can be found on get.typo3.org. These measures ensure that TYPO3 remains up-to-date, secure, and well-supported for users and developers.

Visit get.typo3.org for comprehensive details on the release, including how to download and install TYPO3. The Installation Guide provides in-depth instructions for the installation process.

We strongly recommend utilizing Composer to establish your TYPO3 environment, ensuring a streamlined and efficient setup. Follow the provided resources to make the installation process smooth and successful.

In summary, TYPO3 version 13.1 embodies innovation, adaptability, and progress. This release introduces a range of exciting features and underscores TYPO3's commitment to remaining at the forefront of technology.

From Site Sets to PAGEVIEW, Modern Reactive Page Tree to Crop SVG, Helping TYPO3 editor to integrators in every aspect is aimed at enhancing user experience and developer efficiency.

But this journey continues. It's an open invitation to the TYPO3 community and beyond to explore, contribute, and shape the future of TYPO3. The details provided here are drawn from the official documentation, and I'm grateful to the wonderful TYPO3 Community.

Finally, I'd like to express two sentiments:

Thanks Notes:
Extend gratitude to the TYPO3 Open Source community for their invaluable contributions. Share your appreciation on social media, in the Slack group, or consider donating to TYPO3.

Keep Exploring & Learning:
Install and set up TYPO3 v13, and independently learn how to adapt your projects or extensions for the changes. If you encounter any issues or have suggestions, submit a ticket on TYPO3 Forge.

Have a Happy TYPO3 Release!

Get hassle-free upgrade service from a certified TYPO3 Developer

  • 350+ Extensions upgrade to TYPO3 LTS versions
  • 150+ Completed TYPO3 upgrade sites (from v6 to current LTS)
  • 35+ Team of TYPO3 developers
  • 13+ Years of TYPO3 experience
  • 3 Package plans are available for the TYPO3 upgrade
  • 2 Days of quick support (reaction and resolution time)
TYPO3 Upgrade Gig
upgrade

Post a Comment

×
Captcha Code Can't read the image? Click here to refresh
  • user
    Dennis Baum 2024-05-26 at 1:06 pm

    Thanks for the detailed highlights! I'm especially excited about the new backend UI improvements. It looks so much cleaner and easier to navigate.

  • user
    Matthias Lang 2024-04-26 at 11:40 am

    Great news about the new ExpressionBuilder methods! That will definitely come in handy for writing more complex database queries.

  • user
    Kerstin Dietrich 2024-04-15 at 9:30 am

    I manage multiple TYPO3 sites. Will the new Sets feature make it easier to share configurations between them?

  • user
    Jörg Eberhart 2024-04-11 at 4:50 pm

    The roadmap looks good. Content blocks sound like a good for content management in TYPO3. Can't wait to see them in v13.2!