Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

No ability to indent #14554

Closed
michaelswengel opened this issue Mar 21, 2019 · 41 comments
Closed

No ability to indent #14554

michaelswengel opened this issue Mar 21, 2019 · 41 comments
Labels
[Block] Paragraph Affects the Paragraph Block Needs Design Feedback Needs general design feedback. [Type] Enhancement A suggestion for improvement.

Comments

@michaelswengel
Copy link

michaelswengel commented Mar 21, 2019

Is your feature request related to a problem? Please describe.
In the old WP editor, we had the ability to indent paragraphs, list items, or whole sections of text at will. Gutenberg apparently provides no way to do this. This is a feature that I used very very frequently and need to have.

For example, items under an H3/H4 could be indented under an H2 if needed. One use case would be something like the following:

3 Reasons Gutenberg Needs Better Indentation Control

      Reason 1 Heading Here
      P: Reason 1 paragraph text here. This type of formatting wouldn't work as a typical list item.

      Reason 2 Heading Here
      P: Reason 2 paragraph text here.

      Reason 3 Heading Here
      P: Reason 3 paragraph text here.

Next major point of article.

This type of formatting makes posts far easier to follow visually and better organizes information. Hopefully this makes sense.

Describe the solution you'd like
I would like to see native indent/outdent abilities return in Gutenberg. This is the ideal (and honestly, only) solution.

Describe alternatives you've considered
Using a classic block or the classic editor is not a solution as these will be going away in the future. While this can be done to a limited extent via HTML, most people are not comfortable with HTML/CSS and should not be required to use it to do what was so easy to do in the old editor.

PLEASE bring native indenting to Gutenberg.

@youknowriad youknowriad added the [Type] Enhancement A suggestion for improvement. label Mar 22, 2019
@vesaraiskila
Copy link

I wholeheartedly support adding the ability to indent paragraphs and other items. We, too, do that all the time. It is strange that this feature has been omitted from Gutenberg.

As the feature is not available, one has to use an HTML solution that invariable causes an error message, although the solution works after converting the block into HTML - see my bug report at

#14672

@michaelswengel
Copy link
Author

Agreed. PLEASE bring back the ability to indent paragraphs. This is a very important feature for many of us.

@aduth
Copy link
Member

aduth commented Mar 28, 2019

Using a classic block [...] is not a solution as these will be going away in the future.

Can you elaborate on where this information comes from? Specifically about the block. The "Classic Editor" plugin support window being defined as through December 31, 2021, but the classic block is not part of the Classic Editor plugin.

@michaelswengel
Copy link
Author

@aduth , the classic editor is going away we are told. Is that wrong?

Are you saying you plan to support the classic block indefinitely?

@aduth
Copy link
Member

aduth commented Mar 28, 2019

I'm not aware of plans to stop supporting the Classic block. It serves a different purpose from the Classic Editor plugin. The block exists largely to preserve the integrity of content produced prior to WordPress 5.0. The plugin serves to restore the pre-5.0 visual interface as users transition to the new editor.

To be clear, this says nothing of whether it may be subject to future iterations in its how it looks and behaves, but I expect it would continue to exist in one form or another.

@michaelswengel
Copy link
Author

That's good news. However, having to use the classic block for something like this doesn't exactly lend itself to a seamless, enjoyable experience with Gutenberg, and it would be awesome if we can get it baked in. :)

@vesaraiskila
Copy link

I was advised earlier to use something like this in the HTML mode to achieve paragraph indentation:

<p style="padding-left: 30px;">A paragraph to be indented</p>

However, doing that invokes an error message, and after resolving it in a way that maintains the indentation, the block can only be edited in HTML mode, which is cumbersome.

So, an important feature has been omitted, and a solution around it has significant problems of its own.
I submitted a report about the latter at
#14672

@noahkarp
Copy link

noahkarp commented Apr 5, 2019

As a newbie to WP, I assumed that indenting text blocks would be an indispensable function. I took it for granted that moving to Gutenberg would preserve that functionality.

I like Gutenberg so far, but this is a terrible limitation. On our site we indent text all the time for literary quotations etc, and not having a simple tool for doing this is perplexing.

PLEASE BRING BACK INDENT.

@ghost
Copy link

ghost commented May 22, 2019

I just started using WP and like other have said you can edit as HTML, but it throws an error at you. In addition, that block will remain in HTML format only from that point on. I thought Gutenberg was suppose to bring about simplicity?

In writing, starting a new paragraph should be indented, omitting such a basic writing concept is absurd.

@cvladan
Copy link

cvladan commented Oct 15, 2019

I'm stunned by the fact that indenting is not supported in Gutenberg...

@PaddyWhacks
Copy link

I agree - surely this should be part of the core functionality? Crazy that users have to edit HTML for a basic indent.

@phpbits
Copy link
Contributor

phpbits commented Feb 10, 2020

@michaelswengel @PaddyWhacks I've added indent and outdent formats on EditorsKit plugin. I hope this could be a huge help. Indent will be available on the following blocks:

  • Paragraph Block
  • Heading Block
  • List Block

Here's the preview on how the formats work. Thanks!

Gutenberg indent formats

@michaelswengel
Copy link
Author

michaelswengel commented Feb 12, 2020 via email

@wpericam
Copy link

wpericam commented Apr 9, 2020

I've worked on several sites recently where this was an issue (not being able to indent the first line of a paragraph). A plugin or CSS shouldn't be necessary for a paragraph block, as others have mentioned above, because this is a common formatting need for paragraphs. Also, not all users have access to these features (ie. CSS and plugins).

Just wanted to add that I've run into this 3 or 4 times in the last month.

@jdoree
Copy link

jdoree commented Apr 10, 2020

Agreed that this should be a native feature. Its omission is shocking.

@ricjcs
Copy link

ricjcs commented Apr 28, 2020

I also request this option and I even suggested it to Wordpress.com support

@LukaszJaro
Copy link

Yes, just noticed the tech writer I work with is using spaces to indent paragraphs: <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; on and on..</p>

@devisan
Copy link

devisan commented Jun 22, 2020

...and now they've removed indent from the Classic Block. Why?

@paaljoachim
Copy link
Contributor

I am using the Gutenberg plugin version 8.4.
At present time the easiest method is to add the Classic Block and use the Indent icon.
(The below is in Norwegian.)

Screen Shot 2020-07-05 at 10 49 04

There are a lot of areas in Gutenberg core to focus on. This feature just has not yet been added to the Paragraph block.
When someone has the time to add the feature it will likely make its way into the drop down similar to what Jeffrey did for EditorsKit.

@ellatrix I am just pinging you here so that you get a heads up about this issue.

@devisan
Copy link

devisan commented Jul 5, 2020

Like I said above, but you apparently didn't believe, the option has been removed recently. On all my sites. It was there a couple of months ago, but it's gone now. That's why I posted here.
Screen Shot 2020-07-05 at 11 10 36 AM

@paaljoachim
Copy link
Contributor

Hey @devisan

I worked with a client site yesterday and could not find indentation in the paragraph block in Gutenberg so I did some searching. I added the above comment to how I indented using the classic block directly in Gutenberg and that worked alright. It is not believing or not, but what I did to create a work around. Your toolbar looks different then the Classic Block toolbar in Gutenberg.

Example from a local site:
Using the theme Twenty Twenty.

Here is the toolbar with the Classic Editor plugin installed and activated. Indentation icons are seen in the second row.
Screen Shot 2020-07-05 at 18 44 08

Here is the toolbar with the Gutenberg plugin 8.4 installed and activated. (Deactivated the Classic Editor plugin)
Screen Shot 2020-07-05 at 18 41 56

It looks like you might be using the TinyMCE Advanced plugin. It should have a way to bring back indentation through a kind of settings page.

Anyhow this issue is about getting indentation into Gutenberg.

@automattic-ian
Copy link

Getting some user feedback to add an indent capability.

@PaddyWhacks
Copy link

@michaelswengel @PaddyWhacks I've added indent and outdent formats on EditorsKit plugin. I hope this could be a huge help. Indent will be available on the following blocks:

  • Paragraph Block
  • Heading Block
  • List Block

Here's the preview on how the formats work. Thanks!

Gutenberg indent formats

Wonderful, thanks Jeff. Still should be in the core functionality of Gutenberg, but awesome workaround until its added

@paaljoachim
Copy link
Contributor

Heya Ian @automattic-ian

It is awesome that you are looking into getting user feedback.
Looking at the existing "More rich text controls" drop down.

Screen Shot 2020-07-28 at 11 11 37

It would be nice to add increase and decrease indent into the drop down menu.

@ellatrix Ella, I am pinging you about this issue, as I think you might want to know about it.

@ellatrix
Copy link
Member

ellatrix commented Aug 6, 2020

Indenting a paragraph should not be added at the rich text level, but at the paragraph level, similar to alignment. You cannot control the paragraph element with rich text, only the contents. For indentation you need to add a class or style to the paragraph element.

@mtias mtias added the [Block] Paragraph Affects the Paragraph Block label Aug 30, 2020
@mtias mtias added the Needs Design Feedback Needs general design feedback. label Aug 30, 2020
@supernovia
Copy link

Noting another request for indentation:
https://wordpress.com/forums/topic/how-to-indent-using-block-editor/

For what it's worth I agree it should go in the paragraph styles block, although I have seen some folks ask for indentation to write poetry, when they don't want to change their font like the poetry block can.

@aristath
Copy link
Member

aristath commented Sep 3, 2020

Just a note here:
There is currently an undergoing effort to bring padding & margin controls to all blocks.
Once that is implemented this one will also be solved.

@supernovia
Copy link

There is currently an undergoing effort to bring padding & margin controls to all blocks.
Once that is implemented this one will also be solved.

I'm not sure that would cover indentation of paragraphs if people want to indent those.

@garretthyder
Copy link
Contributor

Indenting a paragraph should not be added at the rich text level, but at the paragraph level, similar to alignment. You cannot control the paragraph element with rich text, only the contents. For indentation you need to add a class or style to the paragraph element.

From discussing in a scrub with @paaljoachim I wonder if we could instead add it to the alignment menu as indent/outdent;
Screen Shot 2020-10-20 at 11 15 29 PM
We could use icons you find in most word editors;
Screen Shot 2020-10-20 at 11 16 21 PM

@DavidRuaune
Copy link

garretthyder - "We could use icons you find in most word editors ..." would be great. That's what you used to have!

@garretthyder
Copy link
Contributor

garretthyder - "We could use icons you find in most word editors ..." would be great. That's what you used to have!

Ah right, thanks @DavidRuaune, I forgot there was already icons present for that in the Classic Editor so we have the dashicons we'd need.

@poojashetty18
Copy link

Got some user feedback to add an indent capability.

@paaljoachim
Copy link
Contributor

paaljoachim commented Jan 19, 2021

It would be great to get a status update on this issue.
Thanks!

Edit:
I did some searching. It seems indent is really just indenting the first line. Adding the word indent to the CSS field in the Advanced panel in the sidebar. The first line indentation is automatically added as can be seen in the backend and frontend.

That blockquote is meant to indent the full paragraph. https://www.w3schools.com/TAGS/tag_blockquote.asp

To indent the full paragraph I had to name the CSS class name something else.
I named the CSS class blockquote. (Can be any name as long as it matches the name in the stylesheet.)

In the Stylesheet I added

.blockquote {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
}

The backend did not show the CSS, but the indented paragraph could be seen on the frontend.


Bottom line:
It seems we need a way to indent the first line and a way to indent the full paragraph.

@jerrysarcastic
Copy link

Also requested in https://wordpress.com/forums/topic/paragraph-feature/

For the time being I gave the classic block option as a workaround, but is it not correct that we will be retiring this block eventually? I noted this in the description for the classic editor plugin:

Classic Editor is an official WordPress plugin, and will be fully supported and maintained until at least 2022, or as long as is necessary.

That does not make it sound like the classic editor will be around indefinitely (but will instead sunset at some point) so does it seems safest to assume that the classic block functionality may also be removed around the same time?

@ricjcs
Copy link

ricjcs commented Jan 31, 2021

That does not make it sound like the classic editor will be around indefinitely (but will instead sunset at some point) so does it seems safest to assume that the classic block functionality may also be removed around the same time?

The classic editor will no longer be officially supported, but the classic block will not disappear, even because of the old posts.

In fact, the classic block is equivalent to not having a block. If you look at the code of a post that has some classic block, you will see that the html code appears without any block.

But indentation was something that should be part of the paragraph block, so that it was not necessary to insert the classic block just for that.

@paaljoachim
Copy link
Contributor

paaljoachim commented Feb 12, 2021

Another way to handle this issue (for now at least) is this issue:
Plain quote style (indent) #28524
As that is a quicker fix.

@Sandstromer
Copy link

Could an indent option be added to Text settings below the Drop cap option, like so:

paragraph-text-indent

The CSS could be included in the paragraph stylesheet, something like:

.has-indent {
    text-indent: 2em;
}

As the drop cap is visually applied to start of the paragraph, this would make it more consistent as the indent is also visually applied at the start of the paragraph.

@aristath
Copy link
Member

aristath commented Feb 22, 2021

Adding an indent option to paragraph blocks IMO would be wrong...
I can think of 2 scenarios where one would want to indent a pargraph:

  1. If it's a quote
  2. If ALL paragraphs are indented because that is what the design requires.

In the 1st case, a quote block should be used and not a paragraph block because the paragraph would be semantically incorrect.
In the 2nd case the theme should style all paragraph blocks.

If a site/theme does indeed want this as an option in paragraphs for whatever reason, then it should be added as a block-style and not an option:

register_block_style(
    'core/paragraph',
    array(
        'name'         => 'indented',
        'label'        => esc_html__( 'Indented', 'my-theme' ),
        'inline_style' => 'p.is-style-indented { text-indent: 2em; }',
    )
);

@paaljoachim
Copy link
Contributor

paaljoachim commented Feb 22, 2021

Thank you Ari!

Btw to indent the whole paragraph: https://ulyssesonline.com/2011/08/04/indent-entire-paragraph-using-css/
One can instead of adding text-indent use padding.

Another method I used. Was to add a custom CSS class under the CSS area of the Advanced panel. Then I added the CSS to the child theme style.css.

@mtias
Copy link
Member

mtias commented Jul 13, 2021

Closing this in favor of #28524.

@ricjcs
Copy link

ricjcs commented Jul 12, 2022

In my opinion there are other reasons to use paragraph indentation besides quote (although it is probably the most used), such as an introduction, to highlight a paragraph, etc.

Also, the plain quote style in many themes continues with the theme style instead of just the indented paragraph, and it also doesn't make sense to use this option if it's not a quote.

For me, and in my opinion, the plain quote style does not completely replace the functionality of the Classic Block.

Is there a possibility that this topic will be reopened?

On Wp-calypso I noticed that a issue about this topic remains open: Gutenberg: Add indents to paragraphs

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Paragraph Affects the Paragraph Block Needs Design Feedback Needs general design feedback. [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests