[Kirill ‘kkm’ Katsnelson]

Posting a second message in a row in a separate thread for the ease of tracking.

I may be using the same shortcode 100 times on the page. I noticed in Firefox debugger that every occurrence has its stylesheet repeated. And it’s not quite an insignificant stylesheet, 85 lines of CSS (the tooltip I mentioned in my previous post).

It’s not only the size, but it’s also hard to find which one of the identical inline style blocks is actually used. All but one are grayed out and struck through, because the browser apparently uses the latest one in page. So it is kinda hard to debug. I’m using the element picker from FF debugger, and its style all overridden and struck out… and the next one… and the next one… so I scroll the style window until I find one. Not very efficient.

Is it possible to grab all styles, and keep only distinct ones? I have no real idea how hard or easy it could be done with WP from an extension, but please consider that if it’s doable. One idea is hash the whole string between <style> and </style> string with eg MD5 or SHA1, and store that in the ID <style id=”shortcoder-700bbacc6876a2d8214207174deb368f41d3ce55″>….</style>. Easy to check if it is already in the doc, as the ID should be unique.

Of course I can copy the style into the page header (I added a hook for modifying the header in a “site plugin” already) and slim down the shortcode to HTML only, but that kinda goes against the grain of the simplicity that Shortcoder gave me.

Cheers!

[Aakash Chakravarthy]

Hi Kirill,

I guess your request is beyond the scope of the plugin.

My suggestion would be following.

Create one shortcode for CSS, paste all the CSS your page needs in that.

Create one shortcode for HTML, paste all the HTML in that.

Use the CSS shortcode only “once” in the post/page.
Use the HTML shortcode multiple times as required.

By this way the CSS is not duplicated.
This is a manual operation, but you have to control and be aware of what CSS the page needs and create separate CSS group shortcodes accordingly.

Thanks,
Aakash

[Kirill ‘kkm’ Katsnelson]

Hi Aakash, yhanks for the response. Yeah, that’s a good idea, at least I would be able to keep all styles in one place without editing my plugin’s .php files.

Can even make [sc name="mysitestyles"/] and lump’em all.

Just wondering, if you don’t mind: is this a WP limitation (as in “WP shortcode API do not have that functionaliy”), or just an area an experienced programmer would rather not get into (as in “it has been known so fragile and inconsistent and varying between version so that’s a whole new can of worms?” 🙂 My adding of a <span> wrapper to the paragraph block menu was not a simple or intuitive operation, for sure! 🙂 And I could not even enable a keyboard shortcut for it without causing the WSOD, so I used it in two clicks instead of one keystroke. Ugh.

I’m asking just out of curiosity. I’m trying to understand the software that I am using at least to some degree.

Thanks!

-kkm

[Aakash Chakravarthy]

Hi Kirill,

Sorry, I didn’t get your issue regarding WSOD and adding span tag.

Could you please explain in detail the steps you tried and what happend ?

Thanks,
Aakash

[Kirill ‘kkm’ Katsnelson]

Sorry Aakash, I was very unclear. That happened BEFORE I discovered you plugin!

I needed a simple <span class=”term”>xxx</span>, as I am writing a documentation site, and these spans may come 5 times in a paragraph. First, I tried to find something premade on wp.org. But when I go through that site, I have an impression that all thousands of plugins, are just clones of each other, doing essentially less than a dozen different things. And, guess what, wrapping selection into a styled span is not one of them!

I needed my so often, that I decided to bite the bullet, read WP guide on extending the Gutenberg paragraph block, and concocted some code. My item appeared on the same toolbar where “bold”, “italic” etc are. Only it was in a drop-down menu like “more”, where e.g. “<> Code” and other rarer items live. This worked, but was inconvenient: I wanted to press Ctrl+g (for some value of g) to invoke the command, instead of two clicks. And this is where my several attempts all have ended up in WSOD. And I killed 3/4 or a workday on extending the editor with just one freakishly simple item! Not bad given that I’m an NLU scientist, and PHP and CSS are not among my first-line skills. I used some minimal CSS when writing something like dynamic presentations of my work, but it was my first PHP code in the 50+ years of my life. And, of course, could find a much better use for these 5 hours I spent on my hack…

AFTER I discovered your plugin, I stopped using my half-backed hack, and reimplemented the same span wrapper in about 60 seconds Shortcoder! That was my point which I explained so confusingly.

Sorry again for being unclear; it relates not to your plugin but the stuff I tried before it. The more I use Shortcoder, the happier I am. Who would have thought that styling your writing can be that simple!

Also, I followed your advice and put all styles into a single SC that I place into a Gutenberg HTML block. This has an advantage that I can add styles unrelated to shortcodes: for example, the Paragraph block (most blocks, in fact) have “Custom Style” edit box. When I want a new style, I can just edit this “all-styles” shortcode and, since it’s already on every page, use it everywhere.

My site is not online yet, but your aakashweb.com and Shortcoder are both already in the footer credits on every page. And please ponder the idea I added to the note when sending you a coffee–I’m sure you can get a better exposure via networking. I know that Web design is a very competitive area, and it’s hard to live off it; and this plugin may be an advantage for you. It’s the best of both worlds: all Web people know some HTML, JS and CSS, and one does not need to know but any these things to create their own unique experience. No PHP and knowledge of WP guts required. IMO, you hit the very sweet, a golden spot in extending WP. Promote it, and it will promote you!

[Aakash Chakravarthy]

Hi Kirill,

Very happy that you are using the plugin effectively !

Please note that adding a link of my website to the footer your website is not required 🙂
Just use the plugin normally and make the best of it !

Thanks,
Aakash

[Author]

Posts