Dropcap Shortcode Issue

Borde · April 18, 2018, 12:20pm

Hi,

Im using the dropcap shortcode - it is the first word of the first paragraph. Unfortunately it seems WordPress auto-formatting (wpautop) causes the  tag to not wrap around the first paragraph, the first paragraph has no  surrounding it and instead inserts an empty  below.

Having checked the integrity demo it seems this also occurs on your example page:

http://demo.theme.co/integrity-1/shortcodes/dropcap/

I have found references to this issue on the web which suggested changing the priority of wpautop in functions.php

remove_filter( ‘the_content’, ‘wpautop’);
add_filter( ‘the_content’, ‘wpautop’, 99);

This does indeed fix the broken first paragraph but it has the effect of causing an additional empty  inside of the content-band shortcode output and also wraps the blockquote text and the <cite> inside a  tag - it also messes with various other things so perhaps this is not the best solution here…

Any assistance would be appreciated!

Alaa · April 18, 2018, 6:05pm

Hi Borde,

I understand that you are using blockquote with dropcode shortcode, the snippet you shared could be a solution for simpler implementation, but for your specific case, I would recommend using a pure CSS solution, just styling the first letter in the first paragraph should work without any complications.

Adding this CSS code to (X > Theme Options > CSS) should do the trick:

.entry-content > p:first-child::first-letter {
    float:left; 
    font-size:4em; 
    color: #ffffff; 
    background-color: #ff0000;
    margin-right:0.10em; 
    line-height:90%; 
    text-shadow: none; 
}

However, we might need to check one of your pages with this implementation to customize the CSS code further.

Thanks.

Borde · April 18, 2018, 6:40pm

That’s not an option unfortunately, my client needs to add the dropcap on a post by post basis so this cannot be done automatically using the css selector.

Our current template uses a dropcap shortcode without breaking the first paragraph tag, so clearly something in pro is causing this. This is a vital feature of my clients site so fixing this is a priority.

This has nothing to do with the blockquote, I was just explaining the behaviour of your other shortcodes when I change wpautop’s priority.

I have also found changing the priority of do_shortcode also fixes the issue but it results in empty paragraph tags which need removing. I can resolve this also but the blockquote shortcode then contains a paragraph tag which I believe is not semantically correct.

The following code was used:

add_filter( 'the_content', 'do_shortcode', 1);

function pd_remove_unwanted_p($content){
    $content = force_balance_tags( $content );
    $content = preg_replace( '#<p>\s*+(<br\s*/*>)?\s*</p>#i', '', $content );
    $content = preg_replace( '~\s?<p>(\s|&nbsp;)+</p>\s?~', '', $content );
    return $content;
}
add_filter('the_content', 'pd_remove_unwanted_p');

ruenel · April 19, 2018, 2:08am

Hey There,

You can make use of the custom css to get rid of the empty p tags. Please use this:

p:empty {
  display: none;

Or you can insert a custom JS code in the Theme Options > Custom JS

jQuery('p:empty').remove();

Hope this helps.

Borde · April 19, 2018, 9:21am

Thanks, I am aware of these options but as I said - changing the priority of either do_shortcode or wpautop then causes further problems with other plugins, WooCommerce specifically and also wraps the text within a blockquote in a paragraph (which is not empty so cannot be removed). I would rather solve this problem than apply a filter which could break other things also.

Now, being that this is not an issue on my current template I have dug a little deeper and have found the source of the problem…

/wp-content/themes/pro/cornerstone/includes/utility/helpers.php

/**
 * Remove <p> and <br> tags added by wpautop around shortcodes.
 * This is used for anything within a Cornerstone section to keep
 * the markup clean and predictable.
 * @param  string $content Content to be cleaned
 * @return string          Cleaned content
 */
function cs_noemptyp( $content ) {

	$array = array(
		'<p>['    => '[',
		']</p>'   => ']',
		']<br />' => ']',
	);

	$content = strtr( $content, $array );

	return $content;

}

If I change…

$content = strtr( $content, $array );

to:

$content = $content;

The paragraph tag correctly wraps without having to change any filters - now, I am not actually using cornerstone on these posts so not sure why this function affects the dropcap shortcode??? Though I have found 4x empty p tags! one before the blockquote and another after and again, before and after the content-band.

Perhaps you can discuss this with your devs and see if there is a more suitable solution to this issue…

Borde · April 19, 2018, 9:58am

It seems that the cs_noemptyp function is a known solution to wpautop shortcode formatting - not entirely sure why this template is causing wpautop to add extra paragraphs in the first place but I guess the extra p’s I am seeing now is because this function is no longer applying the array - in which case I would need to remove the extra p’s…

Which takes us full circle to my original post!

function pd_remove_unwanted_p($content){
    $content = force_balance_tags( $content );
    $content = preg_replace( '#<p>\s*+(<br\s*/*>)?\s*</p>#i', '', $content );
    $content = preg_replace( '~\s?<p>(\s|&nbsp;)+</p>\s?~', '', $content );
    return $content;
}
add_filter('the_content', 'pd_remove_unwanted_p');

This works to remove the additional empty p that appears before the dropcap but for some reason it does not remove the extra p’s before and after blockquote & content-band. Perhaps a variation of this code is more suitable than the cs_noemptyp function???

Borde · April 19, 2018, 12:32pm

So, having gone insane trying to get rid of the extra p tags (only the first one is removed but the ones around the shortcodes are not) I took a slightly different approach…

A small adjustment to cs_noemptyp and the dropcap is fixed without changing any priority! - not sure if this is the answer but it works, however I’m not entirely sure how to override this function in my child theme and indeed if this is the appropriate method, as perhaps you have a better solution to fix this in the parent theme in the next update instead?

function cs_noemptyp( $content ) {

	$array = array(
		'<p>[dropcap'    => '<p>[dropcap',
		'<p>[highlight'    => '<p>[highlight',
		'<p>['    => '[',
		']</p>'   => ']',
		']<br />' => ']',
	);

	$content = strtr( $content, $array );

	return $content;

}

I added the highlight shortcode as this also breaks the paragraph if it is at the beginning (I assume this is true for all shortcodes used at the start of a paragraph)

Borde · April 19, 2018, 2:12pm

This also does the job…

function cs_noemptyp( $content ) {
	
	$content =  shortcode_unautop($content);

	return $content;

}

But it results in 2x empty p tags appearing - 1x before the dropcap and 1x at the end of the post so I then need to remove it using:

add_filter('the_content', 'remove_empty_p', 20, 1);
function remove_empty_p($content){
    $content = force_balance_tags($content);
    return preg_replace('#<p>\s*+(<br\s*/*>)?\s*</p>#i', '', $content);
}

This is likely something to do with using [columnize] shortcode which wraps the beginning and end of the post.

rad · April 19, 2018, 6:03pm

Glad it’s okay now and thanks for sharing!

Borde · April 19, 2018, 6:44pm

Are you having a laugh?

How about some customer service here…

The main change requires editing a cornerstone file and I have no idea how this will impact how cornerstone works.

/wp-content/themes/pro/cornerstone/includes/utility/helpers.php

As far as I can tell the code you are using to strip the empty p and br tags is the source of this issue - I would imagine this is something you need to resolve yourselves… Wordpress has a built in feature to deal with this issue shortcode_unautop - if this is the best way to FIX the issue then it should be done by ThemeCo don’t you think?

As I suspected, the additional code to strip the 2x empty p tags is only required because I have also used the columnize shortcode - there are no empty p tags using shortcode_unautop, only if I also use columnize which will then require the additional code in functions - looking at the regex it seems to also cover the br tags so this may or may not be required depending on the page content.

However, it may be the solution to why you are using cs_noemptyp in the first place - if my solution using shortcode_unautop does not break cornerstone then great, but I do not want to edit parent theme files to resolve broken shortcodes which are provided by the theme and I should not have to spend several hours more testing.

/**
 *  Remove empty <p> tags
 */

add_filter('the_content', 'remove_empty_p', 20, 1);
function remove_empty_p($content){
    $content = force_balance_tags( $content );
    $content = preg_replace( '#<p>\s*+(<br\s*/*>)?\s*</p>#i', '', $content );
    $content = preg_replace( '~\s?<p>(\s|&nbsp;)+</p>\s?~', '', $content );
    return $content;
}

I am more than happy to ‘Share’ as you put it - but being a paid customer I expect a better level of support than you have provided here. I am contacting you with an issue in your implementation, not spamming your forums with basic questions which fall way out of scope in regards to support - yet you seem more than happy to waste your time replying to ‘How do I change the colour of XYZ’

I am not impressed!

rad · April 20, 2018, 10:36am

Hi there,

I thought you meant it’s now working with your customized code.

And yes, Wordpress has that feature built-in, but, it works for the entire (whole) content. The purpose of creating our own version of it is to only implement line breaks to specific element like text element or any content element. Now, imagine if we’ll not do that, you’ll get line breaks in each section and layouts, or even header and footer since they uses the builder.

Wordpress content are meant for content only, and in order for it to work in our builder then we have to alter some of its feature. Even other builder uses it too to prevent  and   showing in random places where it’s not needed.

In short, it’s removed but added to specific element. I don’t recommend removing or edit that code, it will cause more issues than good. And for temporary workaround, please add this CSS to your global custom CSS.

p:empty {
display: none !important;
}

For  that appears in the first paragraph.

We’ll then check this issue and I’ll add this to our issue tracker once we gathered enough information. Our demo still uses old version, what version you’re currently using? I tested it on my installation and there is no issue with line breaks (,  ) as it’s properly wrapped by text element.

Thanks!

Borde · April 20, 2018, 10:48am

I understand how this works - what I am trying to explain to you is, that in order to fix the broken shortcodes I will need to edit a cornerstone file, it is because of this that I require the additional code to remove 2x unwanted p tags.

I am using the latest version of Pro - add a dropcap as the first item in the first paragraph and you will see that your code from helpers.php breaks the first paragraph - it is not wrapped in a p tag and instead an empty p tag is inserted below - this is true for all shortcodes added to the beginning of a paragraph.

This is understandable as the code below is stripping the p tag.

function cs_noemptyp( $content ) {

	$array = array(
		'<p>['    => '[',
		']</p>'   => ']',
		']<br />' => ']',
	);

	$content = strtr( $content, $array );

	return $content;

}

If you do not understand this issue I suggest you escalate this to someone who does - I have already wasted enough time on this.

I purchased your theme which came with shortcodes that are broken. Please fix them.

rad · April 20, 2018, 6:54pm

Hi there,

I understand what you mean, but you shouldn’t edit the file and it’s added there for a reason (which I think you understand why, as you said). I’m not saying we’ll not fix any issues or bugs, it’s just like I said, we need to gather information first.

And since you didn’t provide a sample URL of your site where we can test, then I only based the troubleshooting from the demo URL that you referenced.

Perhaps you can provide a video recording of how to reproduce this issue? That way, I could investigate it on my installation the same way as you did. Or you can simply provide a sample URL and login credentials so I could check it directly. Again, this works on my end, I can’t say it’s not a bug but it’s early to say if it’s a bug.

Thanks!

Borde · April 21, 2018, 10:31am

Ok, perhaps we should just start again…

Wordpress v4.9.4
Pro Theme v2.0.4

All plugins have been disabled and I have switched to the parent theme.

My modification of helper.php (shortcode_unautop) has been removed and I have created a blog post where you can see the issue - modifying helper.php will fix the broken shortcodes/paragraphs and results in 2x empty p tags when also using the columnize shortcode.

Details will follow in a secure note.

rad · April 21, 2018, 3:23pm

Hi there,

But that page is not created from the builder, it’s just plain content added in Wordpress editor with a bit of shortcodes. And helper.php is only active within the builder, or in a page created in cornerstone.

And it’s only normal for the first paragraph not to be wrapped by  since it doesn’t have line breaks. Those tags are only applicable for the next paragraph separated by line breaks.

Thanks!

Borde · April 21, 2018, 6:53pm

I KNOW it is not created with the page builder - I told you this already, yet the code in helper.php IS causing this. Just for fun …and to humour me - delete the function entirely then reload the blog post…

“Warning: call_user_func_array() expects parameter 1 to be a valid callback, function ‘cs_noemptyp’ not found or invalid function name in /wordpress/public/wp-includes/class-wp-hook.php on line 286”

Now tell me that this function is only active if cornerstone is enabled!

It is NOT normal that the first paragraph is like this - I have never heard such rubbish.

It IS a paragraph and SHOULD be wrapped in a paragraph tag - if you remove the dropcap you will see that the first paragraph is then correctly wrapped.

I guess you didn’t notice the highlight shortcode on the third paragraph? - this is also not wrapped in a p tag, is this normal as well? In both instances you will see that there is an empty p tag below - the ones that should be wrapping the damn text!

Seriously, please escalate this to someone else I have had enough now. You clearly have no idea what you are talking about.

christopher · April 22, 2018, 5:46am

Hi there,

Thank you for the information. I read the back and forth from top to bottom and I added this to our theme issue tracker as a bug.

Please stay tuned for the upcoming releases to have a fix regarding this specific use case of the Dropcap shortcode. You can always check the Changelog to see if this case is considered in a specific release or not.

There is no ETA regarding bug fixes and you will get the information as soon as the CHangelog is updated.

Thank you for your understanding and patience.

Borde · April 22, 2018, 8:19am

That’s great, I get the impression based on the previous post that perhaps this function should not be fireing when cornerstone is not in use - it’s a dev site so waiting for the update is no problem.

Thanks for your assistance here.

christian · April 22, 2018, 11:28am

You’re welcome.

system · May 2, 2018, 11:28am

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.