"block-yui" does not have its "fe-block" analog

Hello,

I've noticed that many blocks on my website start with "block-yui"; however, they often have their analogs represented as "fe-block."

For one specific "block-yui" block, I don't have an "fe-block" analog, which means I can't use that block in the CSS code—it doesn't work properly when I target the "block-yui" ID.

Is there any chance I can target the "fe-block" ID instead of the "block-yui" ID?

Example:

The analog for the block "block-yui_3_17_2_1_1696246643060_14857" is "#block-1b8f20a1de12b8a688ab"

No analog exists for the block "block-yui_3_17_2_1_1696246643060_14380"

Website: https://sh.consulting/email-security
Password: AAA!!!

I am trying to make the following CSS work: when I target the #block-yui, it does work properly, but if I target the #block-, it doesn't work as needed. This issue occurs in two similar cases when targeting the #block ID.

.fe-block-4f568e01d51dbe580861:hover ~ #block-yui_3_17_2_1_1696246643060_14380 {
    opacity: 1 !important;
}
#block-yui_3_17_2_1_1696246643060_14380 {
    opacity: 0 !important;
}

Any insights on this will be greatly appreciated!
Thank you,
Alex

Hi, you can install Square Space ID Finder, it gives you ID of each block. 

The fluid engine wrapper around blocks use dynamic IDs so you can't use them for targeting by ID.

You can target the FE wrapper via a class name. The class name is constructed from the block id.

So if you have block ID block-0158259a68ce51919d53 it's parent FE wrapper class name will be fe-block-0158259a68ce51919d53.

So to target the FE wrapper you'd do something like...

.fe-block-0158259a68ce51919d53 {

  /* your declarations here */
  
  }

Let us know how it goes.

Thank you, melody495! Thanks, that's great advice and already I have this in place, but it still shows me the #block-yui_3_17_2_1_1696246643060_14380 ID... 
 

Thank you, creedon!

Your response is truly appreciated. The idea of targeting the FE wrapper via a class name is great, but the problem is that I couldn't figure out the specific FE block for #block-yui_3_17_2_1_1696246643060_14380.

I've tried using both the Squarespace ID Finder and inspecting every single block on the page in Inspect mode, but I still can't determine which block I should target instead of #block-yui_3_17_2_1_1696246643060_14380...

I am trying to target the block that is highlighted in red in the screenshot.

7 minutes ago, Alexsh said:

but the problem is that I couldn't figure out the specific FE block

I don't know if this will help but I view FE blocks as simply Classic Editor blocks with an FE wrapper around them.

If you find the block id with Squarespace ID Finder or other method then use the formula I describe in my previous post then you can target the FE block with CSS.

Some perspective. I don't recall ever having to target the FE wrapper around what is a block in CE. Of course that doesn't mean a whole lot in the grand scheme of CSS effects.

You mentioned a block and the FE wrapper not having the fe class name pattern I mentioned. As far as I can tell is does.

Thank you, creedon!!!

I'm facing an issue where targeting the "yui" prefixed block doesn't activate the hover effect I want. To achieve this effect, it seems I need to target a block ID without the "yui" prefix, which I'm unable to locate.

For instance, consider the large black box with the text "Hijack your email address and represent themselves as you." The hover effect works there because I'm targeting the block ID ".fe-block-1b8f20a1de12b8a688ab."

However, if I try to target its corresponding "yui" ID, which is "yui_3_17_2_1_1696246643060_14857" for the same block, the hover effect fails.

This issue repeats with the first big black box containing "Read your emails and alter their content." Using the "yui" prefixed ID doesn't trigger the hover effect.

To sum up, targeting the block ID ".fe-block-yui_3_17_2_1_1696246643060_14380" does not initiate the hover effect — the text doesn't reveal when hovering over "DNS Hijacking," which is linked to the block ID ".fe-block-4f568e01d51dbe580861."

melody495, You're a genius! That was really because of the CSS selector "~" and the before/after pseudo-elements.

It seems like there's no pure CSS solution for revealing the text in the blocks sitting before the hover blocks.

7 minutes ago, Alexsh said:

It seems like there's no pure CSS solution for revealing the text in the blocks sitting before the hover blocks.

You are welcome! Just delete that block , and recreate it, then it would come after everything else, and your code would work as with the other pairing

Edit: copy and paste (duplicate), and delete original

Just a note that id attributes that start with yui are dynamic so you can't rely on them as they can change every page load.

Ids that are stable start with a prefix like block to let you know they are stable.

Also SS does not assign stable ids to all elements.

On 11/2/2023 at 4:03 PM, melody495 said:

You are welcome! Just delete that block , and recreate it, then it would come after everything else, and your code would work as with the other pairing

Edit: copy and paste (duplicate), and delete original

Hey melody495! Sorry, but I didn't get it. 

CSS works when the block containing the text that needs to be displayed is next to the block I hover over. However, if I change their order, the CSS no longer works — this confirms what you initially suggested about the "~" selector.

When you mentioned deleting and recreating it, what exactly did you mean? I tried that, but it didn't work. The reason is that the order of the blocks is important, not the sequence of their creation... Or did I perhaps misunderstand you?

1 minute ago, Alexsh said:

When you mentioned deleting and recreating it, what exactly did you mean? I tried that, but it didn't work. The reason is that the order of the blocks is important, not the sequence of their creation... Or did I perhaps misunderstand you?

Hi, I thought the order of creation matters, hence I said to create a new text block. But I think you just confirmed by testing that what matters is the ordering on the page, rather than creation.