WordPress.org

Make WordPress Core

Opened 3 years ago

Last modified 12 months ago

#32920 new defect (bug)

Centering iFrames using visual editor

Reported by: prionkor Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: TinyMCE Keywords: dev-feedback has-patch needs-testing needs-unit-tests
Focuses: Cc:

Description

When we need to put a video embed code into editor, we use the text editor put the video html then switch back to visual editor.

Visual editor does great job to resize video by dragging the placeholder which means to represent the video.

But when I select the placeholder and hit text align (left, right or center) the placeholder acts as if it is aligning itself accordingly (by adding .alignleft, .alignright, .aligncenter classes). If I hit save then preview the changes. No alignment happens.

So, either the iframe should be wrapped with a <p> tag with css text align. For example for center alignment of the video should create html like.

<p style="text-align:center">
    <iframe>
        ...
    </iframe>
</p>

and so on..

Or the alignment classes should not be added to make impression that video is actually aligning, it gives wrong visual feedback.

Attachments (1)

32920.patch (3.7 KB) - added by prionkor 3 years ago.
Add alignment classes to iframe.

Download all attachments as: .zip

Change History (12)

#1 @prionkor
3 years ago

Another idea is to add classes .alignleft, .alignright, .aligncenter, .alignnone classes to the iframe. That will allow theme developers to add appropriate css for the alignment.

Last edited 3 years ago by prionkor (previous) (diff)

#2 follow-up: @iseulde
3 years ago

  • Component changed from Editor to TinyMCE
  • Version 4.2.2 deleted

We can make it behave like an image. The only problem is that there will be no theme that supports it.

#3 in reply to: ↑ 2 @prionkor
3 years ago

Replying to iseulde:

We can make it behave like an image. The only problem is that there will be no theme that supports it.

Theme must have styles for editor default classes right? For example if a theme doesn't have any css defined for .alignleft, .alignright, .aligncenter, .alignnone non of image alignment will work. It could be same for the iframe too.

Most practical approach would be wrapping with <p style="text-align: center/left/right">...</p> on returned html. Just like any text block in the editor but iframe will act like block label element if we do that.

Last edited 3 years ago by prionkor (previous) (diff)

#4 @atomicjack
3 years ago

  • Keywords 2nd-opinion dev-feedback added

Could potentially be implemented, following the above comments.

More feedback on this should be given, though.

@prionkor
3 years ago

Add alignment classes to iframe.

#5 @prionkor
3 years ago

  • Keywords has-patch added

Adding align class is the most non destructive change we can make. I have created a patch. I am sure it can be improved.

Functionalities:

  1. Adds align classes to iframe.
  2. When align is removed by clicking an active button editor alignnone class to images. In the case of iframe all align class is removed. Examples: <iframe class="alignleft"></iframe>, <iframe class="alignright"></iframe>
  3. findAlignClass function I have attached to editor. I am not much experienced with tinymce. IF the function can be moved to anywhere else please do so.
Last edited 3 years ago by prionkor (previous) (diff)

#6 @prionkor
3 years ago

  • Keywords needs-testing needs-unit-tests added; 2nd-opinion removed

This ticket was mentioned in Slack in #core by chriscct7. View the logs.


2 years ago

#8 @prionkor
2 years ago

Following #slack conversation if anyone can let me know what is the formatting issue. I would love to fix the patch.

#9 @prionkor
22 months ago

Now that we have the major release of WP done. Can you shed more light into this ticket and discuss what need to be done moving forward?

#10 @swissspidy
21 months ago

Related/duplicate: #31688

#11 @taskotr
12 months ago

It would be nice to add the same functionality as the images have: allowing the user to align the video either to the left or right or center. Also, resize the video via the Editor the same way as you can do it with the image.

Note: See TracTickets for help on using tickets.