Add id and class to nodes

Or maybe you would like to have an optional possibility: So, you could use a Mixin.
I did it with:

# /Configuration/NodeTypes.MixinSmarterSelector.yaml

##
# MixinSmarterSelector
##
'Vendor.Site:MixinSmarterSelector':
  abstract: TRUE
  superTypes:
    'TYPO3.Neos:Content': TRUE
  ui:
    inspector:
      groups:
        yourGroup:
          label: yourGroup
          position: 4
  properties:
    id:
      type: string
      ui:
        label: 'Element-ID'
        reloadIfChanged: TRUE
        help:
          message: "Unique ID"
        inspector:
          editorOptions:
            placeholder: 'Unique ID'
          groups:
            yourGroup:
              label: 'yourGroup'
          group: 'yourGroup'
          position: 101
    class:
      type: string
      ui:
        label: "Element's Class"
        reloadIfChanged: TRUE
        help:
          message: "insert Class"
        inspector:
          editorOptions:
            placeholder: 'Classes divided with space'
          group: 'yourGroup'
          position: 102
#/Resources/Private/TypoScript/NodeTypes/MixinSmarterContentSelector.ts2

###
# MixinSmarterContentSelector: # get an «id» and «class» formfield in inspector
###
prototype(Vendor.Site:MixinSmarterContentSelector) < prototype(TYPO3.Neos:Content){
	attributes{
		id = ${q(node).property('id')}
		id.@if.condition = ${q(node).property('id') != '' && q(node).property('id') != null ? true : false}
		class = TYPO3.TypoScript:Array {
			addClass = ${(q(node).property('class'))}
			addClass.@if.condition = ${q(node).property('class') != '' && q(node).property('class') != null ? true : false}
		}
	}
}

Therewith, you have the choice to add «id/class» to different chosen nodeTypes.

#/Resources/Private/TypoScript/NodeTypes/XY.ts2

##
# Your new NodeType XY
##
'Vendor.Site:XY':
  superTypes:
    'TYPO3.Neos:Content': TRUE
     'Vendor.Site:MixinSmarterSelector': TRUE
   ...
1 Like