---
title: "Breaking: Profile editing templates carry speaking classes"
manual: "Academic Profiles Edit"
version: "main"
permalink: "https://docs.typo3.org/permalink/fgtclb/academic-persons-edit:breaking-persons-edit-speaking-frontend-classes@main"
source: "Changelog/3.0/Breaking-SpeakingFrontendClasses.rst"
rendered: "2026-10-17T08:48:06+00:00"
---

# Breaking: Profile editing templates carry speaking classes {#breaking-persons-edit-speaking-frontend-classes}

## Description {#description}

The templates of the profile editing view carried the classes of the theme they
were developed with - toasts, badges, alerts, spinners, form controls, spacing,
display and colour utilities - next to block and element classes of the
extension such as `academic-persons-profile-editing__field`. They carry
speaking classes now, named after what an element is and shared by all academic
extensions: `ace-section`, `ace-preview`, `ace-editor`, `ace-label`,
`ace-value`, `ace-control` and so on. The outermost elements keep their
classes, `academic-persons-profile-editing` for the editor and
`academic-persons-edit academic-persons-profile-editing-list` for the profile
list. The classes of Bootstrap that a site builds on stay on purpose where the
templates render them: the grid classes `row` and `col-*`, the button classes
`btn`, `btn-*`, `btn-group` and `btn-close`, and `visually-hidden`. No other
theme class is rendered any more, `rounded-0` included, and the extension
ships no styles for the new classes, see
[Breaking: The profile editing plugin ships no stylesheet](https://docs.typo3.org/permalink/fgtclb/academic-persons-edit:breaking-profile-editing-ships-no-stylesheet@main).

The scripts of the editor follow. They show and hide markup through its
attribute `hidden` instead of the class `d-none`, and find the nodes
they write into by `data-pe-*` attributes instead of classes. They still read
one class of the markup, the `ace-message` of a field or a group for the
message of a refused value.

The column *Before* lists the markup of the development versions of 3.0,
because they were installed and styled. The editing plugin of version 2 is
replaced as a whole, and its markup with it, see
[Breaking: Replaced the profile editing view](https://docs.typo3.org/permalink/fgtclb/academic-persons-edit:breaking-replaced-profile-editing-plugin@main).

| Element | Before | After |
| --- | --- | --- |
| Layout of the editor | `academic-persons-profile-editing container-fluid px-0`, a `row gx-lg-5 gy-5 align-items-stretch`, the columns `academic-persons-profile-editing__image-preview-column` and `academic-persons-profile-editing__profile-fields-column`, the image in a `sticky-top` | `academic-persons-profile-editing` with `ace-profile-editing-wrapper` and `ace-content` around the `row`, `ace-image-column`, `ace-sticky-image`, `ace-fields-column` and `ace-documents`, the columns marked `data-pe-image-preview-column` and `data-pe-profile-fields-column` |
| Link back to the list | `back-link d-inline-flex align-items-center gap-2 mb-4` | `ace-link ace-back-link` |
| Message of a missing page type | `alert alert-danger` | `ace-message ace-error` |
| Header with the switches | `d-flex flex-column flex-lg-row …`, a heading `h2 fw-bolder`, the forms `academic-persons-profile-editing__sync-form` and `__visibility-form`, `form-check form-switch form-check-lg`, the checkboxes `form-check-input` with `academic-persons-profile-editing__sync-checkbox` or `__visibility-checkbox`, `form-check-label` and `invalid-feedback` | `ace-header` with `ace-title` and `ace-actions`, every switch an `ace-form` with `ace-switch`, `ace-control ace-checkbox`, `ace-label` and `ace-message`, the checkboxes marked `data-pe-sync-checkbox` and `data-pe-visibility-checkbox` |
| Sections of the editor | headings `h2 fw-normal mb-4` or `display-6 fw-normal`, the forms `academic-persons-profile-editing__form`, a fieldset `border-0 p-0 m-0` | `ace-section` with `ace-title`, `ace-form` and `ace-fieldset` |
| Row of a field | `rounded-0 p-3 p-lg-4`, `rounded-1` in place of `rounded-0` for a checkbox, a select and a group, every other row `bg-body-tertiary` | `ace-field-group`, every other row `ace-alternate` |
| Value of a field | `d-flex align-items-start gap-3` with `flex-grow-1 overflow-hidden`, `fw-semibold d-flex …` and `text-break`, an empty value `text-body-secondary`, the edit button `btn rounded-0 btn-sm border-0 p-1 text-body flex-shrink-0` | `ace-preview` with `ace-content`, `ace-label` and `ace-value`, an empty value `ace-empty`, the edit button `ace-control ace-edit btn btn-sm` |
| Editor of a field | `d-none mt-3`, the label `form-label fw-semibold`, the counter `form-text text-end`, the message `invalid-feedback` | `ace-editor` with the attribute `hidden`, the label `ace-label` in an `ace-header`, the counter `ace-counter`, the message `ace-message` |
| Control of a field | `form-control form-control-sm`, `form-select form-select-sm` or `form-check-input`, each with `academic-persons-profile-editing__field` | `ace-control` with `ace-text`, `ace-textarea`, `ace-select` or `ace-checkbox`, marked `data-pe-field-control` |
| Actions of a field | `btn-group btn-group-sm d-none flex-shrink-0`, the icon of a button in `fs-5 lh-1` | `ace-actions btn-group btn-group-sm` with the attribute `hidden`, the buttons `ace-control` with `ace-clear`, `ace-undo` or `ace-save`, the icon in `ace-button-label` |
| Actions of full form editing | `col-12 d-flex justify-content-end align-items-center gap-2 pt-3 border-top` | `ace-actions`, the buttons `ace-apply`, `ace-undo` and `ace-discard` |
| Help text and managed field | `btn rounded-0 btn-link link-info p-0 ms-2 mb-1`, the badge `badge rounded-pill border text-body-secondary bg-body fw-medium` | `ace-control ace-help btn btn-link`, the badge `ace-state` |
| Image of the profile | a heading `h2 fw-normal mb-4`, `figure mb-0`, `picture d-block`, the image `img-fluid w-100 object-fit-cover` | `ace-section` with `ace-title`, `ace-figure`, `ace-picture` and `ace-image` |
| Image editor | `academic-persons-profile-editing__image-editor border p-3 p-lg-4 mb-5` with `__image-editor-content`, the form `__image-form`, the cropper `__image-cropper`, help texts `text-body-secondary`, the message `alert alert-danger mt-3 mb-0`, the busy indicator `spinner-border spinner-border-sm me-1` | `ace-image-editor` with `ace-content`, the form `ace-form` marked `data-pe-image-form`, `ace-image-cropper`, `ace-helptext`, `ace-message ace-error` and `ace-spinner` |
| Section of documents | `mt-5`, a heading `display-6 fw-normal`, the add button `btn rounded-0 btn-sm btn-link p-2`, the empty state `bg-body-tertiary py-2 ps-3 small text-body-secondary`, the column heads `row g-0 … d-none` with `d-md-flex` | `ace-section` with `ace-header`, `ace-title` and `ace-control ace-add btn btn-sm btn-link`, the empty state `ace-empty`, the column heads `ace-header ace-label`, both shown and hidden through `hidden` |
| Row of a document | `row g-0 align-items-center border-bottom py-2 py-lg-3 ps-3`, the values `col-* py-1 pe-md-3 text-break` with a label `d-md-none fw-semibold mb-1` | `<article class="ace-item">` around the `row`, the values `ace-cell` with `ace-label` and `ace-value` in their columns, then `ace-collapse` |
| Actions of a row | `col-12 col-md-auto flex-shrink-0 d-flex …`, the state `badge rounded-pill border text-body-secondary bg-body fw-medium`, the buttons `btn rounded-0 btn-sm btn-link text-body p-2` | `ace-actions` with `ace-state` and `ace-controls`, the buttons `ace-control` with `ace-sort ace-sort-handle`, `ace-sort-up`, `ace-sort-down`, `ace-visibility-toggle`, `ace-view-toggle`, `ace-edit` or `ace-delete`, in the contacts of a contract `ace-visibility` and `ace-view` |
| Document editor | `academic-persons-profile-editing__document-collapse border bg-body p-3 p-lg-4 my-3` with `__document-collapse-content`, a heading `display-6`, the message `alert alert-danger`, the busy indicator `spinner-border` | `ace-document-editor` with `ace-content`, `ace-form`, `ace-title`, `ace-message ace-error`, `ace-copy`, `ace-contacts` and `ace-spinner` |
| Contacts of a contract and their editor | `pt-4 mt-4` with a heading `h4 mb-0`, rows `row g-0 align-items-center border-bottom py-2 ps-3`, the editor `border bg-body-tertiary p-3 p-lg-4` with `alert alert-danger` | `ace-section` with `ace-header` and `ace-title`, rows `ace-item`, the editor `ace-item` with `ace-title`, `ace-message ace-error`, `ace-copy`, `ace-actions` and `ace-spinner` |
| Status toast | `toast-container position-fixed bottom-0 end-0 p-3`, `toast` with `toast-header`, `status-title`, `btn-close rounded-0` and `toast-body status-message`, the severity `bg-danger`, `bg-success`, `bg-info` or `bg-warning` | `ace-messages`, `ace-message` with `ace-header`, `ace-title`, `ace-control ace-close btn-close` and `ace-content`, the severity `ace-message-danger`, `ace-message-success`, `ace-message-info` or `ace-message-warning` |
| Dialog about unsaved changes | `academic-persons-profile-editing__dialog rounded-0 border-0 p-0 shadow` with `p-4`, a heading `h4 mb-3` and the buttons `btn rounded-0 btn-*` | `ace-dialog` with `ace-content`, `ace-title`, `ace-copy` and `ace-actions`, the buttons `ace-cancel`, `ace-discard` and `ace-save` |
| Profile list | a heading `h2 fw-normal mb-4`, `table-responsive` around a `table table-striped align-middle mb-0`, the image `academic-persons-profile-editing-list__image`, the name `fw-medium text-break`, the state `badge text-bg-secondary`, the actions `btn rounded-0 btn-link` | `ace-title`, `ace-table-wrap` around an `ace-table` with `ace-header` and `ace-content`, rows `ace-item`, `ace-profile` with `ace-image`, `ace-title ace-name` and `ace-state`, the actions `ace-controls` with `ace-link ace-control ace-view` or `ace-edit` and `btn btn-link` |

The state classes the scripts write change with the markup:

| State | Before | After |
| --- | --- | --- |
| Hidden element | `d-none`, the column heads of a document list `d-md-flex` | the attribute `hidden` |
| Severity of the status toast | `bg-danger`, `bg-success`, `bg-info`, `bg-warning` | `ace-message-danger`, `ace-message-success`, `ace-message-info`, `ace-message-warning` |
| Counter over its limit | `text-danger` | `ace-limit-exceeded` |
| Empty preview | `text-body-secondary` | `ace-empty` |
| Rich text preview with a value | none | `ce-bodytext` |
| Refused field | `is-invalid`, the message in the `invalid-feedback` of the field or of its `form-check` | `is-invalid`, the message in the `ace-message` of the field or of its group |

The classes `is-invalid`, `active`, `show`, `showing`, the drag classes
`is-drag-active`, `is-dragging`, `is-drop-before`, `is-drop-after` and
`is-drop-at-end`, `is-image-closing`, the column widths `col-lg-*` and the
transition classes keep their names.

## Impact {#impact}

-   A site stylesheet that styles the profile editing view or the profile list
    through the classes of the column *Before* no longer matches.
-   A theme stylesheet that styled the view through `toast`, `badge`, `alert`,
    `form-control`, `form-select` or `form-check` no longer reaches it. Where
    the Bootstrap toast script is on the page, it still shows and hides the
    status toast.
-   An override that keeps `d-none` on the editor of a field, its actions, an
    empty state or the column heads of a document list keeps them hidden for
    good: the scripts toggle the attribute `hidden` only.
-   An override that drops `ace-message` from a field or a group loses the
    message of a refused value.

## Affected Installations {#affected-installations}

Every installation that renders the profile editing plugin and styles it or
overrides its templates.

## Migration {#migration}

1.  Move the selectors of the site stylesheet from the classes in the
    column *Before* to those in the column *After*. The chapter
    [Styling](https://docs.typo3.org/permalink/fgtclb/academic-persons-edit:styling@main) shows how the markup of the profile list and the
    editor is built up, and the stylesheet of the development instances is a
    complete example, see [Breaking: The profile editing plugin ships no stylesheet](https://docs.typo3.org/permalink/fgtclb/academic-persons-edit:breaking-profile-editing-ships-no-stylesheet@main).
1.  A template override is compared with the shipped template of 3.0 and
    adopts its markup. It keeps the `data-pe-*` attributes, the attribute
    `hidden` where the shipped template renders it, and the
    `ace-message` of a field or a group, see
    [Important: The profile editor is Fluid, driven by five custom elements](https://docs.typo3.org/permalink/fgtclb/academic-persons-edit:important-profile-editing-custom-elements-and-prototypes@main).
1.  Flush the TYPO3 caches, so the Fluid template cache is rebuilt.