Can I force a metabox to be in one column?

2 comments

1. If you want the meta box to appear below the content area, use the context parameter ‘normal’. See Function Reference/add meta box – Parameters. Initially, your meta box should only go to the side bar if the context parameter is set to ‘side’.

   As far as making it impossible for the user to drag it to the side, study the answer at “Block metabox – No expanding, no moving around” for some direction on this.

   1. Write a function to add a custom class to the postbox element which is handled by postbox.js.
   2. The answer linked to above provides a script that disables the ability to both move and sort any meta box which uses your custom class.

   Since you wish to make your meta box sortable while restricting it to the column beneath the content area, see if you can discover which part of
   postbox.js
   determines whether a postbox is set beneath the content or on the
   side bar. It seems that you want it to appear in #poststuff and not in #side-sortables. I don’t have a script to do this at the moment, but hopefully this set you in the right direction.

2. First of all, thanks to RyanLoremIpsum for pointing me to the right direction. I’ve found the solution to my problem, which uses the method from the post suggested by Ryan Block metabox – No expanding, no moving around and the answer from jQuery UI Sortable – prevent dropping on one particular list to restrict a specific item from dropping into another drop area.

   In the case of restricting metaboxes from being placed into the sidebar, here’s how to make it work:

   1. Add a filter class .no-sidebar to your metabox element(s).

      By using the postbox_classes_post_METABOX_NAME filter, we can include custom classes to be attached to that specific metabox upon its creation.

      public function my_normal_metabox( $classes ) {
          $classes[] = 'no-sidebar';
          return $classes;
      }
      add_filter( 'postbox_classes_post_my_meta_box', array( $this, 'my_normal_metabox' ) );
      

   2. Add a footer script block in the admin page to restrict .no-sidebar metaboxes from being dropped into the sidebar.

      Here, we target the normal container (that houses the non-sidebar widgets) to bind the jQuery UI Sortable widget beforeStop event to check if the sidebar container is about the receive a .no-sidebar metabox. If so, return false to cancel the drop.

      function my_admin_print_footer_scripts()
      {
          ?><script type="text/javascript">/* <![CDATA[ */
              jQuery(function($) {
                  $("#normal-sortables")
                      .sortable({ beforeStop: function (event, ui) { 
                          if ($("#side-sortables").find('.no-sidebar').length) {
                              // can the sort before adding the element to the sidebar
                              return false;
                          }
                      } })
                      // refresh the instance
                      .sortable('refresh');
              });
          /* ]]> */</script><?php
      }
      add_action( 'admin_print_footer_scripts', array( $this, 'my_admin_print_footer_scripts' ), 99 );
      

   This method ensures that any future metaboxes with the class no-sidebar can only be sorted in the normal container. A potential UX problem is that the user can still see the placeholder box while dragging the metabox over the sidebar area. This might fool the user into thinking that they were unsuccessful at sorting the box the first time.

Comments are closed.