Add a Resize Handle for WordPress Post and Page Edit Sidebar

I was converting some ACF fields to Gutenberg ACF fields and put together some options for how/where content can be edited.

The acf_register_block_type() function has the mode option.

The allowed values are:
auto: Preview is shown by default but changes to edit form when block is selected.
preview: Preview is always shown. Edit form appears in sidebar when block is selected.
edit: Edit form is always shown.

The sidebar is pretty small width wise and the ACF fields seem to only be put in within a table structure which makes for a really small WYSIWYG editor.

I thought maybe we could make the sidebar resizable.

I tried in CSS. It’s kind of a hack involving rotating two divs to get the shadow dom resize grabber in the right position to slide from right to left (it only goes from left to right by default). The resize grabber is also on top left when the viewport is above a certain width and bottom right when below the same width.

As I said, kind of hacky, but a css drop in none the less.
It was a fun experiment.

/*
Add resize handle to div and flip it around to get to be able to move to the left
when above 782px
*/
.edit-post-layout .interface-interface-skeleton__sidebar {
  border-right: 1px solid #e0e0e0;
  display: flex !important;
  resize: horizontal;
  will-change: transform;/*fix blurry text*/
}

.edit-post-layout .interface-complementary-area.edit-post-sidebar {
  border-right: 1px solid #e0e0e0;
  overflow: auto; /*fixes column scrolling issue*/
  width: 100%;
  will-change: transform;/*fix blurry text*/
}

.edit-post-layout .interface-complementary-area.edit-post-sidebar:before {
  content: ' ';
  background: rgb(224 224 224);
  height: 10px;
  width: 10px;
  position: absolute;
  z-index: 2;
  bottom: 0;
  right: 0;
}

@media (min-width: 782px) {
  .edit-post-layout .interface-interface-skeleton__sidebar {
    border-right: 1px solid #e0e0e0;
    max-width: 50%;
    transform: rotate(180deg);
  }

  .edit-post-layout .interface-complementary-area.edit-post-sidebar {
    border-left: 1px solid #e0e0e0;
    transform: rotate(180deg);
  }

  .edit-post-layout .interface-complementary-area.edit-post-sidebar:before {
    bottom: unset;
    left: 0;
    right: unset;
    top: 0;
  }
}

.edit-post-layout:not(.is-sidebar-opened) .interface-interface-skeleton__sidebar {
  width: unset !important;
}

Leave a Reply

Your email address will not be published. Required fields are marked *