Prefix and Suffix CSS glitch

  • Resolved Gin

    (@rawdolphe)


    9 months, 3 weeks ago

    Hi Phi,

    Thanks for this really great plugin, I am testing it locally since yesterday and I think there is CSS glitch with the Prefix and Suffix in the Block.

    It’s adding some margin on top of the Prefix or Suffix, and I really can’t see where it’s coming from.

    Please note, I am not great with php and I still don’t have a clue how to insert code in templates, so my setup is very simple, as follow — not doing anything fancy:

    I add a couple of Meta Fields in the WordPress post, nothing fancy, just at the bottom of the page, enabled from the Preferences > Panels > Custom Fields…

    Than in the Gutenberg Query loop / Archives, I add a couple of Blocks and in Meta field settings > Field Type > I pick “Dynamic field”, then in Field Name I add the field name created in the post. So I use two Blocks, presented inline and Display Output is Inline block.

    For now I could always add the css as shown below, but I thought you might like to now.

    Also, very important, this is happening a bit randomly; for example, it might add the top margin in the first block’s Prefix or Suffix, and then the next block is fine… then if you play with the settings and resave and the second Block with have the margin added and the first one back to normal… so it’s a bit erratic.

    Otherwise, I am so glad you created this plugin, I searched WordPress for the past two weeks for something like that, and yesterday only I persevered and decided to go through tons of pages through the search, it’s a shame because it deserves to be at the top of the search! 

    .wp-block-mfb-meta-field-block.is-display-inline-block .prefix+.value, .wp-block-mfb-meta-field-block.is-display-inline-block .value+.suffix {
    margin-left: 0.5em;
    margin-top: 0; /*0 or auto fixes it*/
}

    IMPORTANT UPDATE:
    Actually, the extra top margin is added to the css class “Value” and not prefix or suffix. But the glitch appears WHEN you add a prefix or suffix.

    • This topic was modified 9 months, 3 weeks ago by Gin.
    • This topic was modified 9 months, 3 weeks ago by Gin.
    • This topic was modified 9 months, 3 weeks ago by Gin.
Viewing 15 replies - 1 through 15 (of 15 total)
  • Plugin Author Phi Phan

    (@mr2p)

    Hi Gin @rawdolphe,

    Thank you for your kind words. Regarding the issue, could you please provide me with your test page? I don’t really understand what you mean. Or you can send me some screenshots of this issue.

    Thank, Phi.

    Plugin Author Phi Phan

    (@mr2p)

    Hi Gin @rawdolphe,

    Do you have any update on this issue? If you are still looking for some assistance, feel free to contact me. I’m more than happy to help.

    Phi.

    Thread Starter Gin

    (@rawdolphe)

    Hi Phi,

    Sorry, I was working all day Wednesday and Thursday, I didn’t forget you and was going reply, needed further testing.

    So yes I have some updates and good news, the issue is with the Dimensions > Width settings in Gutenberg Row Block, when you add a Prefix or Suffix.

    In my case I have two Meta Field Blocks inside the Row Block, next to each other, and I use the Prefix for both. Depends on the Width setting in the Row Block, it messes up the alignment of the Meta Field Blocks and adds some top margin as mentioned in the previous post.

    Sorry, I am not too good at explaining the issue with only few words, but at least I fixed it by simply clicking Reset Width for each Block in Row Block > Dimensions > Width (this is assuming you tried different settings…) – I don’t really know what the initial value for Width is and/or what is causing the extra margin width different settings, when you add a Prefix or Suffix, as the problem only occurs when I started adding a Prefix or Suffix. In short, there was no extra margin added when I didn’t use a Prefix or Suffix.

    The Width options are Fit, Fill and Fixed.

    Sorry for the long post.

    PS: of could I could send you some screenshots if you still want them, where would I send them to?

    Plugin Author Phi Phan

    (@mr2p)

    Hi Gin,

    You could take some screenshots by using some apps such as Lightshot and share the links with me here. You can also share the link of your website here, so I can take a look at it on the front end.

    Thread Starter Gin

    (@rawdolphe)

    Hi Phi,

    Ok, please see 2 x screenshots below.

    Where is says ‘Duration – GOOD’, there is no problem.
    Where is says ‘Duration – NO GOOD’, you can see that there is extra margin, this happens when playing with the Dimensions > Width settings AND if you add a Prefix / Suffix.

    I am working locally, so cannot provide a live url. It’s easy to reproduce though: WordPress Gutenberg 2024 theme, 1 x ROW Block, then inside the ROW Block 2 x Meta Field Blocks – then play with Dimensions > Width settings (see screenshot below) with and without Prefix / Suffix. It would be easier to spot the added margin if you have a top and bottom border like I did.

    Also, some thoughts, I see we have ‘Prefix / Suffix’ and ‘Value’ classes, not sure if these are interfering somehow? Because WordPress also have Prefix and Suffix in Categories and Tags. I just mention it, in case it could be useful.

    Please let me know if you need more info?

    Plugin Author Phi Phan

    (@mr2p)

    Thank you so much for the details. I understand what you mean now. I will look into it later. For now, you can use a little hack to fix it like: instead of inputting a prefix for the field, you can use a paragraph or heading block for the prefix and put it and the MFB (without prefix) into a row. That way I believe there is no margin issue.

    Thread Starter Gin

    (@rawdolphe)

    Thanks a lot for the suggestion Phi, I did what you said above originally, but for now it’s ok because it’s displaying fine without the extra margin when I set the Width to ‘Reset’. Not a problem ??

    Are you on Twitter and FB?

    Plugin Author Phi Phan

    (@mr2p)

    I have accounts on both Twitter and Facebook, but I rarely post anything on them. Here are my accounts Facebook, Twitter.

    Thread Starter Gin

    (@rawdolphe)

    Thank you, will follow you, it’s always good to post anyway to announce stuff and it’s free promotion ??

    PS: in case you celebrate, Happy Chinese New Year, this year it’s Dragon’s year—very auspicious year. Here in London it’s gonna be packed for the celebration in Chinatown, like every year.

    • This reply was modified 9 months, 2 weeks ago by Gin.
    Plugin Author Phi Phan

    (@mr2p)

    Hey Gin @rawdolphe,

    I have released a new version of this plugin. It includes the fix for the margin issue. Thank you very much for your feedback on this.

    P.S. I’m looking forward to seeing your site when it is ready.

    Phi.

    Thread Starter Gin

    (@rawdolphe)

    Hi Phi,

    Thanks a lot for the update, will install it asap!

    I am getting there with the site ?? Can’t really go faster as I am not able to work on it 24/7, but it’s nearing completion.

    Yours sincerely,
    Gin

    Thread Starter Gin

    (@rawdolphe)

    Hi Phi,

    I finally updated in my local install and checked the new features, very nice! Thank you for this great update.

    A couple of quick questions / suggestions:
    1) Instead of class=”prefix” or class=”suffix”, wouldn’t it more future proof and ‘safer’ to have for example class=”mfb_prefix” and class=”mfb_suffix” so we could target these directly if wanted, without having to worry in case of potential conflicts with other plugins? Just a newbie question.

    In my case I will change the color of the prefix/suffix only, so will have to add custom css, but that’s not a problem and it’s easy enough. Maybe I would also add some border, radiux, etc… so my this particular use I wouldn’t want to style the whole block.

    2) The Block setting FIELD TYPE has several options, I tried Default ‘meta’ and Dynamic field; both work for me. That’s ok, but I don’t understand the difference and which one should I pick – does it make a difference technically, somewhere in the backend? Would love to know!

    Otherwise, apart from more styling options in the ‘Prefix and suffix’ as mentioned above, it’s really great to have the very FIRST Gutenberg Block Meta Field plugin, super light and easy to use. I know it can do complex stuff as well, which I’d love to learn…, but as we speak I am more than happy with can I do with it.

    Yours sincerely,
    Gin

    Plugin Author Phi Phan

    (@mr2p)

    Hi Gin,

    Here are the answers to your questions / suggestions:

    1. I put prefix, suffix, value inside the block selector wp-block-mfb-meta-field-block, so it is safe. I think no good plugin will use those common names without wrapping them in a parent selector, so there is no conflict.
    2. Both meta and dynamic work the same in the front end. Some differences between them are as follows:
      • You can run shortcodes with dynamic field type
      • If your fields are not showing in the REST API then they can not be seen in the editor if the field type is meta, but dynamic field type shows them.
      • When you customize the block content via the hook meta_field_block_get_block_content, you can only see the changes in the editor if the field type is dynamic

    You can learn more about it from the plugin page.

    Phi.

    Thread Starter Gin

    (@rawdolphe)

    Hi Phi,

    Thank you very much for you answers, very helpful.

    Yes I did see everything you’ve explain, so I will use the parent selector—I hoped and ‘predicted’ that you might answer something like that and confirmed it, and I am very happy you did, as I am learning a bit more every day.

    Same for ‘meta’ vs ‘dynamic’, in the editor it is showing ‘my_duration’ or ‘No value’, and either option shows in the front end ok. Will stick to ‘meta’ then, what I am doing is extremely simple ??

    I did watch all the videos, but I don’t fully understand where everything is coming from, before you get to the settings… Also it’s very fast (yes we can slow down the speed – I know ?? ), and would love to have sound / voice over in the background to explain what’s happening (there are some free high quality text to speech converters out there, I think it’s always better than no sound at all).

    Anyway, once again, very happy, and it’s incredible how something this simple isn’t part of WordPress. I don’t that for the next release they will add basic custom fields, but it will need extra code and its very basic at the minute, I saw a video recently. You could always offer your service to WordPress and than sell the Pro version for those who need more control?

    PS: you should announce all updates on Twitter, Facebook and YouTube I say, because social media help gather momentum. And you have a very unique plugin right now, and of course you have the other great plugins as well.

    I am still considering making videos to help newbies out there, but I am not sure how I will do the screencast with my old machine running high Sierra!

    Have a wonderful day brother Phi

    Yours sincerely,
    Gin

    Plugin Author Phi Phan

    (@mr2p)

    Hi Gin,

    Thank you for your feedback on the videos. I will try to make them clearer and easier to follow in the future. I will also consider adding sound or voice over to explain the steps better. I appreciate your suggestion.

    WordPress will surely improve dynamic data in the future, starting from the next 6.5 version. I’m happy to offer my service and plugin to those who need it.

    Thank you for your advice on social media. I will create more blogs and videos. I hope that will help more people discover and use my plugin.

    I think it would be great if you could make videos to help newbies out there. I’m sure they would appreciate your guidance and tips.

    I hope you have a wonderful day too, brother Gin.

    Best regards, Phi

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Prefix and Suffix CSS glitch’ is closed to new replies.