Option to wrap text

Alexandre Froger
(@frogerme)

1 year, 1 month ago
Currently:
```
.wp-block-kevinbatdorf-code-block-pro:not(.code-block-pro-editor) pre,
.wp-block-kevinbatdorf-code-block-pro:not(.code-block-pro-editor) pre code {
    white-space:pre!important;
}
```
It does not reflect the experience in the block editor, where it is a textarea.
The presence of !important is bad practice and makes things difficult.

I do understand the rationale behind the implementation, both from a UX/editing point of view, and because of the technical challenges for wide theme support.
However, in terms of design and output, wrapping text is a missing feature for long lines.

Examples use case that would benefit from such an option:
- WordPress Shortcode with many arguments
- WordPress block markup
- Nested HTML markup
- Not-so-long lines displayed on mobile phone screens

Viewing 5 replies - 1 through 5 (of 5 total)

Thread Starter Alexandre Froger
(@frogerme)

1 year, 1 month ago
Using recommended snippet in the theme’s additional CSS does the trick:
```
div[class*='code-block-pro']:not(.x) pre span.line {
    white-space: pre-wrap;
}
```
However, to also keep the default functionality, using a class like force-wrap on the block, and changing above like the following allows to give the choice per block:
```
div[class*='code-block-pro force-wrap']:not(.x) pre span.line {
    white-space: pre-wrap;
}
```
I still feel this should be a block option though, so I will not mark as resolved just yet.
Plugin Author Kevin Batdorf
(@kbat82)

1 year, 1 month ago

Hi

The issue has come up in the past and I’ve just decided that text wrapping isn’t a feature I want to support globally. The provided snippet is there for those who really think they need it though (fyi it might break some other features like line highlighting and blurring though)

The presence of !important is bad practice and makes things difficult.

Can you explain what you mean by this? What exactly is difficult? Maybe I can help with that
Thread Starter Alexandre Froger
(@frogerme)

1 year, 1 month ago
Hi Kevin, and thank you for the reply!

I’ve just decided that text wrapping isn’t a feature I want to support globally.

An option like there exists for ignoring parsing shortcodes would have been nice, but fair enough, and well understood – development time is not free, even in free plugins, so I can very much relate. It is a pity that the only potential solution is putting other features at risk of breaking.

Can you explain what you mean by this?

I simply meant it is a well-known anti-pattern (a quick Google away can confirm) and a code-smell; it was more of a general statement, as it often nullifies possibilities of override no matter the selector specificity. As stated though, technical challenges for wide theme support make its usage here somewhat justifiable.

I’ve been trying to bring support to highlight/blurring with line wrapping (and that’s where !important has begun to rear its ugly head). Below is some updated code, if it helps anyone. Empty lines still don’t highlight on hover because they end up with a height of 0 though, and that’s currently my main focus.
```
div[class*='code-block-pro'][class*='force-wrap'] pre span.line.cbp-line-highlight .cbp-line-highlighter,
div[class*='code-block-pro'][class*='force-wrap'] pre span.line.cbp-no-blur:hover .cbp-line-highlighter,
div[class*='code-block-pro'][class*='force-wrap'].cbp-highlight-hover:not(.cbp-blur-enabled:not(.cbp-unblur-on-hover)) pre span.line:hover .cbp-line-highlighter,
div[class*='code-block-pro'][class*='force-wrap']:not(.code-block-pro-editor) pre span {
    white-space: pre-wrap;
    min-height: 100% !important;
    min-width: 100% !important;
}
```
Thread Starter Alexandre Froger
(@frogerme)

1 year, 1 month ago
Code to put in theme’s Additional CSS field – updated for empty lines support with highlight and blur:
```
/**
 * Line wrap support
 *
 * Use the class force-wrap in the block under
 * "Advanced" > "Additional CSS class(es)"
 */
div[class*='code-block-pro'][class*='force-wrap'] pre span.line.cbp-line-highlight .cbp-line-highlighter,
div[class*='code-block-pro'][class*='force-wrap'] pre span.line.cbp-no-blur:hover .cbp-line-highlighter,
div[class*='code-block-pro'][class*='force-wrap'].cbp-highlight-hover:not(.cbp-blur-enabled:not(.cbp-unblur-on-hover)) pre span.line:hover .cbp-line-highlighter,
div[class*='code-block-pro'][class*='force-wrap']:not(.code-block-pro-editor) pre span {
    white-space: pre-wrap;
    min-height: 100% !important;
    min-width: 100% !important;
}

div[class*='code-block-pro'][class*='force-wrap']:not(.code-block-pro-editor) pre span.line span:empty:not(.cbp-line-highlighter)::before {
    content: ' ';
    visibility: hidden;
    opacity: 0;
    min-width: 100% !important;
    min-height: 100% !important;
}
```
Plugin Author Kevin Batdorf
(@kbat82)

1 year, 1 month ago

Thanks for the snippet! I can point someone here in the future to try it out.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Option to wrap text’ is closed to new replies.