kirbytextWrap - Remove or replace enclosing p tag and more

Plugins
,
1

Hello,
I made my first Kirby Plugin! Let me introduce you KirbytextWrap().

Remove OR replace the <p> </p> enclosing tag on kirbytext() and add somes HTML attributes.

  • Work for both K2 and K3 version.
  • CLI and Composer support.
  • Keep yours kirbytag working.

Usage:
$page->title()->kirbytextWrap('h1') Will replace the <p> enclosing tag by <h1>.
$page->title()->kirbytextWrap('h1', ['class' => 'title']) Will replace the <p> enclosing tag by <h1> and add a class attribute with its value.

Another example with more attributes:

<?php
$attr = [
    'class' => 'dallas',
    'id' => 'larry',
    'aria-hidden' => 'true',
    'data-animation' => true,
];

echo $page->title()->kirbytextWrap('p', $attr);

Feel free to report bug or suggestion.
Download and docs: https://github.com/yoanmalie/kirbytextWrap

1 Like
2

Update v1.1.0!
It uses the new kirbytextinline() method available since Kirby 3.1.0 and still support the Kirby 2 and Kirby 3.0 versions :slight_smile: .

3

I’ve just updated a new version (1.2.0) who fix the Composer install.
As i didn’t noticed previously, the installation through Composer was failing… :sweat:

If you find something weird or something that just didn’t work, please let me know here or open an issue.

Thanks!

4

Hey yoanm,

I tried to use the kirbytextWrap plugin. Everything works fine with the described

tag. But all other formatting will not be rendert correctly from the textfield.
I also activated markdown extras! Do you have an idea how to fix it?

Thanks
Jan

5

Hi,

Thanks for using the plugin :slight_smile:
Which formatting are you trying to do? Can you please give me the part of the code where you’re using kirbytextWrap()?

Thanks!

6

Hey yoanm,
thanks for the fast feedback.
I also use the Kirby-Builder

The template part is inside: Snippets > blocks

<?= $data->text()->kirbytextWrap('p', ['class' => 'f5 f3-ns lh-copy mw7 ma0']) ?>

and this is the result. The list and other markups will not be rendered.

Bildschirmfoto 2020-05-20 um 15.54.59
Bildschirmfoto 2020-05-20 um 15.54.59846×322 31.3 KB

Do you need something more?

7

Thanks for the informations, can you also post the Blueprint part needed? So I can setup the test environment fastly.
At this time I have not so much time but I promise to give a look when I’m free!

Ping @timoetting from the kirby-builder plugin, in case if he know why this is happening.

8

I also made a test without the Kirby Builder, but received the same result.
I updated to the newest Kirby Version 3.3.6
the template part: snippets > blocks > paragraph.php

    <div class="fn fr-ns w-60-ns">
    <?= $data->text()->kirbytextWrap('p', ['class' => 'f5 f3-ns lh-copy mw7 ma0']) ?>
    </div>

the blueprint part: blueprints > blocks > paragraph.yml

    name: Paragraph
    label: Paragraph
    fields:
      category:
        label: Category
        type: text
      headline:
        label: Headline
        type: text
      text:
        label: Text
        type: textarea
        buttons:
          - bold
          - '|'
          - italic
          - '|'
          - ul
          - '|'
          - link
          - '|'
          - email

and the blueprint where I include the blocks:

    title: Default
    preset: page
    fields:
      mybuilder:
        label: Page Builder
        type: builder
        columns: 1
        max: 10
        fieldsets:
          h1: blocks/h1
          paragraph: blocks/paragraph
          singleimage: blocks/singleimage
          imageslider: blocks/imageslider
          columns: blocks/columns
          blockquote: blocks/blockquote

thanks in advance for checking.

9

The result is not that surprising, because the method takes all field content and wraps it inside the given tag. So it is only intended to be used with single paragraph text.

10

sorry for the terrible code in the post, but the editor ignore the function of the toolbar!

that means, I can’t use additional formatting/markup with this plugin in the paragraph, no links, no list…

11

You have to wrap blocks of code within three backticks on a separate line before and after the code.

12

Not with this method, no. As I said, I’m not quite sure what the intended use is, but if you look at the source code, you will see that it removes all p tags and then wraps the resulting code within the given tag, which doesn’t make any sense for more than a single paragraph.

What you want to achieve can be done with a custom field method, that uses regex to replace all p tags with the desired p tags. Basically like the anchorHeadlines() function here: https://github.com/getkirby/getkirby.com/blob/1f00bcaed9fe0fcab58c16872cfd45f70532c9a0/site/plugins/site/fieldMethods.php#L5, but of course for p tags and the desired output.

13

Hey texnixe,
thank you for squeezing in between.
I mostly use http://tachyons.io/ for theming, so I thougt the ktW plugin is a good solution to give the class parameter to the paragraph, but also use all formattings from the toolbar/textfeld.
Is there an other way. Cause I am a noCoder, your previous link does not help me that much!

14

Do you only need a way to replace the p tags?

Then you can create a plugin. Create a new folder in site/plugins, e.g. site/plugins/preplace and inside that folder an index.php file. In that index.php, put the following code:

<?php

Kirby::plugin('texnixe/preplace', [
  'fieldMethods' => [
    'pReplace' => function ($field, $classes) {

      $pattern = 'p';

      $field->value = preg_replace_callback('!<(' . $pattern . ')>(.*?)</\\1>!s', function ($match) use ($classes) {

        return '<' . $match[1] . ' class="' . $classes . '">' . $match[2] . '</' . $match[1] . '>';
      }, $field->value);

      return $field;
    }
  ],
]);

In your template/snippet, use like this:

<?php echo $page->text()->kirbytext()->pReplace('f5 f3-ns lh-copy mw7 ma0'); ?>

Or in your example replace $page with $data.

This will then replace a p tags in the field with p tags with the given class(es).

15

ah great, this way I’m a bit more flexible with other formats in case.
Thanks a lot – texnixe

16

This could actually be extended to work with other tags as well, if necessary, but that would be a bit more complicated.

Here is a version that you can use with an array of replacements, I renamed it addClasslist()

<?php

Kirby::plugin('texnixe/addClasslist', [
  'fieldMethods' => [
    'addClasslist' => function ($field, array $replacements = []) {

      $patterns = implode('|', array_keys($replacements));

      $field->value = preg_replace_callback('!<(' . $patterns . ')>(.*?)</\\1>!s', function ($match) use ($replacements) {

        return '<' . $match[1] . ' class="' . $replacements[$match[1]] . '">' . $match[2] . '</' . $match[1] . '>';
      }, $field->value);

      return $field;
    }
  ],
]);

You now have to provide an array of tags/classlists

<?= $page->text()->kt()->addClasslist(['p' => 'f5 f3-ns lh-copy mw7 ma0', 'ul' => 'list-inline', 'figure' => 'whatever']) ?>

Note that this will not work correctly with elements that have already classes attached to it, like elements added via Kirbytags. So use with caution.

This plugin is even better if you need more advanced stuff: https://github.com/hananils/kirby-tree-methods