Top 8 Enhancements in TYPO3 v12 for Integrators

In this next part of our series, we will be conversing some of the major features of TYPO3 v12 for Integrators. Earlier, we learned about the changes and benefits of TYPO3 v12 for admin users. While working on TYPO3. As an Integrator, not only do you have access to better backend UX, but you also have improved Backend Search functions and so much more.

TYPO3 is one of the most popular CMS, making it perfect for both small-scale websites and large-scale organizations. Currently, the new v12 and its LTS version, released back in April 2023, offer security updates for at least three years.

The year 2023 has been nothing short of a series of milestones released by the community itself for the TYPO3 developers and enthusiasts. Being an TYPO3 Integrator, you will see some significant changes to the system and make your work more efficient in the process.

Here is all you need to know about what is new for Integrators in this TYPO3 v12.

As a TYPO3 Integrator, your job is to ensure that the website functions effectively and meets the desired specifications to give you the best performance. They serve to be a bridge between the designers and the TYPO3 developers.

Suppose you are an TYPO3 Integrator or someone looking forward to becoming one. In that case, your job is to ensure the designs fully align with the TYPO3 specifications and configure the backend to tailor it to the project's specific requirements. This isn’t everything. Here are a few of the major roles of being a TYPO3 Integrator.

• Performance Optimization
• Backend Configuration
• Theme and Extensions Integration
• Troubleshooting and Bug Fixing

Above all, TYPO3 Integrators also collaborate with TYPO3 Developers, TYPO3 Editors, and Graphics Designers to set up and maintain the system for optimal results while setting up the website and keeping it up-to-date.

More Details About Redirect Records

The bigger the site you have, the number of Redirects grows with it. To manage them all efficiently, TYPO3 has added a significant set of features to this module.

Firstly, you can now give short descriptions to the Redirects, such as “Content XYZ” or anything else to briefly describe the URL. This will allow you to access them if and when needed by checking out the description.

Another feature added to this is that TYPO3 creates auto redirects. If there is any change in the page's Slug or URL, TYPO3 automatically creates a path from the old url to the new one to avoid any errors when any user tries to access it.

New Technical Features in TYPO3 v12

Improved TypoScript Template Analyzer

The backend "Template" module "Template Analyzer" got a major overhaul and displays much more information than before:

The rendering separates "constant" and "setup" includes and renders both in own panels.
@import and <INCLUDE_TYPOSCRIPT: are now resolved and shown as nodes within the include tree.

TypoScript conditions are reflected in the include tree and can be toggled to simulate frontend condition verdicts.

Clicking an include node displays this section of the include tree as source tree with appropriate comments for import statements.

TypoScript syntax improvements
TYPO3 v12 comes with a new TypoScript syntax parser that is more performant, more robust and allows better tooling in the Backend.

The new parser is more forgiving in many places, this documentation lists the new capabilities.

Improved comment parsing

foo # This is a comment to an invalid line

foo < bar // This is a comment
foo < bar /* This is a valid comment, too */

foo > # Another valid comment

foo := addToList(1) # Yes, a comment

[foo = bar] # Much comment. Much wow.

<INCLUDE_TYPOSCRIPT: source="..."> /* A comment */

foo (
  # This is NOT a comment but part of the value assignment!
  bar = barValue
) # This is a comment

foo = bar // This is NOT a comment but part of the value assignment!

@import in conditions
Placing an @import keyword within a condition is now supported, the example below works. Note that this obsoletes the clumsy <INCLUDE_TYPOSCRIPT: syntax, and integrators are encouraged to fully switch to @import.

[frontend.user.isLoggedIn]
  @import 'EXT:my_extension/Configuration/TypoScript/LoggedInUser.typoscript
[ELSE]
  @import 'EXT:my_extension/Configuration/TypoScript/NotLoggedInUser.typoscript
[END]

Nesting conditions is partially supported

[frontend.user.isLoggedIn]
  @import 'EXT:my_extension/Configuration/TypoScript/LoggedInUser.typoscript
[applicationContext == "Development"]
  @import 'EXT:my_extension/Configuration/TypoScript/Development.typoscript
[END]

[frontend.user.isLoggedIn]
  @import 'EXT:my_extension/Configuration/TypoScript/LoggedInUser.typoscript
[END]

# File LoggedInUser.typoscript:
[applicationContext == "Development"]
  @import 'EXT:my_extension/Configuration/TypoScript/LoggedInUserDevelopment.typoscript
[END]

Support of language direction in ckeditor
The configuration contentsLangDirection of the ckeditor is used to define the direction of the content. It is now filled by the direction defined in the site language of the current element.
As fallback the page TSconfig configuration RTE.config.contentsLanguageDirection = rtl can be used.

TypoScript Option "showWebsiteTitle"
A new TypoScript option config.showWebsiteTitle has been added.The option allows to define whether the website title, which is defined in the site configuration, should be added to the page title, which is e.g. used for the <title> tag.

CKEditor 5
TYPO3 v12 ships with CKEditor 5, a Rich-Text Editor to edit fields where custom formatting for text with styling or links, or table formatting can be achieved. Read more

Override backend templates with TSconfig

# Pattern: templates."composer-name"."something-unique" = "overriding-extension-composer-name":"entry-path"
templates.typo3/cms-linkvalidator.1643293191 = my-vendor/my-extension:Resources/Private/TemplateOverrides

templates.typo3/cms-linkvalidator.23 = other-vendor/other-extension:Resources/Private/TemplateOverrides/Linkvalidator
templates.typo3/cms-linkvalidator.2300 = my-vendor/my-extension:Resources/Private/MyOverrideIsBigger

Automatic inclusion of page TSconfig of extensions
Extension authors can now put a file named Configuration/page.tsconfig in their extension folder.

This file is then recognized to load the contents as global page TSconfig for the whole TYPO3 installation during build-time.

Introduce CLI setup command
To be able to automate the setup process for new TYPO3 installations, a new CLI command setup is introduced as an alternative to the existing GUI based web installer.

./bin/typo3 setup
TYPO3_DB_DRIVER=mysqli \
TYPO3_DB_USERNAME=db \
TYPO3_DB_PORT=3306 \
TYPO3_DB_HOST=db \
TYPO3_DB_DBNAME=db \
TYPO3_SETUP_ADMIN_EMAIL=admin@example.com \
TYPO3_SETUP_ADMIN_USERNAME=admin \
TYPO3_SETUP_CREATE_SITE="https://your-typo3-site.com/" \
TYPO3_PROJECT_NAME="Automated Setup" \
./bin/typo3 setup --force

Allow generation of absolute URLs completely
A new TypoScript option config.forceAbsoluteUrls = 1 has been added.

Additional attributes for includeJS, includeCSS and all other page.include**
The PageRenderer supports additional tag attributes for CSS and JavaScript files. These data attributes can be configured using a key/value list via TypoScript.

page = PAGE
page {
  includeCSSLibs {
    someIncludeFile = fileadmin/someIncludeFile1
    someIncludeFile.data-foo = includeCSSLibs
  }
  includeCSS {
    someIncludeFile = fileadmin/someIncludeFile2
    someIncludeFile.data-foo = includeCSS
  }
  includeJSLibs {
    someIncludeFile = fileadmin/someIncludeFile3
    someIncludeFile.data-consent-type = marketing
  }
  includeJS {
    someIncludeFile = fileadmin/someIncludeFile4
    someIncludeFile.data-consent-type = essential
  }
  includeJSFooterlibs {
    someIncludeFile = fileadmin/someIncludeFile5
    someIncludeFile.data-my-attribute = foo
  }
  includeJSFooter {
    someIncludeFile = fileadmin/someIncludeFile6
    someIncludeFile.data-foo = includeJSFooter
  }
}

Allow glob patterns in yaml imports
You can now use glob() syntax when importing configuration files in YAML.

imports:
  - { resource: "./**/*.yaml", glob: true }
  - { resource: "EXT:core/Tests/**/Configuration/**/SiteConfigs/*.yaml", glob: true }

New file location for ENABLE_INSTALL_TOOL
To access the standalone Install Tool, the file typo3conf/ENABLE_INSTALL_TOOL needed to be created. With TYPO3 v12, the location of this file has been changed.

// For Composer-based installations the following file paths are checked:
var/transient/ENABLE_INSTALL_TOOL
config/ENABLE_INSTALL_TOOL

// For legacy installations the following file paths are checked:
typo3temp/var/transient/ENABLE_INSTALL_TOOL
typo3conf/ENABLE_INSTALL_TOOL

TYPO3 v12 has a lot to offer in terms of better UI, along with a multitude of features for Integrators. This guide will help you understand all the aspects you need to know on the things you need to look forward to before you update your site to v12.

Some of the key features we found included Improved Backend Search, Multi-level Language Fallback, and significant changes in the UI on multiple levels. But this isn’t everything; make sure to go through each of the features mentioned in this guide and learn how TYPO3 Integrators can leverage these new aspects to increase their efficiency.