Can you think of a good reason why underlying text still shows when a (non-transparent) block (or image) is opened above it?
I don't have a good reason as such, but more often than not, it turns out well having text elements take display priority over other elements.
But if Steven has any control over this behaviour, then I would agree with you that the display priority should be decided by the order of definition in the xml.
I have tried a couple of things, such as also making block 1 of the 'autohide' kind.
That partly worked, but I couldn't make that always open the TM with block 1.
After messing around with it, it would appear that the above is the best compromise around.
Did you have something like this? It won't always open with block1 though. If you exit the theater mode on block2, then that's where it'll open to.
<?xml version="1.0" encoding="utf-8"?>
<root>
<!-- hide playerbar -->
<element type="PlayerBar" xAnchor="Panel.Left" x="0" yAnchor="Panel.Top" y="-50" width="200" height="46" ></element>
<!-- global toggle button -->
<element type="Text" xAnchor="#Block1.Left" x="10" yAnchor="#Block1.Top" y="10" width="80" font="Segoe UI" style="Semibold" size="12" fg="200,100,0" mouseOverFg="200,200,200" onClick="OpenAutoHidePanel:#LyricsCropped">Toggle</element>
<!-- block1 lyrics cropped -->
<autoHide name="#LyricsCropped" allowPinning="true">
<element type="Block" name="#Block1" xAnchor="Panel.Left" x="50" width="500" yAnchor="Panel.Top" y="50" height="200" bg="0,20,0"></element>
<element type="Lyrics" xAnchor="#Block1.Left" x="80" widthDock="x:#Block1.Right" yAnchor="#Block1.Top" y="10" heightDock="y:#Block1.Bottom" font="Segoe UI" style="Regular" size="12" fg="180,180,180"></element>
<element type="Text" xAnchor="#Block1.Left" x="10" yAnchor="#Block1.Top" y="10" width="80" font="Segoe UI" style="Semibold" size="12" fg="200,100,0" mouseOverFg="200,200,200" onClick="OpenAutoHidePanel:#LyricsFull">Toggle</element>
</autoHide>
<!-- block2 lyrics full -->
<autoHide name="#LyricsFull" allowPinning="true">
<element type="Block" name="#Block2" xAnchor="Panel.Left" x="50" width="500" yAnchor="Panel.Top" y="50" height="800" bg="20,0,0"></element>
<element type="Lyrics" xAnchor="#Block2.Left" x="80" widthDock="x:#Block2.Right" yAnchor="#Block2.Top" y="10" heightDock="y:#Block2.Bottom" font="Segoe UI" style="Regular" size="10" fg="200,100,0"></element>
</autoHide>
</root>
Edit:
Some late thought which features a dirty hack...
Adding the following to the original LyricsFull panel should 'hide' the underlying text:
<element type="Text"
xAnchor="#Block1.Left" x="-84" widthDock="x:#Block1.Right" width="500"
yAnchor="#Block1.Top" heightDock="y:#Block1.Bottom"
font="webdings" size="375" fg="20,0,0">g
</element>